不要将 parameters/headers 传递给 SWR 中的缓存键

Question

我正在使用 SWR 并在每个请求上传递不同的 headers。我不希望 headers 位于传入的缓存键中，但我不知道如何使用该库来实现。目前的代码是这样的：

const url = `/api/holidays/${
  productDetail.subscription.subscriptionId
}/potential`;

const headers = {
  [MDA_TEST_USER_HEADER]: `${productDetail.isTestUser}`
};

const potentialHolidayStopsResponseWithCredits = useSWR(
  serialize(url, headers),
  fetcher,
  { suspense: true }
).data as PotentialHolidayStopsResponse;

然后我将使用

触发此密钥的全局重新验证

mutate(`/api/holidays/${productDetail.subscription.subscriptionId}/potential`)

但这不会触发重新验证，因为我没有像原始提取器密钥那样传递 headers。我只是想让 url 成为关键，并能够将 headers 和参数直接传递给 fetcher 函数，我该怎么做呢？？

Answer 1

像@juliomalves 提到的那样，不向密钥传递 header 是可能的。

useSWR(url, url => fetchWithHeaders(url, headers))

但是，SWR 不鼓励，因为如果 headers 发生变化，SWR 仍将使用以前的密钥和数据。如果这对您来说不是问题，请继续上述操作。

如果您想在 header 发生变化时更新数据，那么您有两个选择：

在 useSWR() 和 mutate() 的密钥中包含 header。您可以使用数组而不是字符串将 multiple arguments 传递给 fetcher:


import useSWR, { useSWRConfig } from 'swr'
const { mutate } = useSWRConfig();

// and in component...

const fetcherWithHeaders = (url, headers) => {
  // do something with headers and fire request
};

const headers = {
  [MDA_TEST_USER_HEADER]: `${productDetail.isTestUser}`
};

const potentialHolidayStopsResponseWithCredits = useSWR(
  [url, headers],
  fetcherWithHeaders,
  { suspense: true }
).data as PotentialHolidayStopsResponse;

//... somewhere else:

mutate([url, headers]);

将 headers 传递到 useSWR() 的密钥中，并使用不需要密钥的 bound mutate:

const { data, mutate } = useSWR(
  [url, headers],
  fetcherWithHeaders,
  { suspense: true }
);

// ... somewhere else in component

mutate();

不要将 parameters/headers 传递给 SWR 中的缓存键

Do not pass parameters/headers to cache key in SWR

fetch

reactjs

fetch-api

swr