不要将参数/标头传递到 SWR 中的缓存键

Question

我正在使用 SWR 并在每个请求上传递不同的标头。我不希望标头位于传入的缓存键中，但我不知道如何使用此库来做到这一点。目前的代码是这样的：

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`)

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

Answer 1

可以像 @juliomalves 提到的那样不向密钥传递标头。

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

但是，SWR 不鼓励，因为如果标头发生更改，那么 SWR 仍将使用以前的密钥和数据。如果这对您来说不是问题，请继续上面的操作。

如果您想在标题更改时更新数据，那么您有两个选择：

1. 在 both

   useSWR()

   和

   mutate()

   的键中包含标头。 您可以使用数组而不是字符串将多个参数传递给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]);

2. 将标头传递到

   useSWR()

   的键中，并使用不需要键的 bound mutate：

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

// ... somewhere else in component

mutate();