Estoy intentando cambiar mi uso de API para usar SWR, ya que proporciona muchas más opciones de personalización de las que podría beneficiarme. Sin embargo, la solicitud GET de API debe pasar a través de 2 encabezados 'Authorization': Portador ${session.accessToken} y 'Client-Id': ${process.env.TWITCH_CLIENT_ID} Y después de investigar un poco, encontré un par de formas de cómo hacer esto, pero no funcionan. El siguiente código es lo que tengo, pero cuando la página intenta mostrarlo, muestra la siguiente captura de pantalla.

¿Cómo soluciono esto o, mejor aún, alguien puede mostrar la forma correcta de enviar encabezados mientras usa swr?

 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, token) => { const { data: session, status } = useSession() axios .get(url, { headers: { Authorization: `Bearer ${session.accessToken}` + token }}) .then((res) => res.data); } function Dash () { const { data, error } = useSWR([` https://api.twitch.tv/helix/streams/key?broadcaster_id=630124067`, auth.token],fetcher) if(error) return <div>Error {data.error}</div> if(!data) return <div>loading...</div> return ( <VStack> <Text>{data.data.stream_key}</Text> </VStack> ) } export default Dash