Question about select option
Hello,
I struggle to use react query select option for a specific use case
I have a list of data which cames from a fetch. Then I have radio buttons which have the role to include or exclude a part of the data.
For exemple on radio button will include some data. Then another radio button will exclude them.
I manage to filter the data by using the select option.
The problem is that I need the latest filtered data array to accumulate the radio button filter.
When I apply one filter, It filters good. But as soon as I apply a second one, the second filter Is based on the data from the cache and no the latest.
My need : applying accumulatives filters. When data A is filtered. B will filter on A. When data B IS filtered, C will filter on B etc.
9 Replies
robust-apricotOP•3y ago
To be simplify: is it possible to get the latest filtered data when using select ?
correct-apricot•3y ago
Not as far as I'm aware, no. The select function runs against the return value of the query function
robust-apricotOP•3y ago
I see. Thank you. Do you have another technical Idea on how I Can apply cumulatives filter please ?
provincial-silver•3y ago
Hi, one way is to perform the filtering in the queryFn. This would require to pass the filter in the queryKey too. This way, you would benefit from cached data whenever you re-use an existing filter.
robust-apricotOP•3y ago
Ok. Do you have an example or something like that for me to be inspired ?
provincial-silver•3y ago
I think you could start with https://tkdodo.eu/blog/effective-react-query-keys
Effective React Query Keys
Learn how to structure React Query Keys effectively as your App grows
provincial-silver•3y ago
When clicking on your radio buttons you, you generate new query keys. You would then access those keys in the queryFn and retrieve the "current" filters.
robust-apricotOP•3y ago
Ok thank you. So the select option isn't a good Idea according to you ?
provincial-silver•3y ago
Well maybe not for this use-case.
If I'm right, the following case is possible :
- click on first radio button => filter 1 applied
- click on second radio button => filter 2 applied
(each time a request is made)
- click once again on first radio button => filter 1 applied BUT with filters in the query key, you would benefit from the previous cached data and thus no request would be made