Mutate based on one of keys array

[csenio]

Ran into a little edge case just now and was wondering if there was a solution for it:

I have a request that looks like this

const {data} = useSWR(['/api/some-route', someKey], fetcher)

Now when I call mutate('/api/some-route') it's nor revalidated.

Callingmutate(['/api/some-route', someKey]) does work but is not realistic for my use case as I don't have access to someKey. I also can't really use the bound mutate since I don't want to fetch that data if it hasn't already been fetched.

Is there any way to make mutate('/api/some-route') or something similar work in this case?

[csenio]

quick edit, even bound mutate doesn't work for this unless it comes from the same instance.

For some more details, this is for pagination, so I want to add the cursor behind /api/some-route, like /api/some-route?page=1. As an interim solution I'm just passing through the bound local mutate now, but I think the idea of revalidation based on a partial match could be useful for more than just this specific use case.

[botv]

I had the same problem for a while before remembering that mutate is one of the return values. This might or might not solve your issue, depending entirely on the reason you can't access someKey wherever you're trying to call mutate().

const { data, mutate } = useSWR(['/api/some-route', someKey], fetcher);

mutate()

With that being said, I agree, it would be awesome to be able to refresh data based on any of the keys passed to the array, from anywhere throughout an application. The behavior could possibly be modeled after Fastly's Surrogate Keys feature, which allows for purge caching based on any key in a list of keys passed in a header: https://docs.fastly.com/en/guides/getting-started-with-surrogate-keys

[egecavusoglu]

I think this is a pretty clean way to return mutator function in the custom query hook. Here is how I used it. Note that I'm using a wrapper around useSWR called useQuery

export function useTags() {
  const { data, error, mutate } = useQuery("api/tags");
  return {
    tags: data?.data,
    error,
    loading: !data && !error,
    mutator: mutate,
  };
}

[gmukul01]

@team are we thinking on this feature request ?

[shuding]

@gmukul01 yeah, we've added support for this in v1.0. We still recommend you to use the hook-returned mutate as @botv mentioned.

But if you still want to call it from somewhere else in the application, and you don't have access to some parts of the key, you can use this approach: Mutate Multiple Keys from RegEx.