React query disable loading in certain ocasion?

Question

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?

Aryan kholqi · Accepted Answer · 2023-11-17 21:01:27Z

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
});

answered Nov 17, 2023 at 21:01

Aryan kholqi

615 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

adsy · Accepted Answer · 2023-11-17 21:02:02Z

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.

answered Nov 17, 2023 at 21:02

adsy

12k2 gold badges27 silver badges43 bronze badges

Comments

Community · Accepted Answer · 2025-07-24 14:53:21Z

0

Update for v5: use placeholderData

You can pass a function to placeholderData that returns previousData to automatically retain the previous data until the new data is available:

const result = useQuery({
  queryKey: ['todos', id],
  queryFn: () => fetch(`/todos/${id}`),
  placeholderData: (previousData, previousQuery) => previousData,
})

https://tanstack.com/query/latest/docs/framework/react/guides/placeholder-query-data#placeholder-data-as-a-function

There is also a keepPreviousData function that is exported from @tanstack/react-query that can be used:

import { keepPreviousData, useQuery } from '@tanstack/react-query'
import React from 'react'

function Todos() {
  const [page, setPage] = React.useState(0)

  const fetchProjects = (page = 0) =>
    fetch('/api/projects?page=' + page).then((res) => res.json())

  const { isPending, isError, error, data, isFetching, isPlaceholderData } =
    useQuery({
      queryKey: ['projects', page],
      queryFn: () => fetchProjects(page),
      placeholderData: keepPreviousData,
    })

  return (
    <div>
      {isPending ? (
        <div>Loading...</div>
      ) : isError ? (
        <div>Error: {error.message}</div>
      ) : (
        <div>
          {data.projects.map((project) => (
            <p key={project.id}>{project.name}</p>
          ))}
        </div>
      )}
      <span>Current Page: {page + 1}</span>
      <button
        onClick={() => setPage((old) => Math.max(old - 1, 0))}
        disabled={page === 0}
      >
        Previous Page
      </button>
      <button
        onClick={() => {
          if (!isPlaceholderData && data.hasMore) {
            setPage((old) => old + 1)
          }
        }}
        // Disable the Next Page button until we know a next page is available
        disabled={isPlaceholderData || !data?.hasMore}
      >
        Next Page
      </button>
      {isFetching ? <span> Loading...</span> : null}
    </div>
  )
}

https://tanstack.com/query/latest/docs/framework/react/guides/paginated-queries#better-paginated-queries-with-placeholderdata

edited Jul 24 at 14:53

CommunityBot

11 silver badge

answered Jul 21 at 17:48

user24290823

12 bronze badges

3 Comments

Community Jul 21 at 19:46

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Zeros-N-Ones Jul 21 at 21:40

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

Quentin Jul 21 at 22:48

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

Collectives™ on Stack Overflow

React query disable loading in certain ocasion?

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related