new feature for stale time

[lxjwlt]

SWR would't send requests of same key anymore but return the cache of it within stale time

when stale timer expires, SWR would resend request of current page on mounted or when we mutate it manually

[SunStupic]

How is it going with this feature?

[SunStupic]

Don't be hard on yourself, just use react-query.

[AhmedBaset]

Did it 5 months ago
The best decision I've ever made

[n3ih7]

Still look forward to this one.

[mikelehen]

I'm surprised to see that there's (apparently?) no way to disable caching. I need to do this for testing / illustrative purposes. In particular I'm trying to simulate slow network fetches and make sure my UI components have appropriate loading states, etc. It's easy for me to simulate the slow network fetch, but useSWR is defeating that after the first fetch by serving cached results.

Is there any option other than to manually remove cache entries as illustrated in #456 (comment) ?

[AielloChan]

For now append t=${Date.now()} to request url will help to disable 304 cache 🤷

const url = `https://sample.com/greet?t=${Date.now()}`

[fhyfhyfhy]

This is my method, I don't know if it can help you.

const disableCache = (useSWRNext) => {
  return (key, fetcher, config) => {
    const swr = useSWRNext(key, fetcher, config);
    const { data, isValidating } = swr;
    return Object.assign({}, swr, {
      data: isValidating ? undefined : data,
    });
  };
};

export default (params) =>
  useSWR(URL, fetcher, {
    focusThrottleInterval: 0,
    use: [disableCache],
  });

[mikelehen]

@fhyfhyfhy That looks pretty clever! I will give it a shot, thanks.

[vaynevayne]

You never supported it?

[benevbright]

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

[KyleRicardo]

I'm sorry, but 2 years passed, no progress on this feature request?

I wonder if I can set cacheTime just like React-Query.

It's VERY Useful.

[AhmedBaset]

Any updates?

[AhmedBaset]

I found dedupingInterval useful for my use case
#1699 (comment)

[benevbright]

const noCacheUseMiddleware: Middleware = (useSWRNext) => {
  return (key, fetcher, config) => {
    const swr = useSWRNext(key, fetcher, config);
    if (swr.isValidating) {
      // force activate <Suspense>
      throw new Promise((resolve) => {
        setTimeout(() => {
          resolve("**data not true"); <--- whatever, it doesn't affect anything.
        }, 5000); <--- this delay doesn't affect at all
      });
      // or just - `throw { status: "pending", then: () => undefined };`
    }
    return swr;
  };
};

I'm trying to find another way and the example above is for suspense mode. It's sort of working (when first mount is done with the cache -> it activates Suspense)

But there is one thing I can't figure it out and needs help for understanding. Here I throw a promise which activates Suspense. But what actually resolves Suspense is fetcher's promise. This is very hard to understand and I'm wondering there is something I'm missing. But I don't know what makes this behaviour. Is it React or SWR? But from my testing with the code above, the promise that starts Suspense activated and the promise that stops Suspense are different. (on "revalidate after mount", SWR fetcher doesn't throw this promise. That's why I'm confused. Because it's clearly doing a role to STOP Suspense)

@shuding If you give me some insight, it would be great.

[benevbright]

ok, I got one thing. This promise also can actually stop Suspense if it' resolved earlier than the fetcher. But I didn't see it happening because swr.isValidating is still true so it threw another promise.

still the second question left. When it's revalidating after mounted, the fetcher is not thrown as promise, but it still can stop Suspense. Maybe what it does it not "stop" but re-render, and on that render, swr.isValidating is false and not throwing promise, which stops Suspense.

[benevbright]

ok folks. I'm sharing my workaround.

Replace Suspense to NoCacheSuspense.

[benevbright]

final solution

import { PropsWithChildren, Suspense, useRef } from "react";

import {
  Middleware,
  SWRConfig,
  Cache,
  useSWRConfig,
  unstable_serialize,
  SWRConfiguration,
} from "swr";

// Along with normal GET request SWR,
// `useSWRMutation` is also coming into the middleware, which we need to exclude its target key (e.g project list key)
const isUseMutation = (config: SWRConfiguration) => {
  // It's hacky way to check if this SWR is `useSWRMutation`.
  return (config.use ?? []).some(
    (middleWare) => middleWare.name === "mutation",
  );
};

type NoCacheControl = {
  hasDeletedCacheOnceMap: Record<string, boolean>;
  allCacheInFirstDepthDeletedOnce: boolean;
};

const noCacheOnMountMiddleware =
  (cache: Cache, noCacheControl: NoCacheControl): Middleware =>
  (useSWRNext) => {
    return (key, fetcher, config) => {
      const { allCacheInFirstDepthDeletedOnce, hasDeletedCacheOnceMap } =
        noCacheControl;
      const serializedKey = unstable_serialize(key);

      if (
        !allCacheInFirstDepthDeletedOnce &&
        !isUseMutation(config) &&
        !hasDeletedCacheOnceMap[serializedKey]
      ) {
        cache.delete(unstable_serialize(key));
        hasDeletedCacheOnceMap[serializedKey] = true;
      }

      const swr = useSWRNext(key, fetcher, config);

      if (!allCacheInFirstDepthDeletedOnce) {
        // the fact that it reached to here means all requests with suspense mode under first <Suspense /> has been resolved.
        // we mark it here to stop the feature for the requests under nested <Suspense /> (e.g ProjectNameContainer)
        noCacheControl.allCacheInFirstDepthDeletedOnce = true;
      }

      return swr;
    };
  };

/**
 * Prevent SWR from mounting component with cache data.
 * It's for all "edit" forms because they need to set prefilled values with latest data on mount.
 */
export const NoCacheFormSuspense = ({
  fallback,
  children,
}: PropsWithChildren<{
  fallback: React.ReactNode;
}>) => {
  const { cache } = useSWRConfig();
  const ref = useRef<NoCacheControl>({
    hasDeletedCacheOnceMap: {},
    allCacheInFirstDepthDeletedOnce: false,
  });

  return (
    <SWRConfig
      value={{
        use: [noCacheOnMountMiddleware(cache, ref.current)],
      }}
    >
      <Suspense fallback={fallback}>{children}</Suspense>
    </SWRConfig>
  );
};