Imposing no cache for a SWR call

[at-webdev]

Hi, I assume when a SWR call is made with same key it uses data from cache.
Is it possible to impose do not cache for a SWR call similar to Apollo fetchPolicy : no-cache
Eg : const {data}= useDemoSWR(request);

[sergiodxa]

It's not possible, the idea of SWR (as the name implies) is to first return you stale data and the revalidate it against the API to get the new data.

However, you can pass an array as key, if your fetch receives the URL as first argument and does nothing with the second argument you could do

const random = React.useRef(Date.now())
const { data } = useSWR([url, random], fetcher)

That will create a new random per mount (not per render) creating effectively a new key in the cache. But I don't recommend you to avoid the cache.

[at-webdev]

Thanks @sergiodxa , it makes sense!

[nandorojo]

I can think of one use-case where having a no-cache policy is relevant: if you want to pull some data from the backend, mutate it, and then send it back to the db.

Example: you're editing an entire user profile. It's important that the data you're editing is as up-to-date as possible. You pull in the data using this random key, update it, and send it back.

[nikita-starostin]

one more case, we have complicated flow:

1. fetch iframe data by id from backend
2. post that data to iframe

the issue, that iframe data also contains some keys, that should be refreshed every time user want to see content of iframe, so in that case for same GET by id request, we always receive new data, so it doesn't make sense to cache

[Mohamed3on]

fwiw this doesn't with the latest release v2.2.4

[edwjusti]

I've been testing a proof-of-concept stream based (p)react renderer with suspense support and I would be interested in providing no cache or forcing invalidation with the stateless environment. Since most server renderers don't support state it would be interesting to provide a custom cache mechanism for the server where state is not available. This would be essential once the offical react-dom server renderer supports suspense.

[ephys]

if someone needs a workaround for this in the future, mine is to clear the cache before calling useSWR:

import useSWR, { cache, ConfigInterface, fetcherFn, keyInterface, responseInterface } from 'swr';
import { useRef } from 'react';

export type SwrOptions<Data, E> = ConfigInterface<Data, E> & {
  discardStale?: boolean,
};

export function useSwrWrapper<Data = any, Error = any>(key: keyInterface, fn?: fetcherFn<Data>, config?: SwrOptions<Data, Error>): responseInterface<Data, Error> {
  const discardedStale = useRef(false);
  if (key && config?.discardStale && !discardedStale.current) {
    discardedStale.current = true;
    cache.delete(key);
  }

  return useSWR(key, fn, config);
}

IMO, it would be much better to be able to tell this specific hook not to return cache data for the first render, or to know whether the data is stale, but this works.

[shuding]

Please check if the new cache provider API solves the problem: https://swr.vercel.app/docs/advanced/cache, thanks! The undocumented cache API will be deprecated in 1.0.

[nandorojo]

I prefer the key random number solution from above. You might want the cache to remain intact, but to just be able to force a refresh with no fallback on a given screen. Both solutions have a use-case, though.

[ephys]

@nandorojo I think you could use a mix of both solutions: use this solution and use two different (not random) keys: one for general use and one specifically for this page.
This way you won't impact the cache entry used by the rest of the app, but you won't fill the cache with a new single-use entry every time you visit that page either.

[nandorojo]

Oh that's an interesting point.

Would the solution for removing unused caches be to clear the cache on unmount?

const random = React.useRef(Date.now())
const key = [url, random]
const { data } = useSWR(key, fetcher)

useEffect(() => {
  return () => {
    cache.delete(key)
  }
}, [])

[ephys]

I think so, I like your solution :)

[yoshiko-pg]

+1

In react-query, this can be achieved with cacheTime: 0 option.
I hope swr can find a way to do this as well.

[shuding]

We will be tracking this feature in #1705 👍

[yoshiko-pg]

Thanks! I'm looking forward to it!

[benevbright]

the workaround with random key using ref is not working with suspense. Because it remounts the component.

[benevbright]

new PR(arguable suggestion) for this issue with suspense mode: #2800

[benevbright]

another attempt: #2318 (comment)

[OwenMelbz]

We're also facing this issue, and was looking to go down the ref route.

However we're using React Native and caching the data via our our driver (as per docs), but my concern is if we're adding a new item to local storage every time the component mounts, does that mean we're going to end up with thousands of entries in local storage over time? Or will SWR automatically clear out old or expired items?

[HEAT-hue]

I found a work around by using spaces.

// First endpoint
const { data } = useSWR([firstUrl, ""], fetcher)

// Second endpoint
const { data } = useSWR([secondUrl, " "], fetcher)