Clearing cache of all data where the key array starts with specific elements

[adamsvystun]

The problem I am trying to solve:
If you have some sort of data table with sorting, filtering, pagination functionality implemented through the backend. Using SWR library you would create multiple diferent fetch requests. For example like so:

const { data } = useSWR(['/api/todos', page])
const { data } = useSWR(['/api/todos', page, sortBy, sortOrder])
const { data } = useSWR(['/api/todos', page, sortBy, sortOrder, filters])

All these requests would create separate keys in the cache. The question is when I update the data table (e.g. add a todo) how can I clear all this cache (everything asociated with /api/todos request) so as to force refetching?

Potential solution:
The only way I can think of is to get the cache object directly, iterate over the cache keys manually, check if they start with /api/todos and clear if they do. Is there any other (simpler) way I am not seeing, or is this the way to go?

[sergiodxa]

I built swr-mutate-many for this use-case, what the lib does is:

import { cache } from "swr";
cache.keys().filter(key => key.startsWith(cache.serializeKey(["/api/todos"]).forEach(key => cache.delete(key))

Something like this

The serializeKey is required because when using an array as key the final string used to store the data is something like arg@"/api/todos" so you need that arg@ part at the beginning.

[adamsvystun]

That's exactly it. Thanks!

[ricardo-rp]

There should definitely be an easy way to do this in the base package. Thank you!