query icon indicating copy to clipboard operation
query copied to clipboard

`useInfiniteQuery` + `experimental_prefetchInRender` uses error boundary for subsequent pages

Open OliverJAsh opened this issue 2 months ago • 1 comments

Describe the bug

Both useSuspenseInfiniteQuery and useInfiniteQuery + experimental_prefetchInRender use the error boundary for the first page, but only the latter uses the error boundary for subsequent pages.

useSuspenseInfiniteQuery (doesn't use error boundary):

https://github.com/user-attachments/assets/7fdeb4be-c856-4ba7-b0ec-74dd0b21c840

useInfiniteQuery + experimental_prefetchInRender (uses error boundary):

https://github.com/user-attachments/assets/631f0664-09f4-4d37-b00f-b9715fb142bd

Is this intentional? It was really surprising to me. I would expect both of these hooks to behave the same.

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-query-qags2jzf?file=src%2Fcomponents%2FProjects.tsx&preset=node

Steps to reproduce

  1. Click "Show Projects" (fetches first page successfully)
  2. Click "Fetch next" (fetches second page which results in an error)

Switch between the two examples to observe the behaviour difference:

  // ✅ Uses error boundary for first page
  // ✅ Uses error boundary for subsequent pages
  const { promise, fetchNextPage, isError } = useInfiniteQuery({
    queryKey: ['projects'],
    queryFn: fetchProjects,
    initialPageParam: 1,
    getNextPageParam: (a, b, l) => l + 1,
    experimental_prefetchInRender: true,
  });
  const data = React.use(promise);

  // // ✅ Uses error boundary for first page
  // // ❌ Does not use the error boundary for subsequent pages
  // const { data, fetchNextPage, isError } = useSuspenseInfiniteQuery({
  //   queryKey: ['projects'],
  //   queryFn: fetchProjects,
  //   initialPageParam: 1,
  //   getNextPageParam: (a, b, l) => l + 1,
  // });

Expected behavior

I would expect both of these hooks to behave the same.

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

N/A

Tanstack Query adapter

None

TanStack Query version

5.90.11

TypeScript version

No response

Additional context

No response

OliverJAsh avatar Dec 02 '25 16:12 OliverJAsh

Another thing I just noticed related to this: it seems that we're unable to reset the error (useInfiniteQuery + experimental_prefetchInRender).

https://github.com/user-attachments/assets/65fc53b0-da4c-49b5-b6a3-481b92e43eb0

OliverJAsh avatar Dec 02 '25 16:12 OliverJAsh