query: prefetchInfiniteQuery - Next.js SSR - Error serializing `.dehydratedState.queries[0].state.data.pageParams[0]`

I’m having this same issue. Using JSON.parse(JSON.stringify(dehydrate(queryClient))) works but feels a bit hacky.

The best workaround for now would be to JSON.parse(JSON.stringify(dehydrate(queryClient)))

I fixed the issue using superjson

It’s a slightly better solution, but the drawback is the need for a new dependency

Are you using initialData ? If so, you probably have to set the pageParams too.

E.g:

initialData: {
  pages: [ myFirstPage ],
  pageParams: [1]
}

I have faced same problem, fixed like this:

  queryClient.setQueryData(queryKey, (data) => ({
    ...data,
    pageParams: [],
  }));

Pretty stale issue here, and I haven’t seen any more reports of it since. Closing for now.

May I know what’s the proper solution? I’m still getting this error

we have a fix for this with v5, you can try out the alpha version already:

https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5#infinite-queries-now-need-a-defaultpageparam

Pretty stale issue here, and I haven’t seen any more reports of it since. Closing for now.

This is still an issue, after following the docs as they are, this error is what happens.

we currently use undefined for pageParam returned from getNextPageParam so that we know when to stop refetching. As long as getNextPageParam returns something non-undefined, we keep fetching the next page on refetches (e.g. window focus or invalidation). This is documented here.

https://github.com/tannerlinsley/react-query/blob/a701340efd5fe5751cd4b317be88430533f4d0d7/src/core/infiniteQueryBehavior.ts#L59-L61

The first page is an exception to the rule (we always fetch the first page). For the first page, undefined is used because it allows us to assign a default value in the queryFn, where pageParam is injected. Standard example from the docs:

const fetchProjects = ({ pageParam = 0 }) =>
  fetch('/api/projects?cursor=' + pageParam)
 
const query = useInfiniteQuery('projects', fetchProjects, {
  getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
})

In fetchProjects, the first page fetch will fetch with cursor=0 only because pageParam is undefined.

---

If we change this behaviour to null, it would be a breaking change, making dx worse for these scenarios. Semantics of null and undefined are also different, but that’s debatable 😅 .

---

What dehydration does is merely make a reduced js object out of the queryClient. We also use that mechanism for the persisters. It seems to be a nextJs requirement that js objects returned from getServerSideProps and getStaticProps do not contain undefined values. I don’t know the reason behind this, so I still think it is better to open a discussion / issue with Next.

Tbh, I was surprised that the JSON.parse(JSON.stringify()) workaround does work, because it actually turns:

 pageParams: [undefined]

into

 pageParams: [null]

I think this only works coincidentally, because we ignore the pageParam completely when fetching the first page:

https://github.com/tannerlinsley/react-query/blob/a701340efd5fe5751cd4b317be88430533f4d0d7/src/core/infiniteQueryBehavior.ts#L81-L84

---

Since v4 is around the corner, and the first element in pageParams apparently doesn’t matter, we could think about changing it to null before writing it to the cache, after we have passed it to the queryFn (there, we would still need undefined for the destructuring to work). Also feels a bit hacky. If anyone has other ideas, please shoot 😃

I did everything as it is written in the documentation. srr doesn’t work anyway

can you show this in a codesandbox reproduction please?

Just wanted to report that the issue is still present in Nextjs 12.2.5 + RQ 4.29.1. Hacky workarounds solves the issue.

Bumping this issue as we ran into it again. Definitely want to avoid setting the query manually in our case, so if there’s a way to define a default pageParam or have it return null rather than undefined, we’d be super appreciative. Thanks!