split one query into little parts
hi guys
i have a query ex: https://myapi.com/items
it returns 1000 items
but also this endpoint support pagination
i want to split this big query into 100 little queries
so i want to fetch 100 items 10 times one after another
the best way to do this?
6 Replies
absent-sapphireOP•3y ago
i can useQueries
but theres is a pitfall
i need to make the first fetch to know how many items in total
only then i can count how much times i need to fetch
endpoint also supports:
pagination: number
total: number
fascinating-indigo•3y ago
React Query Pagination Example | TanStack Query Docs
An example showing how to implement Pagination in React Query
sensitive-blue•3y ago
do you really want to fetch everything at once or only when the user decides to view the "next page" ? because that's what paginated queries are.
absent-sapphireOP•3y ago
everything at once
ive splitted the query into parts 1,2,3...10 using different keys (key + index) and got them by useQuery
now i need to collect all the queries into one
any method that will do this for me ? or i should do this step by step by myself? split, query, collect ?
sensitive-blue•3y ago
I don't understand the point in splitting it up. If the only thing you want is smaller API requests, you still want one query. So you make your queryFn do many fetch requests, chunked up, as many as you want. Then you concat the results and return them as one query, as if they were fetched by one fetch request. A query doesn't have to only make one api call
absent-sapphireOP•3y ago
let me specify
1. first i have to query the backend for the limit i can use for queries ie 100
2. then i must query my items with that limit once to get the total number from 'items' endpoint
3. then i can count how much queries i need to do to get all items
for now i end up with
1. getting limit from backend
2. first hook query for 'items' with limit (only first page, now i know the total)
3. second hook which count how many times i need to fetch and a pagination number
4. now i need to make a hook to collect all data into one key ['items']
would be great if i can store all of that actions in one hook but .... can i?
please if you have a good example share it
well i end up with 2 hooks
1. fetching first page and all other pages
2. collect and concat data from queryCache
dunno could it be better