reactjsreact-query

How to get the isLoading state while keepPreviousData is on in react-query

I would like to keep the previous data and using a spinner on top of the data while loading.

I know that isLoading only return true if it is hard loading. However, using isFetching will trigger spinner to appear whenever there is background fetch.

Is there any way to get the loading state when keepPreviousData is on?

Solution

  • A good way to do this is to use the isPreviousData flag that is also returned from useQuery. It will be true for as long as the previous data is shown due to keepPreviousData, and as soon as the "real data" for that query comes back, it will go back to false.

    This is for example how we disable the next-button in the pagination example