javascript - 使用 SWR 时如何正确传递 header ？

Question

我决定尝试将我的大部分 API 函数转移到 SWR，因为它让我可以做更多事情!
问题
但是，我遇到了一个巨大的问题，我无法弄清楚如何将 header 正确传递到 SWR。我查看了文档等等，但似乎没有任何效果。我正在使用 Twitch API、Next.js 和 NextAuth 来处理 token 、 session 等。我在下面留下了我的 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: 您可以使用数组作为 key useSWR 中的参数通过multiple arguments到fetcher功能。

一、useSession是一个 React 钩子(Hook)，只能在 React 组件/另一个钩子(Hook)的顶层调用。这样可以避免破坏 Rules of Hooks .
其次，您应该移动 useSession调用Dash零件。然后您可以调用fetcher有条件地(见 Conditional Fetching )当 session存在，并通过 accessToken使用数组作为 key 的 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范围。请注意，您还需要一个 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);
}