unstable_createResource invalidation in react-cache/suspense

Question

How do I invalidate a resource created by react-cache?

I can fetch data from API:

const FooResource = createResource(id => fetch(`/foo/${id}`)); // return a promise, or async/await

// inside render...
const fooResponse = FooResource.read(id); // suspends if not in cache; renders if in cache
return <div> {fooResponse} </div>;

However, when I update the data on the backend I am unable to refetch the data on the frontend.

This is the only somehow official documentation that I was able to find: https://github.com/sw-yx/fresh-concurrent-react/blob/master/apis/react-cache.md

Is there some undocumented API that I can use? 🤔

Answer 1

In general — you can't, and this is why it's "unstable". Don't use it for anything except demos and tinkering. We'll likely replace the whole thing with a different API.

Answer 2

As of now react-cache uses LRU (least recently used) caching policy. By this policy, the least recently used entries are invalidated first.

The size of the cache can be set using function unstable_setGlobalCacheLimit.

I couldn't find a function for explicit cache invalidation in the project. I also think that it is good news, 'cause dealing with cache is generally a hassle. It seems like LRU is going to make it easier for most React users.

Manual cache control might find its way in the future versions of react-cache as more developers embrace the technology and discover new use cases that need a custom approach, but I doubt it's something one should consider for now.