queryClient.invalidateQueries works with only one dependency

[LeonardoTrapani]

Hello! I'm using react query with react native. I was trying to invalidate some queries, but it didn't work. After some time I tried to invalidate only one of them and it worked. Is this normal behaviour? And if so why is this called invalidateQeries and not invalidateQuery?

QUERIES:

export const useGetToken = () => useQuery<string | null>(['token'], getToken);

export const useIsTokenValid = () => {
  return useQuery<boolean>(['isTokenValid'], validateToken);
};

export const useIsWeekCreated = () => {
  return useQuery<boolean>(['isWeekCreated'], getIsWeekCreated);
};

BOFORE (not working):

  const logoutMutation = useMutation(
    () => {
      return logout();
    },
    {
      onSuccess: async () => {
        queryClient.invalidateQueries(['isTokenValid, token, isWeekCreated,']);
      },
    }
  );

AFTER (working):

  const logoutMutation = useMutation(
    () => {
      return logout();
    },
    {
      onSuccess: async () => {
        queryClient.invalidateQueries(['isTokenValid']);
        queryClient.invalidateQueries(['token']);
        queryClient.invalidateQueries(['isWeekCreated']);
      },
    }
  );

[TkDodo]

simply put: invalidateQueries doesn't work like this. You have to pass one array in that might match multiple queries. For example, if you have 2 queries that are structure like:

['token']
['token', 'isTokenValid']

you can call queryClient.invalidateQueries(['token'] and it will match both of them. For anything more advanced, you'd need to pass a predicate function.

See also: https://tkdodo.eu/blog/effective-react-query-keys

[LeonardoTrapani]

Got it, it's just a bit confusing, and this is not fully explained in the docs

[TkDodo]

Feel free to PR to the docs if you think they can be improved