Have a way to clear cache

[sergiodxa]

I'm writing tests for a component using useSWR, also with { suspense: true }, and if I render a component reading the same key (e.g. the same component with different keys) I'm getting the old cache in my second test.

Not sure if this will be addressed with #158, but having a way to tell SWR to clear the cache of a certain key would be awesome for this use case.

import { clearCache } from "swr";

clearCache(); // clear all cache
clearCache("/api/data"); // clear only a certain cache key

☝️ something like that.

What I have tried:

• mutate(key, null, false)
• mutate(key, {}, false)

Both doesn't work right since useSWR will still read that null or {} from the cache instead of triggering an immediate fetch and suspending the component.

I will try to create a CodeSandbox to replicate this soon.

[sergiodxa]

For testing purposes what I made to solve this is to ensure I'm always using different keys, since they are based on a prop, but still would be nice the be able to do:

import { clearCache } from "swr";
afterEach(() => clearCache);

And ensure all my tests have zero cached data.

[shuding]

What do you think about the idea of exporting the cache object directly?

[shuding]

Another thing I've been thinking is #92, which will only remove the inactive keys.
If we clear/change the cache of an active SWR hook, it might cause some unexpected behavior.

[sergiodxa]

So far I haven't needed, until now, direct access to the internal cache, with it I could have done what I needed creating the clearCache function myself.

I agree that cleaning the cache it's not something you should want in production, I only need it for testing purposes.

Does SWR listen to cache changes? Maybe this way if an active SWR hook is using a cleared key it could automatically trigger a new fetch as if it was new? 🤔 This way if you still have a rendered component using the cleared key it wouldn't break, just change to loading state as if it was a new key? Just thinking out loud.

[gabrieledarrigo]

Agree to expose a way to clear the cache, it's a common scenario.
For example, with a simple component that fetches data:

it('should fetch on mount', async () => {
  await act(async () => {
    <Foo id="1" />
  });

  expect(fetch).toHaveBeenCalledWith('1');
});

it('should show an error when fetch fails', async () => {
  (fetch as jest.Mock).mockRejectedValue(new Error('An error occured'));

  await act(async () => {
    mount(
      <Foo id="1" />
    );
  });

  expect(fetch).toHaveBeenCalledWith('1');
  // other assertions that the error message is rendered
});

The second expectation fails, 'cause SWR dedupes the requests, returning the first result from the cache.
The only way to test this behavior is to change the id propr, but it's not always feasible, depending on the test scenario.

[andreoav]

I'm having problems with SWR and jest tests. It fails when a test has a swr call that was used in a previous test.

1. Run a test that returns a list using SWR -> TEST PASS
2. Run a test (with the same key), but change the return to test a different scenario -> TEST FAILS (returns the cached result from the previous test).

[JulianG]

Awesome!

[andreoav]

@quietshu something is weird here. When testing, my second test stills renders with the result provided by a previous test.

I tried a cache.clear() in a beforeEach and before rendering the component within the test, both fails.

If I run each test at a time they pass.

[sergiodxa]

@andreoav check my answer here #231 (comment)

[ConsoleTVs]

@sergiodxa

I am using a similar idea on my SWR vue library. In fact, i find this statement wrong:

I agree that cleaning the cache it's not something you should want in production, I only need it for testing purposes.

I've written some applications where the cache TTL is about 1 minute. So, if I visit the dashboard and it fetches some data with a TTL 1 min, then logout and login with another user (with less than a minute apart) then that cache still shows the old user values and does not revalidate yet due TTL < 1 min.

The quickest solution is to delete all cached keys or the ones specified at logout, this ensures fresh data upon login.

This is the clear function I did: https://github.com/ConsoleTVs/vswr/blob/6a84e923d9db31784316b975f98db1f5eaea3140/src/swr.ts#L219

[sergiodxa]

@ConsoleTVs what i usually do is to reload the page in a logout so cache is cleared, also most users don't login, see data, logout and see new data in less than 1 minutes IMO.

