Pagination with useSWR: How to mutate/trigger a revalidation with dynamic keys?

[jordymeow]

Hi,

I have two components. With the first one, I can upload files. In the second one, I list them in a table using paging.

In my second component, I am using useSWR this way:

useSWR(['/api/uploads', itemsPerPage, (page - 1) * itemsPerPage], (url, limit, skip) => 
      fetch(url + `?limit=${limit}&skip=${skip}`).then(res => res.json()));

There is nothing special about this I believe, and it works. However, how can I invalidate all the /api/uploads from my first component, so that the second component can refresh itself?

I really do not want to have a context between those components, or some kind of parent to both of them to hold the total values and invalidate by looping over all the pages.

Ideally, I would do this in the first component, and that would do it:
mutate('/api/uploads')
(it could be a regex also, but I am basically just looking for a solution around this idea)

Thanks for your help :)

[sergiodxa]

You can call mutate passing the exact same key, if you want to revalidate them all you can use cache.keys to search the key you want based on a regex and then revalidate them.

I have a tiny lib for this use case called swr-mutate-many (https://github.com/sergiodxa/swr-mutate-many).

[sergiodxa]

Hey! That’s a great idea, I was also having troubles when using an array, I didn’t thought I could receive and array and serialize it before searching.

[skotchpine]

Thanks @jordymeow !

TLDR: Use cache.keys()

import {mutate, cache} from 'swr'

...

const pattern = new RegExp(`/api/examples/\d+`)
cache.keys()
  .filter(key => pattern.test(key))
  .forEach((key) => mutate(key))

[frankalbenesius]

hey this really helped me! it would be great if there was something in the docs about this.

my use case is very similar. occasionally our app performs an asynchronous "sync" action that in effect invalidates like a dozen or so other endpoints that should immediately refetch (and some use pagination query params in their keys). I think we'll be able to use cache.keys for this case, but it was really hard to find a solution.

thank you for sharing!

[bobbyshaw]

Thanks, this solved my problem. I'm posting to advertise that there is now an example in the official docs too https://swr.vercel.app/docs/advanced/cache#mutate-multiple-keys-from-regex

[scottopolis]

Thanks, just a note the import needs to be updated:

const { cache, mutate } = useSWRConfig()

see https://swr.vercel.app/docs/advanced/cache

[koba04]

SWR v2 has the official way to support this case as Mutate Multiple Items!
https://swr.vercel.app/docs/mutation#mutate-multiple-items