Implement infinite query with traditional backend pagination

[cflorez10]

I'm developing a react-native application and I want to implement a infinite scrolling list, I've reviewed the infinite query documentation, but I can't figure out how the implementation example can fit with the structure of my backend. On the other hand, it is not clear to me if an infinite query or a paged query fits better in this scenario(implement infinite scrolling).

Current backend structure

Request structure

https://some-endpoint/search?limit=10&offset=0

With this structure my backend returns:

{
    limit: 10,
    offset: 0,
    totalResults: 300,
    results: [{...results}],
}

Each time the limit of the list scroll is reached, these variables are updated until we reach the total number of results.

offset: offset + limit,

[TkDodo]

an infinite query can easily handle this, not sure what you have tried, but:

useQuery({
  queryKey: ['foo'],
  queryFn: ({ pageParam = 0 }) => fetchFoo(`https://some-endpoint/search?limit=10&offset=${pageParam}`),
  getNextPageParam: (lastPage) => lastPage.limit + lastPage.offset
})

or so should do it