Блог

Я решил попытаться перенести большую часть своих функций 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
 

TL;DR: вы можете использовать массив в качестве key параметра useSWR для передачи нескольких аргументов fetcher функции.

Во-первых, useSession это перехват React, и его следует вызывать только на верхнем уровне компонента React / другого перехвата. Это позволяет избежать нарушения правил перехватов.

Во-вторых, вы должны переместить useSession вызов в Dash компонент. Затем вы можете вызвать fetcher условно (см. Условная выборка), когда session существует, и передать accessToken методу выборки, используя массив в качестве key параметра.

 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);
}