Undefined pageParams useInfiniteQuery

[crowd-dong]

Hi all maintainers.

I have a question regarding the [undefined] for useInfiniteQuery on the initial first load. Why is it undefined and not have the initial value from the first query?

Should it not be ..?

pageParams: [0]

according to the default value for pageParam?
This is just me using the example codeSandBox for infinite scroll and load more.

SandBox
I just added in

  const queryData = queryClient.getQueryData("projects");
  console.log(queryData);

As i continue to scroll it continues to be undefined but it does properly update the pageParams with the next value that gets return from the getNextPageParam

Any help would be greatly appreciated.

[TkDodo]

pageParams are calculated depending on getNextPageParam and getPreviousPageParam. These functions are only called after you have pages already, because they depend on lastPage/firstPage.

for the first fetch, the pageParam is undefined, and in the example, it is set to 0 with a default value:

async ({ pageParam = 0 }) => {

so undefined will be coerced to 0.

I think this behaviour is intended, there is only so much we could do:

1. call getNextPageParam/ getPreviousPageParam also for the initial fetch, but with undefined as input - then we would have to coerce it to 0 there. This sounds like a breaking change and I don't know the implications of that.

2. pass an initialPageParam value to useInfiniteQuery that we will use for the first fetch instead of undefined. This would be doable I think and a nice addition maybe, but I don't know the internals of useInfiniteQuery very well. @tannerlinsley ?

[parkm]

I'm running into an issue with this as well. In our use case we pass in params to our endpoint that might give us a page other than the first. For example, we might want to fetch items from a certain date and we don't know what page we'll get back until the request completes.
I have a workaround in mind, but I haven't tried it yet. I'm thinking we'll fetch initially and then use setQueryData to populate pageParam with whatever page we get back from the pagination metadata on the request. Just seems cumbersome, so not sure if there's any built-in way around that. I also might not be using useInfiniteQuery as intended, so there's that haha.

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

[badalsaibo]

I was having this error because I was using react-query instead of @tanstack/react-query.
With @tanstack/react-query we can use the initialPageParam and set it to our desired value instead of undefined.