Client only filters in infinityQueries
Hi!
Here is the case: I am getting an paginated list of persons from infiniteQuery and it also has "count" (total amount of persons) field (which I am using to calculate amount of pages). But I am also have a "filters" section which filter out person by gender it is client only and does not envolve server.
How should I do it idiomatically? I am currently manually updating my infinite query, but my pagination is broken, because I do not know how many pages I have after filtering. Should I somehow calculate a new count field every time filter applied or is there any "elegant" way of doing it?
4 Replies
eastern-cyan•3y ago
If you can show some code that'd probably help understand the pagination issue but I'd say the filters should be part of the queryKey and the backend should return the new count after filtering.
quickest-silverOP•3y ago
My case is a bit more complicated but it is basically this: https://stackblitz.com/edit/vitejs-vite-rz6pvd?file=src%2Fmain.tsx,src%2FApp.tsx,src%2Findex.css,package.json
StackBlitz
Vite - React Query Error callback global (forked) - StackBlitz
Next generation frontend tooling. It's fast!
quickest-silverOP•3y ago
In my case I am manually updating it via
select but I am still trying to manually update count property in setQueryData, because in some cases (like page = 2 in stackblitz example) there are no "female" (or "male") persons
So the result is empty and I need to somehow exclude the page from pagination
The current flow is kinda over complicated and it seems that a single "store" (like a redux one, for example) would be more simple than working with "getQueryData" and "setQueryData"eastern-cyan•3y ago
I would simplify things by not using
getQueryData/setQueryData when the filter changes. Instead, you can filter the data directly inside the queryFn, you just have to add the filter value to the queryKey, and pass it as param to the queryFn.
The <Filters> component can just return the current filter value in a onChange() prop and the App component can store it in state in order to pass it to useQuery.
But not sure that'll fix the pagination issue. I think the cause of that is that the pagination happens in the backend while the filtering is done on the frontend. The pagination should happen after filtering to have some consistent page sizes.