Any global event that is fired before a query/mutation starts executing?

[cloudcompute]

If using react-query, is there any way to check isLoading at a global level.. just like react-query has provided us with the global onError callback? I guess there is no such event handler that is fired just before the query/mutation execution is about to take place, named something like onBefore. If not there, could you pl. add it in next release?

I know that React.Suspense can be used but it is kinda experimental and React does not recommend to use it. How about your opinion, can we use Suspense in a production app where there will be about 100 queries and mutations resulting in a lot of boilerplate if Loading is handled locally?

[TkDodo]

what would be your use-case please?

For mutations, there is a global onMutate callback.

For queries, we have no "before" callback. I think you can right now use a global queryFn - because you can do whatever you want in the queryFn before you make the actual request

[cloudcompute]

The use case is as follows:
Consider that there are around 100 queries and mutations in an enterprise application. If we check isLoading at a local level, it will result in a lot of boilerplate. Good if there is some event at a global level where we can invoke the Loading component for every query and mutation.

As you said, there is a global onMutate callback, can we use it to check isLoading for "all" mutations that exist in our app... and place isLoading locally?

Thanks

[TkDodo]

If it's about showing a global loading spinner, then callbacks are not the right thing, as they are for side effects.

What you are looking for is a way to show a global loading spinner, and there are two options for queries:

1. suspense, as you already mentioned. It's tailor made for that case.
2. the useIsFetching hook. While primarily made for background loading indicators (since this will fire for all fetches, not just initial loading), it can be tweaked to only notify on initial loading by passing the predicate filter function and only include queries where data is undefined or the state is loading.

[cloudcompute]

Thanks

But from where to invoke the useIsFetching and useIsMutating hook?

I wrote this code:

import { useIsFetching, useIsMutating } from "react-query";

export function useNetworkRequestInProgress() {
  const isFetching = useIsFetching();
  const isMutating = useIsMutating();

  // These (useIsFetching and useIsMutating) hooks are useful for app-wide loading indicators.
  const isNetworkRequestInProgress = Boolean(isFetching) || Boolean(isMutating);
  return isNetworkRequestInProgress;
}

{ useNetworkRequestInProgress && }

But where to place this piece of code, I cannot figure it out. By placing it at the top of the React component tree i,e, where we put , will it work?

I am avoid Suspense for single reason, React says it is still experimental. But I have seen many people use it.

[TkDodo]

I am avoid Suspense for single reason, React says it is still experimental. But I have seen many people use it.

It's experimental if you are using a suspense cache and use "real" suspense for data fetching. What's really happening here is that we throw a promise during rendering, and the suspense boundary picks it up and shows a fallback until the promise resolves. This is similar to what React.lazy is doing with suspense for code splitting.

But from where to invoke the useIsFetching and useIsMutating hook?

this depends on the granularity you want. If you want your whole app to unmount whenever a query is "loading", then put it at the top of your app. If not, then do it more granular. This is the same question as where to put suspense boundaries ... it depends on your use-case. A poor man's suspense implementation with useIsFetching would be something like:

const MySuspense = ({ children, fallback, queryKey }) => {
  const isFetching = useIsFetching({ queryKey, predicate: query => query.state.data !== undefined })

  return isFetching > 0 ? fallback : children
}

usage:

<MySuspense fallback="Loading..." queryKey="todos">
  <TodoList />
</MySuspense>