useIsFetching for multiple queryKeys

[nguyenyou]

Say I have two useQuery hooks

const {data: videos} = useQuery('videos', getVideos)
const {data: suggestions} = useQuery('suggestions', getSuggestions)

Instead of combining their isLoading manually, for example:

const {data: videos, isLoading: isLoadingVideos} = useQuery('videos', getVideos)
const {data: suggestions, isLoading: isLoadingSuggestions} = useQuery('suggestions', getSuggestions)

const isLoading = isLoadingVideos || isLoadingSuggestions

Can we do this?

const isFetching = useIsFetching(['videos', 'suggestions'])

[TkDodo]

you can use the predicate option:

useIsFetching({ predicate: query => ['videos', 'suggestions'].includes(query.key) })

but keep in mind that there is no fuzzy matching when doing it like that. Alternatively, you can call useIsFetching twice and sum up the results.

[nguyenyou]

Hmm..so if I have 5 queries, I have to call useIsFetching 5 times and sum up the results 🤔 probably what I'm trying to get rid of. Using predicate looks really close to what I'm trying to achieve. Thank you.