我在 SWR 中传递 headers 错误吗

Question

我已经有一段时间没有做任何类型的编码了，我回来帮助朋友创建网站。然而，直接进入依赖项，我现在被 SWR 困住了。

问题

我只是想发送 Authorization: Bearer header 但是在页面加载时 SWR 只显示加载状态？我知道这可能是一个简单的问题，但有用的答案会很棒。我也试过查看开发工具等，但没有与 SWR 相关的内容。

API 网站是用 Strapi V4 构建的，我知道他们已经改变了 API 响应的结构，这对我来说也可能是个问题，但我还不知道有一个, 所以如果你发现一个很高兴告诉我！

代码

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 回应

{
    "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
        }
    }
}

Answer 1

您在传递密钥时出错，此处：

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

useSWR 函数的第一个参数是键，第二个是获取器。你将它们作为一个数组传递，useSWR 认为这整个东西是一个复合键（在高级场景中可能有）

所以只需删除数组括号并将键和提取器作为单独的参数传递：

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

我在 SWR 中传递 headers 错误吗

Am I passing headers wrong in SWR

javascript

next.js

api-design

swr

问题

代码

API 回应