After taking a break from coding for some time, I'm back to help a friend with a website creation project. However, diving straight into the work, I've encountered an issue with SWR.
Challenge
The problem I'm facing is related to sending an Authorization: Bearer header. Whenever the page loads, SWR only displays its loading state. I suspect it's a simple issue but any assistance would be greatly appreciated. I have already checked the developer tools, but nothing related to SWR seems to be present.
The API Site is developed using Strapi V4, and I acknowledge that they have made changes to their API response structure, which might be causing an issue for me. However, I haven't identified one yet, so if you notice anything wrong, please inform me!
Code Snippet
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
}
}
}