[Next.js + react-query] prefetchInfiniteQuery does not work in SSR

[JurajKavka]

Hello,

I have upgraded my project to newest version of Nextjs and react-query and one of the page of my site stopped working. On that page I'm rendering list of items which is paginated.

In getServerSideProps I'm calling prefetchInfiniteQuery to fetch data of paginated list to cache. But during server side rendering, it returns error:

error - Error: Error serializing `.dehydratedState.queries[4].state.data.pageParams[0]` returned from `getServerSideProps` in "/XXX/".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

I have tried basically everything to suppress this error, but nothing helped. What can be cause of this error?

Thank You for any help.

[TkDodo]

You cannot serialize undefined to json. Not sure how this could've worked before. Have a look here: https://react-query.tanstack.com/reference/hydration#limitations

[JurajKavka]

I found that without SSR, on first render I have one item on pageParam and it is probably undefined?

[TkDodo]

Yes, In think that is expected. How did that work with previous versions of nextjs? Because this has always been the way in RQ

[JurajKavka]

I don't know. Now the project works with

"next": "10.0.6",
"react-query": "^3.8.3",

Example and working URL is here: https://futbalsfz.sk/reprezentacia/muzi-a/vysledky/ (this is paginated list of played matches, properly rendered on SSR)

After update on

"next": "12.0.7",
"react-query": "^3.34.3",

it stopped working. I just changed SSR function from getInitialProps which is not recommended to use, to getServerSideProps. Also Next.js serializes data from SSR and they can't contain undefined.

From docs:

and I have this

 return {
    props: {
      dehydratedState: dehydrate(queryClient),
      initialError,
    },
  };

So I'm not sure where is the problem. Maybe it is something with Next.js or I'm doing something wrong?

[TkDodo]

did you only update nextJs or nextJs AND react-query? Knowing this would help narrowing it down.

looking at the page source of the page you linked above, the data that is sent via nextjs initial props doesn't look like an infinite query to me - at least I can't find pages / pageParams anywhere - it looks like an "normal" query:

<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"dehydratedState":{"mutations":[],"queries":[{"state":{"data":{"section":{"_id":7082,"name":"Výsledky","url":"reprezentacia/muzi-a/vysledky","show":true,....

pageParams does not exist at all in the page source, so I don't think that you call prefetchInfiniteQuery ?

[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))))