useAsyncList with react-query

[snax4a]

Hello,

I couldn't find any example and I wonder if it's possible to combine useAsyncList with the react-query useQuery hook to load paginated data.

If anyone already used these two combined I would love to see a little code snippet.

Thank you in advance.

[LFDanLu]

I haven't used useQuery before, but it seems to serve a similar purpose to useAsyncList at a glance albeit without the list manipulation methods. Would you mind expanding on what exactly you are trying to accomplish here that would require using both these hooks?

[snax4a]

react-query (now called tanstack query) is a state manager for asynchronous data which has built in caching.

What i am trying to achieve is to load async data into my picker component through its useQuery hook so it will not make api request if this data was already cached / used in other component.

[reidbarber]

You would want to use useQuery instead of useAsyncList, like this: https://codesandbox.io/s/picker-with-react-query-fqeglt?file=/src/index.js

And if you wanted to do infinite loading with, you could use useInfiniteQuery similarly.

[snax4a]

Ah so I was stuck thinking that useAsyncList is used to make this infinite loading but it all is handled by magic onLoadMore prop on Picker component.

You are right that useInfiniteQuery can be used here, I am leaving here working example for others: https://codesandbox.io/s/picker-with-react-query-forked-ox13c8?file=/src/index.js

Thank you LFDanLu and reidbarber for help.