React Query dynamic incremental queries

Question

I am currently fetching data from a 3rd party api in a React application.

The way the api is structured, the flow goes like this:

// Get a list of data
response = GET /reviews

while response.data.nextPageUrl is not null
   response = GET ${response.data.nextPageUrl}

I currently have this logic inside of a "fetch method"

const fetchMyData = () => {
  // The logic above
}

const query = useQuery(['myKey'], () => fetchMyData, {...})

This works, but comes with some drawbacks.

There is no way to see the progress of the individual requests (to be used in a progress bar)
It cannot leverage React Query's caching functionality on an individual request. For example: If there are 10 requests to be made, but during the 5th request the user refreshes the page, they will need to restart from the beginning.

I am aware of useQueries but since I do not know the query urls until I have received the first request I do not see how I could use it.

Is there a better approach or way to satisfy the 2 issues above? Thank you in advance

@inf3rno no unfortunately, I do not have control over this API either. Caching individual responses is important because the response times for each individual api call is quite slow :/ — Ross Sullivan
– Ross Sullivan, Commented Nov 4, 2022 at 2:07
Isn't it possible to add some sort of caching HTTP proxy to your system? I would rather go to that direction if possible. — inf3rno
– inf3rno, Commented Nov 4, 2022 at 11:35

Gerardo Sabetta · Accepted Answer · 2022-11-07 21:55:19Z

2

What you need is Infinite Queries. useInfiniteQuery works similar to useQuery but it's made for fetching by chunks. useInfiniteQuery has extra parameters like getNextPageParam which you will use to tell React Query how to determine the next page. This hook also returns fetchNextPage, hasNextPage (among others), which will allow you to implement patterns like a "show more" button that appears for as long as there is a next page.

By using infinite queries you still leverage on React Query caching. Check the docs for more info.

answered Nov 7, 2022 at 21:55

Gerardo Sabetta

5803 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Query dynamic incremental queries

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related