Am I passing headers wrong in SWR

It's be a while since I was doing any sort of coding and I am coming back to help a friend with the creation of a site. However jumping straight into the depend I am now stuck with SWR.

Problem

I am just trying to send a Authorization: Bearer header however upon the page loading SWR just shows it loading state? I am aware this could be a simple problem but a helpful answer would be amazing. I have also tried looking at dev tools etc and nothing related to SWR is there.

The API Site is built with Strapi V4 and I am aware they have changed there structre of the API response which could also be an issue for me however I am not aware of one yet, so if you spot one gladly let me know!

Code

import {
  Table,
  TableCaption,
  Thead,
  Tr,
  Th,
  Tbody,
  Td,
  Tfoot,
} from "@chakra-ui/react";
import useSWR from "swr";
import axios from "axios";

const fetcher = async (url) => {
    const res = await axios.get(url, {
      headers: {
        "Authorization": `Bearer ${process.env.API_KEY}`,
      },
    });
    return res.data;
  };

export const BluForTable = () => {
    const { data, error} = useSWR(
        ["https://api-skr.herokuapp.com/api/factions", fetcher]
    );

    if(error) return (
        console.log(error),
        (
            <div>Failed to load {error.message}</div>
        )
    )
    if(!data) return <div>loading...</div>
    
  return (
    <>
    <div>
      {data.map((faction) => (  
      <Text>
        {faction.data.attributes.Title}
      </Text>
      ))}
    </div>
    <Table variant="simple">
        <TableCaption>Imperial to metric conversion factors</TableCaption>
        <Thead>
          <Tr>
            <Th>To convert</Th>
            <Th>into</Th>
            <Th isNumeric>multiply by</Th>
          </Tr>
        </Thead>
        <Tbody>
          <Tr>
            <Td>inches</Td>
            <Td>millimetres (mm)</Td>
            <Td isNumeric>25.4</Td>
          </Tr>
          <Tr>
            <Td>feet</Td>
            <Td>centimetres (cm)</Td>
            <Td isNumeric>30.48</Td>
          </Tr>
          <Tr>
            <Td>yards</Td>
            <Td>metres (m)</Td>
            <Td isNumeric>0.91444</Td>
          </Tr>
        </Tbody>
        <Tfoot>
          <Tr>
            <Th>To convert</Th>
            <Th>into</Th>
            <Th isNumeric>multiply by</Th>
          </Tr>
        </Tfoot>
      </Table>
      </>
  );
};

API Response

{
    "data": [
        {
            "id": 1,
            "attributes": {
                "Title": "Russia",
                "faction_information": "# Russian Squad Faction\n",
                "faction_lunch_date": "2015-02-28",
                "createdAt": "2022-01-28T14:42:02.087Z",
                "updatedAt": "2022-01-28T14:46:02.807Z",
                "publishedAt": "2022-01-28T14:46:02.804Z",
                "media_link": null
            }
        },
        {
            "id": 2,
            "attributes": {
                "Title": "US",
                "faction_information": "# whatever",
                "faction_lunch_date": null,
                "createdAt": "2022-01-29T04:37:36.773Z",
                "updatedAt": "2022-01-29T04:38:23.549Z",
                "publishedAt": "2022-01-29T04:37:48.962Z",
                "media_link": null
            }
        }
    ],
    "meta": {
        "pagination": {
            "page": 1,
            "pageSize": 25,
            "pageCount": 1,
            "total": 2
        }
    }
}

Solution

You have an error when passing a key, here:

const { data, error} = useSWR(
        ["https://api-skr.herokuapp.com/api/factions", fetcher]
    );

First argument of useSWR function is the key, second is the fetcher. You pass them as an array and useSWR thinks that this whole thing is a composite key (which is possible to have in advanced scenarios)

So just remove array brackets and pass key and fetcher as separate arguments:

const { data, error} = useSWR(
        "https://api-skr.herokuapp.com/api/factions", fetcher
    );