How to revalidate multiple keys with useSWRMutation?

[utg1-tdawg]

I am trying to revalidate multiple keys upon trigger by passing a filter function as key to useSWRMutation as suggested in the docs. But I am getting an error.

Here is my code:

import useSWR from "swr";
import useSWRMutation from "swr/mutation";

export default function Jokes() {
  const firstJokeQuery = useSWR("first-joke", getJoke);
  const secondJokeQuery = useSWR("second-joke", getJoke);

  const mutation = useSWRMutation(
    (key) => ["first-joke", "second-joke"].includes(key),
    () => null
  );

  return (
    <div>
      <div>
        <h2>First joke</h2>
        <p>{firstJokeQuery.data?.joke}</p>
      </div>
      <div>
        <h2>Second joke</h2>
        <p>{secondJokeQuery.data?.joke}</p>
      </div>

      <button onClick={() => mutation.trigger()}>Get new jokes</button>
    </div>
  );
}

async function getJoke() {
  return fetch("https://v2.jokeapi.dev/joke/Any?type=single").then((res) =>
    res.json()
  );
}

And here is the error message that I am getting:

Unhandled Runtime Error
Error: Can’t trigger the mutation: missing key.

What is the correct way to revalidate multiple keys? I have also tried passing an array ["first-joke", "second-joke"] as key to useSWRMutation but it doesn't work too.

[koba04]

@utg1-tdawg
The first argument of useSWRMutation doesn't accept a filter function, so you have to use mutate instead of useSWRMutation.

https://swr.vercel.app/docs/mutation#mutate-multiple-items

The documentation of useSWRMutation doesn't describe it, so I'll add it later. Thank you!

[utg1-tdawg]

Thanks! Any plans to allow the same filter function for useSWRMutation? Seems more consistent

[TrevorBurnham]

Just stumbled on to this after hitting the same error described at #2457. I'd note that the docs say that the key param to useSWRMutation is "same as mutate's key", which allows a filter function, and the TypeScript types also allow the argument to be a function.

It would be handy for a filter function to be accepted rather than requiring a separate mutate call. Though, I realize that this doesn't jibe well with the same key being passed as a param to the fetcher. 🤔 One solution would be to keep the key arg as a string and add an extraKey param to the options object that's allowed to be a function.

[gweiermann]

Hey there, just a reminder that the docs are still lying with "same as mutate's key"