Question 287466 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React query disable loading in certain ocasion?

I have a query like this:

const query = useMyCustomQuery({ ...someParams });

Which is called on component mount.

Then, in the return of the component I do something like:

{ query.isFetching && <LoadingOverlay /> }

which displays a loading component over it.

Now I need to add a refetchInterval to refetch every 30 seconds.
The problem is the loading will be shown while it’s refetching and I need for that not to happen, because I want to user to be able to see the list of items even while is refetching.

I know I can change the isFetching to isLoading to show it only on the first load, but I have other user triggered actions that make a refetch and I want those to still have the loading indicator.

Is there any way to differentiate between the two?

Tags:

2

Answers


  1. 0

    useQuery() has an option called keepPreviousData. what this option do is if you have data from the server it will show them until you get the newest data from the server. Reference to https://tanstack.com/query/v4/docs/react/reference/useQuery

    for exmaple:

    useQuery({
    queryKey: ["test"],
    queryFn: your_fetch_request,
    keepPreviousData
});
    Login or Signup to reply.
  2. 0

    You could change to isLoading but in addition, on the user actions that you want to force the loading screen on, you could call queryClient.resetQueries({ queryKey }) in order to set it back to its initial state, followed by a refetch — in the event handler. Take care since resetQueries is async.

    I believe this would also force the isLoading back to true.

    By doing this you are basically removing the state that was previously fetched, but since you are showing a loading overlay, it sounds like you want to avoid showing anything stale when they force-refresh so that’s probably fine.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search