Syntax for checking multiple queries via isFetching()

[Jurek-Raben]

I am not sure anymore, if the following example is the correct syntax for checking multiple queries for the fetching state:

const isFetching = useIsFetching({
  queries: [
    {
      queryKey: [key1],
    },
    {
      queryKey: [key2],
    },
  ],
});

Would this work?

It seems to set isFetching to true even while other queries with other keys are fetched... Am I doing something wrong, or is this a bug?

[TkDodo]

Would this work?

no. please have a look at the docs and the typescript types to see what you can pass to useIsFetching. Hint: it's an object of type QueryFilters: https://tanstack.com/query/v4/docs/react/guides/filters

[Jurek-Raben]

Don't understand. Can you please give an example, how to address multiple queries at once, with different keys? Do you mean
QueryFilters: [{querykey...}{querykey...}] ?
The doc about QueryFilters does not read too comprehensible here... It seems not to be able to target multiple different keys. Then the plural in the naming "QueryFilters" seems to be confusing...

[TkDodo]

It seems not to be able to target multiple different keys. Then the plural in the naming "QueryFilters" seems to be confusing...

There are examples, like:

// Remove all inactive queries that begin with posts in the key
queryClient.removeQueries({ queryKey: ['posts'], type: 'inactive' })

it can target multiple keys by specifying one queryKey (['posts']) and having it target multiple queries that start with that key, like:

['posts', 'list']
['posts', 'detail', 1]
['posts', 'detail', 2]

etc. I have written about this a lot: https://tkdodo.eu/blog/effective-react-query-keys

also, keys should form a structure, a hierarchy. With that, you can mostly use that syntax to target multiple keys. If you have multiple unrelated keys and need to invalidate them, there are also tons of options:

• invalidate everything with queryClient.invalidateQueries()
• use the predicate filter and match whatever you want. From the docs:

predicate?: (query: Query) => boolean
This predicate function will be used as a final filter on all matching queries. If no other filters are specified, this function will be evaluated against every query in the cache.

• structure your QueryKeys to be an array with one entry that contains an object. Again, I've written about that before in https://tkdodo.eu/blog/leveraging-the-query-function-context (see the example fuzzy-matching-with-object-keys)

[Jurek-Raben]

Hi, yes thanks, I did read that and also understood. I didn't question the manual in general, but the specific part about Query Filters. The question simply was, can I address multiple, completely different query keys. You answered "yes" in a maybe cumbersome way.
Didn't want to read a dissertation, just want to use reactquery, which is really cool!

So I conclude, this would work with the predicate function. Can't find an example though. Query, what type is it, and why I can't click it. BTW. we do not use Typescript sadly, but I consider installing that eslint plugin.