不要在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将仍然使用以前的键和数据。如果这对你来说不是问题，就按上面的方法去做。

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

1. 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()的键，并使用不需要键的绑定突变:

const { data, mutate } = useSWR(
[url, headers],
fetcherWithHeaders,
{ suspense: true }
);
// ... somewhere else in component
mutate();