Refetch, Filter & InfinteQuery

[DorSarel]

Hi Guys,

I've just discovered react-query and I want to start using it in my system.
Up until now I used redux-saga for async actions and saved on all the responses in the store.

I have one flow that it's a little bit complicated and I'll appreciate your help translating it to react-query.
The flow:

1. Fetch items from my backend. The backend response is an object with items & continuation token.
2. Now, I'm filtering the results based on another query response (I understood I can use queryClient to retrieve it)
3. After the filtering - if the remaining items are less than, let's assume, 20 items and I got continuation token from the server, I want to do another fetch
4. return the results

Also, when I show the items (after the flow above) I want to use infinite scrolling for the next fetch.
I'm not sure how to approach it, and I'll appreciate if someone can help me.
Thanks :)

[julionav]

Is the filtering done on the client ? (.filter())

Sounds like you could use the useInfiniteQuery to handle this, with an effect to handle the situation of less than 20 items.

On the effect, you would look if there are less than 20 items, and if there is a next page before fetching the next page.

Something like:

const { data, hasNextPage, fetchNextPage } = useInfiniteQuery(...) // Use the hook correctly with getNextPageParam

if (!data) return null;

const filteredItems = data.pages.flat().filter(...)

useEffect(function maybeFetchMoreItems() {
  if (filteredItems.length < 20 && hasNextPage) {
    fetchNextPage();
  }
  
}, [filteredItems, hasNextPage])

[DorSarel]

@julionav
Thanks for the response!
Yes, the filtering is done on the client.
But I still don't understand how I can combine my continuation token response and InfiniteQuery?.
All the related examples I found were with pages / cursor.

[julionav]

You can return the continuation token from getNextPageParam and it will be passed to your query function as a property { pageParam }.

// pageParam is whatever your return from getNextPageParam, so you could even rename it
// to whatever you want
const { data } = useInfiniteQuery(key, ({ pageParam: continuationToken } => fetch(...), {  
  getNextPageParam: (lastPage) => lastPage.continuationToken 
}) 

[DorSarel]

Thank you very much!! It was very helpful :)