使用SWR时如何正确传递请求头？适配Next.js+NextAuth+Twitch API场景

存在的核心问题 #

• 违反React Hook使用规则：useSession是React Hook，只能在React组件/自定义Hook的顶层作用域调用，你将它写在普通函数fetcher中，会直接抛出Hook调用规则错误。这也是你控制台没有输出自定义错误日志的核心原因——代码在进入你写的error分支前就已经抛出未捕获异常。
• fetcher函数无返回值：你调用axios.get后没有返回对应的promise，SWR无法拿到请求的返回状态和结果，自然不能正确处理数据/错误状态。
• 环境变量读取错误：Next.js中只有前缀为NEXT_PUBLIC_的环境变量才能在客户端侧代码中读取，你当前使用的process.env.TWITCH_CLIENT_ID如果没有加这个前缀，在客户端代码中读取结果会是undefined，直接导致请求头非法。
• 会话加载状态未处理：useSession返回的session在初始加载阶段是null，此时直接取session.accessToken会抛出空指针错误。

修复步骤 #

1. 先将你的.env配置文件里的TWITCH_CLIENT_ID重命名为NEXT_PUBLIC_TWITCH_CLIENT_ID，确保客户端侧可以正常读取该变量。
2. 替换原有代码为以下修正版本：

import axios from "axios";
import {
  VStack,
  Text,
} from "@chakra-ui/react";
import { useSession } from "next-auth/react"
import useSWR from 'swr'

// fetcher接收url和session两个参数，不要在内部调用Hook
const fetcher = (url, session) => {
  // 必须return axios请求的promise
  return axios
    .get(url, { 
        headers: { 
          'Authorization': `Bearer ${session.accessToken}`,
          'Client-Id': `${process.env.NEXT_PUBLIC_TWITCH_CLIENT_ID}`
        }})
    .then((res) => res.data);
}
     
function Dash () {
  // 把useSession移到组件顶层调用
  const { data: session, status } = useSession()
  // SWR key用数组传入session，session更新时自动重新请求
  // 会话还在加载时不发起请求
  const { data, error } = useSWR(
    status === 'authenticated' ? [`https://api.twitch.tv/helix/streams/key?broadcaster_id=630124067`, session] : null,
    fetcher
  )
  
  if (error) {
    console.log(error)
    return <div>Failed to load</div>
  }
  if (!data) return <div>loading...</div>

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

export default Dash

内容的提问来源于stack exchange，提问作者MatDoak