Add isObserved to UseQueryResult

[madisonbullard]

My use case:

• I have some global "Loading" UI that uses useIsFetching/useIsMutating to determine when to show/hide
• My app leverages queryClient.prefetchQuery(), but I don't want the global loading UI to be displayed for prefetches

Ideal solution:

• Add isObserved: boolean to UseQueryResult so I can prevent loading UI from showing for queries with no observer:

useIsFetching({
  predicate: (query) => query.state.isObserved
})

Current hacky solution:

useIsFetching({
  // @ts-ignore because property 'observers' is private
  predicate: (query) => !!query.observers.length
})

If there is another way to accomplish this, please let me know!

Thanks so much for an amazing library 🎉

[TkDodo]

the predicate function does not receive a UseQueryResult, but a Query, which makes a difference here.

on a query, there is a public method getObserversCount:

https://github.com/tannerlinsley/react-query/blob/e6da990703482cff8ea99f5a254975cb57463ed5/src/core/query.ts#L347-L349

which is also what the devtools are using to determine if a query is active or inactive. So this code should compile fine:

useIsFetching({
  predicate: (query) => query.getObserversCount() > 0
})

[madisonbullard]

@TkDodo Amazing! Figured there must be something available I was missing. Thanks so much!