Not clear how to use QueriesObserver

[cgvalayev]

I would like to be able to use QueriesObserver to observe many useQuery / useMutation in various components. When I tried implementing from example:

 const observer = new QueriesObserver(queryClient, [
   { queryKey: ['post', 1], queryFn: fetchPost },
   { queryKey: ['post', 2], queryFn: fetchPost },
 ])
 
 const unsubscribe = observer.subscribe(result => {
   console.log(result)
   unsubscribe()
 })

I did not understand why i need to supply queryFn: fetchPost, if im adding above snippet in lets say root component in useEffect then why cant it just look at queryKey?

Ref: https://react-query.tanstack.com/reference/QueriesObserver

[TkDodo]

An observer is the instance that is created when you call useQuery or useQueries - it manages the subscription and triggers filling the cache if you don't have a cache entry yet, which is why you need the queryFn.

What you are looking for is probably a direct subscription to the QueryCache, but this will fire for all queries, so you'd to match on the query for yourself.

For example, this is what useIsFetching is also doing, and you can likely find inspiration there:

https://github.com/tannerlinsley/react-query/blob/f348673dce003e82a818cc3cc093dea79b0177ea/src/react/useIsFetching.ts#L34-L43

[cgvalayev]

Thank you, I will give this a try!

[billsbooth]

Came here with a similar question, "QueriesObserver" make it seem like a pub/sub on query key states. Wish it was — I just want to hide my splash screen when one of the queries returns data.