T
TanStack•3y ago
unwilling-turquoise

Proper way to invalidate multiple queries?

I'm looking to setup an invalidation of two queries when the data changes. This is what I'm currently doing in my application and it works, but is there a way to combine this? 
    onSettled: () => {
      queryClient.invalidateQueries({
        queryKey: ['get-sent-follow-requests'],
      });

      queryClient.invalidateQueries({
        queryKey: ['get-follow-requests'],
      });
    },
    onSettled: () => {
      queryClient.invalidateQueries({
        queryKey: ['get-sent-follow-requests'],
      });

      queryClient.invalidateQueries({
        queryKey: ['get-follow-requests'],
      });
    },
2 Replies
adverse-sapphire
adverse-sapphire•3y ago
invalidateQueries accepts a filter as param https://tanstack.com/query/v4/docs/react/guides/filters, so you can use the predicate field to do it in one call. Alternatively, you could reorganize your keys: ['follow-requests', 'all'] and ['follow-requests', 'sent']. Then you could just call: 
queryClient.invalidateQueries({
    queryKey: ['follow-requests'],
});
queryClient.invalidateQueries({
    queryKey: ['follow-requests'],
});
That would match both.
Overview | TanStack Query Docs
TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze. Motivation
unwilling-turquoise
unwilling-turquoiseOP•3y ago
Sorry for the late reply, super useful refactor. I will do that, thank you!

Did you find this page helpful?