infiniteQuery is missing indication on error (e.g isErrorFetchingNextPage and isErrorFetchingPreviousPage)

[nitzansan]

The general isError boolean does not indicate on which operation the fetch has failed. The original fetch, the previous page fetch, or the next page fetch.

Indicating which operation resulted in error is very important UX wise. For example, taking a generic infinite scrolled chat as an example.
When loading the initial data, we will want to display some error state on the entire chat box and a retry button.
When loading previous messages we will want to display a "Failed to load. Press here to retry" message on the top of the infinite scroll.
When loading new messages we will want to display a "Failed to load. Press here to retry" message on the bottom of the infinite scroll.

The only solution right now is to copy the isFetchingPreviousPage and isFetchingNextPage to state, clean it on success, and add error booleans that will turn on if the consumer's copied isFetching is true and we receive an error.

I think this kind of functionality should be part of the api of this query, in whicever way makes sense to you.
E.g - onError can receive a second parameter that indicates the operation + adding a isFetchNextPageError/isErrorFetchingNextPage and isFetchPreviousPageError/isErrorFetchingPreviousPage booleans.
WDYT?

[nitzansan]

Code example for the workaround:

export const useInfiniteQueryWrapper = (queryKey) => {
  const [isFetchingNextPageTracking, setIsFetchingNextPageTracking] = useState(false);
  const [isFetchingPreviousPageTracking, setIsFetchingPreviousPageTracking] = useState(false);
  const [isErrorFetchingNextPage, setIsErrorFetchingNextPage] = useState(false);
  const [isErrorFetchingPreviousPage, setIsErrorFetchingPreviousPage] = useState(false);

  const infiniteQueryResult = useInfiniteQuery(queryKey, ({ pageParam }) => fetchFn(queryKey, pageParam), {
    getNextPageParam: (lastPage, allPages) => { ... } // return next page params
    getPreviousPageParam: (firstPage, allPages) { ... } // return previous page params
    onSettled: (data, error) => {
      if (isFetchingNextPageTracking) {
        setIsErrorFetchingNextPage(!!error);
        setIsFetchingNextPageTracking(false);
      }

      if (isFetchingPreviousPageTracking) {
        setIsErrorFetchingPreviousPage(!!error);
        setIsFetchingPreviousPageTracking(false);
      }
    }
  });

  const { isFetchingNextPage, isFetchingPreviousPage } = infiniteQueryResult;

  useEffect(() => {
    if (isFetchingNextPage) {
      setIsFetchingNextPageTracking(isFetchingNextPage)
    }
  }, [isFetchingNextPage]);

  useEffect(() => {
    if (isFetchingPreviousPage) {
      setIsFetchingPreviousPageTracking(isFetchingPreviousPage)
    }
  }, [isFetchingPreviousPage]);

  return { ...infiniteQueryResult, isErrorFetchingNextPage, isErrorFetchingPreviousPage };
};

[nitzansan]

@tannerlinsley - Would be happy to hear your thoughts on this matter. 🙏

[jasonhilldm]

Yeah, it would be great to have these error statuses baked into react query. I am also looking to provide similar retry functionality that needs to know whether the initial data or paginated data was being fetched. Thanks for providing the workaround.