Server Actions: APIs for sophisticated cache revalidation strategies

[psteinroe]

Hi,

the 13.4 release blogpost introduced a revalidateTag API, which allows resetting the cache for a given tag. I am hereby requesting an API, that returns all existing cache keys.

The motivation is quite simple: For sophisticated cache revalidation strategies, it is impossible to know what cache keys should be revalidated without actually knowing which exists. As an example, you might query all posts from a post table in one component, and the details of one post in another. The cache tags would then contain the post table, and, for the latter, the id of the post, e.g. ["post", "id=123"]. Or, ["post?id=123"]. When I update one post within a server action, I can only revalidate both queries with revalidateTag('post'). For larger apps, this leads to a lot of unnecessary revalidation.

To enable more sophisticated revalidation strategies, we would need at least one of:

• getAllCachedQueries() to return all active cached queries with their tags (returns an array of arrays, with one array of tags for each query)
• getAllCacheTags() to return all active cache tags

To further improve the DX:

• revalidateTags(["post"]) to revalidate a set of tags.
• revalidateQueries(["post", "id=123"]) to revalidate all queries that have all of the passed cache tags. In this example, only the detail query would be revalidated.

Best
Philipp

[Sh031224]

Actually, having to call revalidateTag multiple times is very inconvenient.
I wonder if there are any updates planned for this feature.

[ChrisB1123]

I think I have the same problem as this, but I'm not sure I understand your solution.

If I fetch all posts on page load, at the moment the full set of posts would be stored to the cache.

If someone then edits post.id=1 there's currently no way to only revalidate the cache for this id, as far as I can tell.

We'd need to purge and refetch the entire posts object.

For me, I'm hoping to save edits every time a user finishes editing an atom of data (e.g. post.name, post.description etc.), so this would lead to lots of calls with potentially large payloads, as well as potentially unnecessary rerendering of other components (although not 100% how revalidating the cache impacts rendering).

For me, the solution seems to either be

1. Allow us to treat the cache like a store and mutate it based on id
2. Provide some sort of cache middleware, which lets us mutate a fetch response before it's cached, so we could create different cache objects/tags for each post, rather than have them all in a single blob.

Since you asked this back in May though, did you ever find anything else out that helped solve your use case?

[psteinroe]

hey @ChrisB1123,

yes, the problem is the same. And my proposed solution is pretty much your 1). I am thinking based on the design of swr and react-query. so something like mutate('key', currentData => newData)

But no, I did not find a solution for this yet. Still waiting for a better api.

[ChrisB1123]

Ah yea I get it, I thought key would relate to posts, but would make sense if the key could be a more granular piece of data.

A parallel question; how do you have your data fetching set up for this scenario?

I'm struggling to perform a global fetch and then prop drill, because I can't pass props from layout to server, and the way you pass {children} through layouts makes it tricky to add the global data as a prop.

It feels like the best way is going to be set up an API route which fetches all relevant posts, and then for each post specific component, call something like

function getPost(id) {
    const allPosts = fetchAllPosts()
    return allPosts.filter((post) => post.id == id)
}

This seems ugly/hacky though, relying on the memoisation/caching of the fetch. Pushing a rerender also seems like it'll be an issue, if components need to interact with each other.

[gpxl-dev]

If someone then edits post.id=1 there's currently no way to only revalidate the cache for this id, as far as I can tell.

I'm looking for an answer for this, too.

Currently I have this:

"use server"
export const getPostsForUser = async (userId: number) => {
  return await unsable_cache(_getPostsForUser, ["posts"], {
    revalidate: 60 * 1000,
    tags: [`posts-${userId}`],
  })(userId);
};

It seems hacky and I'm not even 100% sure if it works! 😅