React query invalidateQueries partial match not working

Question

I have a few useQuery() calls in my react component like this:

const {...} = useQuery(["person.getAll", ....
const {...} = useQuery(["person.getCounts", ....

Then later in a click event after some DELETE/POST request is finished I try to invalidate above queries:

queryClient.invalidateQueries("person");

But it does not trigger the re-fetch. I thought it's some state management issues from my part but then I tried invalidating a specific query like

queryClient.invalidateQueries("person.getAll");

and it works fine..

Is partial query key matching not working in react-query ?

Answer 1

React-Query invalidation works off based array prefixes, not string prefixes.

Your useQuery calls should look like this:

const {...} = useQuery(["person", "getAll", ....
const {...} = useQuery(["person", "getCounts", ....

And then you invalidateQueries call will work, with a slight change:

queryClient.invalidateQueries({
  queryKey: ["person"]
}); // invalidate all query keys which start with "person"

queryClient.invalidateQueries(["person"]); // this also works

Alternative, if you are locked into your current syntax, you can accomplish the same using a predicate:

queryClient.invalidateQueries({
  predicate: query =>
    query.queryKey[0].startsWith("person"),
})

But this breaks the React-Query convention.