Subscribe/listen to api's that is currently fetching data

[sriadimanav]

Is there a way to subscribe to fetching or loading event for api's, similar to way we do for error and success callbacks
example:
queryClient.getQueryCache().config.onSuccess = () => {};
queryClient.getQueryCache().config.onError = () => {};

can something like this be done for loading/fetching too ?

[TkDodo]

I don't fully understand the question. What are you trying to achieve with that exactly ?

[adityarupifi]

so every time any query or mutation in my project is in loading/fetching state
I want to push an event on analytics tools
I am currently doing it for onSuccess and onError events using above provided methods
the events name contains query/mutation key + success/error string

I see that there are useIsFetching and useIsMutating hooks, but they only return number of api's
not the key name
@TkDodo

[TkDodo]

const unsubscribe = queryClient.getQueryCache().subscribe(event => {
  if (event.type === 'updated' && event.action.type === 'fetch') {
    // do your stuff here with event.query
  }
})

[adityarupifi]

have tested by adding console.log under subscribe function "if" condition
it is getting logged multiple times
expectation is that, it should only be logged equivalent to number of api calls

[TkDodo]

Where are you calling subscribe?

[adityarupifi]

queryClient.getQueryCache().subscribe(event => {
  if (event.type === 'updated' && event.action.type === 'fetch') {
    console.log("fetching query")
  }
})

queryClient.getMutationCache().subscribe(event => {
  if (event.type === 'updated' && event.action.type === 'loading') {
    console.log("loading mutation")
  }
})

added this is code in component, under QueryClientProvider and Context providers
console is printed more than expected times
anything wrong here ?

[TkDodo]

well, it's a side-effect, so it has to go into a useEffect or a useSyncExternalStore, otherwise, you subscribe again in every render. And you have to handle unsubscription - an unsubscribe function is returned from subscribe.

Or, you trigger the subscription outside of react.