Custom useInfiniteQuery cache shape

[vjuux]

Good day react query community, I'm looking for a way to customize the root shape of the useInfiniteQuery cache.

Instead of

data: {
   pages: Object[][];
   pageParams: {};
}

to something like

data: {
   items: id[];
   itemsById: {
      [id]: Object
   }
   xnext: string // used for fetching further batch of objects
}

when fetchNextPage is being hit, next batch of objects is being indexified and added to itemsById & items.
I find this shape easier to work with when using WS, currently when receiving an update/ delete/ create it takes iterations over pages to identify the object in order to manipulate, with this new shape it would flatten things out and simplify query cache interaction. Currently it's an extremely convoluted and inefficient queryClient.setQueriesData() manipulation.

Initial idea was to create a custom useInfiniteQuery by creating a customQueryBehavior and customQueryObserver that would be passed in useBaseQuery. Where buildNewPages and finalPromise would massage the payload accordingly. It looks like the useBaseQuery is not exported for a reason?

This is being used for an infinite scroll use case where tracking pages is not necessary.
Is this even a good idea or I'm stretching the RQ too far here?

@TkDodo 🙏🥺

[Arian-Hamdi]

Hey @vjuux,
Did you find any solution for this?

In our case, we have an infinite scroll chat history, and we need to update a specific ID frequently because of streaming. Looping over all the messages is not efficient. We were thinking about creating a map to be able to find the desired message's index with O(1) complexity, but the shape of the cache in useInfiniteQuery doesn't allow it. We would have to create that map index inside each page individually instead of something global.

That would be great if you can take a look at this @TkDodo @tannerlinsley