useSWR - 如何将配置对象传递给获取

Question

我正在尝试将 useSWR 集成到我正在处理的下一个 js 项目中。

我想将配置作为参数传递给 fetcher。我在 docs

中阅读了有关多个参数的内容

但由于某种原因它没有返回数据。它正在发出 api 请求，我可以在网络选项卡中看到它。

不知道该怎么做。

有什么建议吗？

const fetcher = async (url, config) => {
  let res;

  if (config) {
    res = await fetch(url, config);
  } else {
    res = await fetch(url);
  }

  if (!res.ok) {
    const error = new Error('An error occurred while fetching the data.');

    error.info = await res.json();
    error.status = res.status;
    throw error;
  }

  return res.json();
};

const { data, error } = useSWR(
  [
    rolesUrl,
    {
      headers: {
        Authorization: `Bearer ${user.token}`,
        'Content-Type': 'application/json',
      },
    },
  ],
  fetcher
);

Answer 1

经过很长时间的调试，我发现了。 fetch 正在获取配置对象。

然后向api发出请求。然后使用 SWR returns 响应。这会导致组件重新渲染。重新创建配置对象。

useSWR 认为参数已更新并再次发出 api 请求。这就是我们得不到数据的原因。

我已经用 useMemo hook

解决了这个问题

const config = useMemo(
  () => ({
    headers: {
      Authorization: `Bearer ${user.token}`,
      'Content-Type': 'application/json',
    },
  }),
  [user.token]
);

const { data, error } = useSWR([rolesUrl, config], fetcher);

useSWR - 如何将配置对象传递给获取

useSWR - How to pass config object to fetch

reactjs

next.js

vercel

swr