Paginated queries

[michealroberts]

Add query handlers for loading paginated / "infinite" data

[posva]

Do you have any examples of endpoints to use and what the actual API should be? If you have real world case usage, that would also help to boil down the needed API.

This is probably worth adding at some point but when I searched on open source projects and some close sourced, I didn't find anybody using it.

[michealroberts]

@posva Great question.

So, for us, we see that we would either utilise @tanstack/vue-query or this library for our data access layer. The useInfiniteQuery() composable looks to be the API I feel this library should make use of. This composable can handle both paginated queries, i.e., one page at a time, as well as accumulated results (applicable to infinite lazy loading on scroll, etc). Usually, APIs would be designed around the notion of current page, has next page, has previous page, page size and "location" (offset and limit).

As to what the API looks like, I understand that this would need considerable thought and community engagement and feedback.

I am happy to draft an RFC for this?

[posva]

No need to have a formal RFC, although I appreciate the proposal 😄
Real use cases help see what options are needed

Regarding tanstack/vue-query, I think you should still use it in production apps. There will probably be a migration path for users willing to try pinia colada.
The main useful features are the data loaders integration with and light size.

[posva]

FYI, paginated queries are supported (they have been for a while but I never thought of commenting here). As for infinite queries, I think I still want to give the feature more thought. Currently, it should be possible to implement even in userland by interacting with the query store directly

[tobychidi]

I also need the Infinite query API for my project. It is a list of articles and only the current page (with or without cursor) will be fetched. The list is rendered virtually, scroll down should add more results and scroll up will add previous pages' result to the data. This is my specific use case for one project. I also have another project with to-do list. I would like to do something similar as well. I think most lists should use infinite queries and lists that can remember your current position etc. For tables I use limit/offset pagination.

Using the current available APIs in Pinia Colada, how would I implement this, like with the query store at other features like invalidation.

Also, usually we don't invalidate entire lists for infinite queries, we only replace specific items unless there is a reload.

[max-arias]

Sorry to bump this thread @posva , but I'm looking into using Pinia Colada in a new project.

Is there an equivalent to tanstack's fetchNextPage ?

The endpoints return something like this:

{
 data: SomeDataShape[],
  meta: {
    total: number;
    nextPage?: string;
   previousPage?: string;
  }
}

The query's key uses a query param from the page (eg /pages/todos/[id].vue)

Is the recommended way of doing this writing the logic in the shared query? Track the current page with a ref and then expose a function to increment it?

I was thinking about what if the page changes, the "page" ref probably won't be reset to 0 even if the key is different because of the query param.

Ideas?

[posva]

I opened #178 to track this. I need feedback on use cases to design a proper useInfiniteQuery(). The existing version is too simplistic but it should help cover basic infinite scrolling usecases.