How to show loader for infinite query in suspense mode?

[divyam234]

I have a use case where I have to show a top loader while data is being fetched .Currently I am wrapping the component in boundary like this.

const QueryBoundaries = ({ children }: { children: React.ReactNode }) => (
  <QueryErrorResetBoundary>
    {({ reset }) => (
      <ErrorBoundary onReset={reset} FallbackComponent={ErrorView}>
        <React.Suspense fallback={<Loader />}>
          {children}
        </React.Suspense>
      </ErrorBoundary>
    )}
  </QueryErrorResetBoundary>
);

const ErrorView = ({ error, resetErrorBoundary }: FallbackProps) => {
  return (
    <Box>
      <Typography>{error.message}</Typography>
      <Button title="Retry" onClick={resetErrorBoundary} />
    </Box>
  );
};

Problem is whenever infinite query is refetched mainly by a key change loader is not shown. As isFetching is not avaliable in suspense mode I can't render loader directly in Component .Any suggestions where I am going wrong.

[TkDodo]

isFetching is also available in suspense mode. React Query only suspends if there is no data in the cache for a key. For background refetches, it works just the same as without suspense.

[divyam234]

const useFetchItems = (queryParams: Partial<QueryParams>) => {
  const { key, path, type, enabled } = queryParams
  const sortOrder = getSortOrder()
  const queryKey = [key, path, sortOrder]
  const {
    data,
    isFetching,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage
  } = useInfiniteQuery(
    queryKey,
    fetchData(path as string[], type as string, sortOrder),
    {
      getNextPageParam: (lastPage, allPages) =>
        lastPage.nextPageToken ? lastPage?.nextPageToken : undefined,
      enabled,
      retry: false,
      suspense: true
    }
  )
  console.log(isFetching)
  return {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage
  }
}

@TkDodo I have a hook like above for fetching some items from server but when I access isFetching field whole function throws error.If I omit isFetching its working fine.Also if I remove suspense field then accessing isFetching works fine.

[TkDodo]

what does "throws error" mean? You'd need to show a codesandbox reproduction please