使用 SWR 时如何正确传递标头？

Question

我决定尝试将大部分 API 函数转移到 SWR，因为它让我可以做更多事情！

问题

然而，我遇到了一个巨大的问题，我无法弄清楚如何正确地将标头传递到 SWR 中。我已经查看了文档和更多内容，但似乎没有任何效果。我正在使用 Twitch API、Next.js 和 NextAuth 来处理令牌、会话等。我在下面留下了我的 GitHub 存储库以及我当前尝试使用的代码。

笔记：

如果还发生错误，我控制台会记录错误返回，当我访问页面时，/dash它说failed to load还没有错误的控制台日志？

Github 仓库

import axios from "axios";
import Link from "next/link";
import {
  VStack,
  Heading,
  Divider,
  Text,
  Box,
  Badge,
  Center,
} from "@chakra-ui/react";
import { useSession } from "next-auth/react"
import useSWR from 'swr'

const fetcher = (url) => {
  const { data: session, status } = useSession()
  axios
    .get(url, { 
        headers: { 
          'Authorization': `Bearer ${session.accessToken}`,
          'Client-Id': `${process.env.TWITCH_CLIENT_ID}`
        }})
    .then((res) => res.data);
}
     
function Dash () {
  const { data, error } = useSWR(`https://api.twitch.tv/helix/streams/key?broadcaster_id=630124067`,fetcher)
  
  if (error) return (
    console.log(error),
    <div>Failed to load</div>
  )
  if (!data) return <div>loading...</div>

  return (
    <VStack>
      <Text>{data.user_name}</Text>
    </VStack>
  )
}

export default Dash

Answer 1

TL;DR：您可以使用数组作为key参数来将多个参数useSWR传递给函数。fetcher

首先，useSession是一个 React 钩子，只能在 React 组件/另一个钩子的顶层调用。这可以避免违反Hooks 规则。

其次，您应该将useSession调用移至Dash组件。然后，您可以在存在时fetcher有条件地调用（请参阅条件获取） ，并使用数组作为参数session将 传递给 fetcher 方法。accessTokenkey

function Dash() {
    const { data: session } = useSession()

    const { data, error } = useSWR(
        session ? ['https://api.twitch.tv/helix/streams/key?broadcaster_id=630124067', session.accessToken] : null, 
        fetcher
    )
  
    // Remaining code
}

最后，您的fetcher函数必须稍作修改才能接受该accessToken参数。请注意，您还需要一个关于调用的return语句axios才能正确返回数据。

const fetcher = (url, accessToken) => {
    return axios
        .get(url, { 
            headers: { 
                'Authorization': `Bearer ${accessToken}`,
                'Client-Id': `${process.env.TWITCH_CLIENT_ID}`
            }
        })
        .then((res) => res.data);
}