Possible to implement something like useInfiniteQuery from @tanstack/query ?

[hemandev]

Hi, First of all, let me say this is a great library, and I'm loving it so far.

I am using query along with nanostores to build a framework-agnostic library, which I can then use to build components for each framework. All the business logic and reactivity stay in this "core" library.

TLDR; Is it possible to do something like useInfiniteQuery in @tanstack/query? https://tanstack.com/query/v5/docs/framework/react/reference/useInfiniteQuery I want to build the whole infinite scroll data store inside VanillaJS so that I can reuse the same store in React, Vue, Angular etc...

[dkzlv]

@hemandev It sure is possible, yeah. If I were to solve this issue in a component library world, this is the way I'd go:

1. define Page component that accepts all arguments required for fetching a page (it can be cursor, page or whatever);
2. implement a factory function that accepts those arguments and returns a fetcher store with these arguments pre-defined;
3. call this factory function in Page component, and pass props as arguments. Memoize the result (mamoization can be soft, without hard guarantees: nanoquery has its own data cache layer that's component/tree agnostic);
4. subscribe to this store;
5. render new Page component whenever user approaches the bottom of current page.

Basically, this thing.

But, as you can see, it's not something that looks particularly like useInfiniteQuery, and there's no helpers that's part of the core yet, so it may require some custom code wrapping nanoquery. That's one of the features I'd like to implement some day, but right now it's not there yet.