React Native FlatList with useInfiniteQuery

[subhadippramanik]

Hello,

I have a long list of data in Firestore which I want to show on a FlatList

I want to fetch 10 records each time. When user scrolls till the last item, it should trigger next fetch.

I tried with useInfiniteQuery, but struggling at showing data on FlatList as it is not array.

Could someone guide me on how to achieve this?

[gpbaculio]

i also have this problem, optimistic response don't work in a flatlist

[TkDodo]

but struggling at showing data on FlatList as it is not array.

I have no experience with react-native, so that being said: The data returned from useInfiniteQuery is basically paginated, which means if you return an Array of 10 records, react-query will additionally put that in an Array, where the first element contains the first "page" of 10 records, the second one the next 10 entries and so on.

You can see that in the example here:

https://github.com/tannerlinsley/react-query/blob/25a776d98dfbd629b301abce4dc9b76e5409c881/examples/load-more-infinite-scroll/pages/index.js#L63-L65

data is the result from react-query, and we iterate over it to get all the "pages", and then each page has the actual projects.

[wobsoriano]

In react-query v3, you can now transform the response https://react-query-beta.tanstack.com/guides/migrating-to-react-query-3#query-data-selectors

A paginated record will give the data key from useInfiniteQuery an array of arrays. You will have to combine them.