React query invalidateQueries partial match not working

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.

If you see the last example in the invalidateQueries docs, it provides an option for maximum granularity

If you find yourself wanting even more granularity, you can pass a predicate function to the invalidateQueries method. This function will receive each Query instance from the query cache and allow you to return true or false for whether you want to invalidate that query:

So, for your scenario the following should work

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

This is a matter of how you are structuring the queryKey array. The first constant value of your queryKey array is a whole string, based on what you provided the partial matching won't work if you try to invalidate the queries based on just a part of that string. For this to work, you'd need to structure the queryKey array like so:

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

Now the invalidation should work as expected because it's matching all queries that start with "person" in their query key:

queryClient.invalidateQueries(["person"]);

Reference of this on the docs