how to filter data while maintaining minimum results per page?
When using useInfiniteQuery with a select function to remove some results is there a way to do it so the amount of results per page remains consistent where each result moves back 1 when a result is removed
10 Replies
molecular-blue•3y ago
The core idea of server-side pagination is that you also have to include sorting and filtering on the server. Otherwise it's almost impossible to keep it consistent on the client.
For infinite queries it might not matter as it is usually triggered when you are reaching near end of available data. So it should not matter if you get 15 or 20 items as next fetch would be triggered when you scroll nearly till the end.
Unless you have some specific use-case, then more information would be needed.
other-emeraldOP•3y ago
i see i will likely need to focus on server side filtering. regarding your comment about it not mattering, is this referring to an infinite scroll setup? my issue with filtering on the frontend is some pages have no results if all the results on that page are filtered out for example. for arguments sake, would filtering on the frontend be a special use case that would require manually readjusting the order of the remaining results or would there be a better way to handle it? lets say for example i only had access to the frontend due to company reasons or something like that and was just making an MVP
molecular-blue•3y ago
Well a general rule is that whenever you add
pagination to an endpoint, you should also handle sorting and filtering there.
It would not recommend implementing part of it on the server and part on client cause as you mentioned you might end up with a page of useless data.
If you really need to for a POC, you could add more logic to the queryFn directly. Filter data there and fetch next page If needed before returning it.
Still I would say that is not viable for a real use-case.other-emeraldOP•3y ago
Isn’t the select function designed for filtering data before returning it?
molecular-blue•3y ago
Select is not designed to
filter, but rather to subselect part of the data structure or change the shape of data.other-emeraldOP•3y ago
If a particular endpoint will always need data to be modified after retrieval do you think I should have an api function that utilizes tanstack and then modified the data as needed? should the modified data be put in a pinia store or would that be redundant since most of the data is already cached in tanstack?
molecular-blue•3y ago
If it always needs modification, do it in queryFn, so modified value will be cached. Pinia is not needed for this.
other-emeraldOP•3y ago
I am using orval to generate my vue query code: https://orval.dev/guides/vue-query
Since it does not easily support modifying the queryFn would the next best thing be to create a vue query hook that utilizes two vue query hooks data from orval to do some computation of the data and return that? or should i just use a computed variable?
other-emeraldOP•3y ago
one thing i did not mention in my message on 5/30 is that I am not just modifying an endpoint's output but merging two endpoint's output
molecular-blue•3y ago
I would say that you your hook/composable should always return a union/combination of multiple endpoints, then you should implement it in
queryFn. Maybe you should request a feature in the lib you are using.