dehydratedState.queries[0].state.data.pageParams[0] in next js

[farshidshahmoradi1996]

Describe the bug
in next js I want to use prefetchInfiniteQuery and :
Error serializing `.dehydratedState.queries[0].state.data.pageParams[0] in next js

with prefetchQuery its ok but with prefetchInfiniteQuery has error .

and I check there isn't problem in data.

Screenshots

Desktop (please complete the following information):

• OS: Linux
• Browser: chrome
• Version: 87

Additional context
Add any other context about the problem here.

[farshidshahmoradi1996]

I found solution :
but why this happean?

[tannerlinsley]

This is an upstream bug with next js. Normally, undefined is disposed of during serialization.

[sheikharifulislam]

I found solution : but why this happean?

Thank you for your comments. I was looking for a solution to this problem. After writing the code given in your comment, my problem was solved.

[sheikharifulislam]

This is an upstream bug with next js. Normally, undefined is disposed of during serialization.

So far is there any good solution to this problem ??

[TkDodo]

we have something in the pipeline for v5

[LLukkke]

The reason for my error is that axios return body obejct contains undefiend, I added an interceptor to make it return only the response data.
Hope it is helpful for you.

or you can do it like this

await queryClient.prefetchQuery(['reviewList'], async () => {
    const { data } = await getReviewList();
    return data;
  });

[sheikharifulislam]

we have something in the pipeline for v5

pageParm undefined Is there a solution to this problem at the moment?

[cross-development]

Hi! Today I had the same problem with the useInfiniteQuery in Next.js SSR. In my case, I used this option - structuralSharing. If you pass a function to this prop you can get old and new values. Log the new and old values and you can see why you have undefined. So, to solve this problem you should return from this function an object with the next fields:
{ pageParams: [null], pages: newData.pages } (or in case you want to pass a page number, instead of null you should put [1] like a first page). The pageParams field allows you to pass the first param which doesn't exist on the first request. And newData.pages allows you to keep your infinite scroll working on the client side.
By the way, if you have a "Show more" button, after getting more data (page 2) you will have the next pageParams: { pageParams: [null, 1], pages: newData.pages } (or { pageParams: [1, 2], pages: newData.pages } in case you passed 1 like the number of the first page).
I hope the solution to this problem will not cause errors in further development))))