How do I implement getNextPageParam to do Infinite/paginated queries without a cursor?

[MaddoScientisto]

The API I need to query only has the following parameters I can send in a post request to do pagination:

• limit (limits the result to x element)
• offset (offsets the result by x amount)

I already managed to configure the query function to send pageParam as a post parameter for offset but unfortunately I don't have any info about which page we are on or which page is the next one on the API results themselves, meaning I have no idea what to return as the next page in getNextPageParam.

Is there any way to make getNextPageParam work at all with this configuration? Can I keep an internal index of the current page somehow?

[louis-young]

Hi 👋

The first argument to getNextPageParam is the last page. Typically, APIs that use a limit/offset pagination approach provide the current limit and offset as metadata in the response. Can you use this to increment the offset based on the last page in getNextPageParam?

[MaddoScientisto]

Unfortunately I don't have this information in the API and I'm not in control of it so it can't be added.

Is there no way to keep an internal counter of the current page at all?

[louis-young]

I imagine you could do this by returning the required metadata from the query function that you have in scope at the time you make the request. That should then be passed as the last page to getNextPageParam.

[MaddoScientisto]

Yeah it makes sense... I could append the current offset and limit myself to the returned data on the promise... I'll try that

[louis-young]

Yeah, exactly 👍 give that a go and let me know how you get on 🙂

[MaddoScientisto]

It works! I had to do some finangling with getting the correct values but it worked,

const paginatedQueryOptions = {
			getNextPageParam: (lastPage, pages) => {
				const nextPage = lastPage ? lastPage.page + 1 : 0;
				return nextPage;
			},
		};

and I added this to the promise that gets data:

.then(data => {

				return {
					...data,
					limit: options?.body?.limit,
					page: pageParam || 1,
					offset: pageParam && pageParam > 0 ? pageParam * options?.body?.limit : 0,
				};
			})

[TkDodo]

in v5, getNextPageParam and getPreviousPageParam will get access to all "pageParams", similar to how it gets access to all pages. So, you can derive the info from that. Until then, what @louis-young said is the best option: return that info with your data from the QueryFunction.

https://tanstack.com/query/v5/docs/react/reference/useInfiniteQuery

[MaddoScientisto]

Great, I'll try to remember to upgrade to that once I switch to v5, until then I can confirm the other solution works