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

Question

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

问题

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

注意：

如果出现错误，我控制台记录错误返回，当我访问页面/dash 时显示failed to load 但没有控制台错误日志？

Github Repo

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：您可以使用数组作为useSWR 中的key 参数，将multiple arguments 传递给fetcher 函数。

---

首先，useSession 是一个 React 钩子，只能在 React 组件/另一个钩子的顶层调用。这样可以避免破坏Rules of Hooks。

其次，您应该将useSession 调用移至Dash 组件。然后，当session 存在时，您可以有条件地调用fetcher（参见Conditional Fetching），并使用数组作为key 参数将accessToken 传递给fetcher 方法。

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 参数。请注意，您还需要在 axios 调用上使用 return 语句才能正确返回数据。

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