Small feature request: option to flatten pages from infinite query

[crieggalder]

Hey @tannerlinsley and team - thanks so much for this library.

Had a quick suggestion: would it be possible to add an option to useInfiniteQuery to return a flat array of items rather than an array of pages, which are themselves arrays of items? This would be useful for infinite feeds and would help drive adoption.

Here's an example of someone flattening the array manually: https://github.com/erdalstk/react-query-infinite-flatlist-example/blob/19b65114494c86d2d10b178be0405e7b07edcd00/src/hooks/useInfiniteContacts.ts#L19

And here are other discussions mentioning this feature:

• Native SectionList support for useInfiniteQuery #1993
• React Native FlatList with useInfiniteQuery #1218

I'd take a swing at it myself but still learning the ropes with JS so hoping someone more competent can lead the way.

[cristi-shoreline]

Hello, @crieggalder!

I also experienced this lately and yes, maybe it could've been easier to have an option to flatten, but still... the response may carry other important data, other than just the list of items. For example, an infinite query may carry a next page param, such as a cursor, or the total count, or even more data that you might need as an API consumer: filtering or sorting related data, and so on.

I think the design right now is well-unopinionated, to leave the developer the freedom to handle the pages at his preference.

[crieggalder]

Hey @cristi-shoreline - that's a good point.

To make this work, I think the user would also need to provide a function that returns an array of items from the page to be concatenated in a flat array of results - sort of like getNextPageParam.

@TkDodo I imagine other parts of the lib need the data object to be an array of pages? Maybe we could return an additional object (named something like "concatenatedItems" or "flatData") only if user provides optional function to get array of items from page (named something like "getItems").

The goal here is for the lib to return a ready-to-use data object for an infinite feed which it can update, rather than hacking my own transformation function and trying to make sure I invoke it every time I should. Infinite feeds are a common use case so this will probably keep coming up.

Again, awesome lib and there are probably many complications I'm not thinking of since I don't know the internals. :)

[tannerlinsley]

Why not just do the transformation in a custom hook and use that?

[crieggalder]

@tannerlinsley is the idea to just call the transformation hook from onSuccess?

Would that create any gotchas around refetching or paginating? Is it always going to be called when it needs to be?

Maybe still beneficial to support the option or at least include a best practice example of flattening pages in the docs for other folks who are building infinite feeds. :)

[TkDodo]

The idea is more something like:

const useInfiniteTodos = {
  const queryInfo = useInfiniteQuery(...)
  return {
    ...queryInfo,
    data: {
      ...queryInfo.data,
      pages: queryInfo.data?.pages.flat()
    }
  }
}

[crieggalder]

Hm - tried that and I'm erroring with queryInfo.data.pages undefined.

As a side note - is it possible to do the flattening using the select option? What are pros/cons of doing it in select vs. doing it here in return of custom hook?

Thanks a ton for the help!

[TkDodo]

Yes, when in loading state, data can be undefined. I added a ? to the right place in the above code.

Regarding select: I have just the right article on that topic: https://tkdodo.eu/blog/react-query-data-transformations