InfiniteQueries, refetch, and loading/fetching flags

[jon-eubank]

Hi all,

I'm new to React Query, but have come upon an interesting problem. I am using an infinite query to maintain my scrollable list of items and am using the refetch method to reload my items after the user has made updates on a different screen.

The issue is that I don't see a flag I can use to indicate the data is being "hard reloaded" so to speak by showing the users a loading icon. If I rely on isLoading, then it isn't set to true when "refetch()" is called. If I rely on isFetching, then it is set to true whenever the user causes the next batch of items to be loaded in as well (bad UI). I'm essentially trying to display a nice loading icon whenever the list is initially being loaded OR when I have called refetch().

What's the common solution for handling this for cases like pulling down to refresh and such? As a workaround, I created my own "loading" state that I trigger on and off whenever I call refetch(), and while that works it is not ideal.

[TkDodo]

You can use isFetching && !isFetchingNextPage

[rqbazan]

Hey @TkDodo ✋

I have a pretty similar use case, however, in my infinite scroll list, the user can manually refetch the infinite query by clicking a Retry button while scrolling. This Retry button only appears if a nextPage query fails.

So, currently, I'm only using isFetchingNextPage to render the loader component at the end of the infinite list, but now I also need a flag for the described case above.

const isManuallyRefetching = "?"
const hasLoader = isFetchingNextPage || isManuallyRefetching

I hope you can help me to figure this out 🙏

[TkDodo]

what is the retry button doing? only refetching the single, failed page?

[rqbazan]

The retry button is refetching the last page:

const queryResult = useInfiniteQuery([...], {
  onError: () => {
    const hasLoadedData = queryResult.data !== undefined

    if (!hasLoadedData) {
      return
    }

    const toastId = toaster.negative('blablabla', {
      action: 'Retry',
      onAction: () => {
        queryResult.refetch({
          refetchPage: (page, index, allPages) => {
            return index === allPages.length - 1 // lastPage
          },
        })
  
        toaster.dismiss(toastId)
      },
    })
  },
})

[TkDodo]

You can check for isRefetching && isError ? Or you'd have to keep state manually for this