How to revalidate multiple keys with useSWRMutation? #2456
-
I am trying to revalidate multiple keys upon 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:
What is the correct way to revalidate multiple keys? I have also tried passing an array |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
@utg1-tdawg The documentation of |
Beta Was this translation helpful? Give feedback.
@utg1-tdawg
The first argument of
useSWRMutation
doesn't accept a filter function, so you have to usemutate
instead ofuseSWRMutation
.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!