Check if queries with common query key are fetching
Hi all!
I have a paginated query, similiar as described here in the docs https://tanstack.com/query/v5/docs/framework/react/guides/paginated-queries.
In my case I also have an order criteria in my queryKey (
queryKey: ['projects', orderBy, page]). Is there any way to check and re-render if at least one query for a specific page is currently fetching? Like is "projects ordered by date" currenty (re-)fetching, no matter which page? Somehow similiar to useMutationState, but for queries?
Thanks!8 Replies
xenial-black•11mo ago
quick question, why
['projects', orderBy, page] and not ['projects', page, { orderBy }] where that entire object would represent any kind of filters applied to the query?fascinating-indigoOP•11mo ago
Was just a (simplified) example. Do you think I could solve my problem when using an object for
orderBy ?xenial-black•11mo ago
Let me get home, I asked out of curiosity as that does not seem like a very flexible approach, will explain
I will also look on docs for your issue
xenial-black•11mo ago
@Nils Hartmann https://tanstack.com/query/latest/docs/framework/react/reference/useIsFetching
this accepts a
filters parameteruseIsFetching | TanStack Query React Docs
useIsFetching is an optional hook that returns the number of the queries that your application is loading or fetching in the background (useful for app-wide loading indicators). tsx import { useIsFetc...
xenial-black•11mo ago
as to the key, if you ever want to invalidate a specific page for any
orderBy, you cannotxenial-black•11mo ago
if you havent already, id recommend you to check out https://tkdodo.eu/blog/effective-react-query-keys
Effective React Query Keys
Learn how to structure React Query Keys effectively as your App grows
xenial-black•11mo ago
tldr, recommandation is
which lets you:
- invalidate all todo related queries using
['todos'];
- invalidate all todos lists using ['todos', 'list'];
- invalidate all single todo queries ['todos', 'detail'];
- invalidate a single todo using ['todos', 'detail', id].fascinating-indigoOP•11mo ago
Thanks a lot for the pointer to the useIsFetchingHook.
Regarding the query key, as mentioned my example was a simple modified key from the docs. My real keys look different. Anyway: as always the blog is a great resource!