However, with the current cache you can do it with cache.clear() if you don't reload on logout.

[ConsoleTVs]

Just keep in mind, that the (mobile) application we're building probably have a safe cache of Infinity, since we know exactly when we need to reload / mutate it via events, 1 min was just for testing :)

Nevertheless, is it possible with cache.clear() on react's SWR? How do you access the cache instance then?

[sergiodxa]

You can import the cache and clear it with:

import { cache } from "swr"
cache.clear()

This has been available since #231 was merged

[ConsoleTVs]

Is this actually documented on the docs page? Very interesting indeed

[sergiodxa]

It's not documented yet

[AlaaZorkane]

Ha! Been looking for this, can someone please document this, very important feature.

[plaa]

what i usually do is to reload the page in a logout so cache is cleared

@sergiodxa Page reload is not possible in a React Native app. 😀

I was surprised the documentation didn't cover this. I would have expected it to be at the bottom of the Mutation page which deals with cache updates anyway.

This also simplifies handling authentication, as you can just clear the cache every time authentication changes. In this case the fetcher method can obtain access tokens itself instead of passing them in the key every time (see #325 (comment)).

[andersnylund]

This seems to have been updated at some point, but couldn't find the exact commit or PR when.

I was able to create a new cache on each test with this:

import { SWRConfig } 'swr';

<SWRConfig value={{ provider: () => new Map() }}>
  {/* SWRConfig is given a new provider on each test so that it's caching is emptied between each test */}
  {children} {/* or the component you want to test that uses `useSWR` */}
</SWRConfig>

https://swr.vercel.app/docs/advanced/cache#reset-cache-between-test-cases

[maapteh]

But then you have to wrap new config per test, instead of just using one. I also used the cache.clear() undocumented feature and found out its gone now :( It was super helpful for tests

[tobslob]

You can import the cache and clear it with:

import { cache } from "swr"
cache.clear()

This has been available since #231 was merged

What version of swr is this?

[alexlomm-dormzi]

Doesn't seem like the cache is being exported any more as of v1.1.2. However @andersnylund's solution of providing the wrapper works great.

Also, for those of you who want use <SWRConfig /> with renderHook(...) the way to to that would be:

const wrapper = ({ children }) => <SWRConfig value={{ provider: () => new Map() }}>{children}</SWRConfig>

test('test something', () => {
  // provide a "clean" wrapper for `swr`
  const { result } = renderHook(useFetchWithSWR, { wrapper })

  // etc...
})

[JamieKudla]

@andersnylund method of using a wrapper with a cache provider is the way to do this as of 1.0.0 per the docs: https://swr.vercel.app/docs/advanced/cache#reset-cache-between-test-cases

[ConsoleTVs]

@JamieKudla they literally list a clear method at the end of thst page, is that not working?

[Ajido]

There is no function defined to delete all caches. Is the documentation wrong?
https://swr.vercel.app/docs/advanced/cache#reset-cache-between-test-cases

[soullivaneuh]

@andersnylund comment (#161 (comment)) looks to do the trick, same solution for Storybook using a decorator:

import React from 'react';
import { 
  DecoratorFn,
} from '@storybook/react';
import {
  SWRConfig,
} from 'swr'

export const StoryDecorator: DecoratorFn = (Story: any, {}) => {
  return (
    <SWRConfig value={{ provider: () => new Map() }}>
      <Story />
    </SWRConfig>
  );
};

export default null;

[clement-escolano]

@Ajido
Type definition of cache is not up to date but the code actually works. If you want to fix the type issue, you can override the Cache type by adding this:

import "swr/dist/types";

declare module "swr/dist/types" {
    export interface Cache {
        clear(): void;
    }
}

[bozdoz]

This is super awkward to implement. Would love a clear way to clear cache for all tests.

[huozhi]

Please checkout #1887 (comment) for the new cache clear approach introduced in v2 beta