How to use react-query for a request with filters
I have created a small example in codeSandBox. (https://codesandbox.io/s/loving-tamas-lxprg4?file=/src/App.js)
I want to use react-query in order to fetch data based on filters.
In the example, there are two components the <Filters/> where the filters and the search button, and the <DisplayData/> where the fetched data is going to be displayed.
The inputs in <Filters/> are controlled and my problem is that I can't find a solution without using two different states for the same values (filters).
I have added as query keys the filters in order to re-trigger the query each time the filters change, so I need one state to keep the filters for query keys. I set this state at the click of the search button.
The other state is for the values for controlled inputs. And set the state on each change of the inputs.
Is there someone who has a better solution?
I want to use react-query in order to fetch data based on filters.
In the example, there are two components the <Filters/> where the filters and the search button, and the <DisplayData/> where the fetched data is going to be displayed.
The inputs in <Filters/> are controlled and my problem is that I can't find a solution without using two different states for the same values (filters).
I have added as query keys the filters in order to re-trigger the query each time the filters change, so I need one state to keep the filters for query keys. I set this state at the click of the search button.
The other state is for the values for controlled inputs. And set the state on each change of the inputs.
Is there someone who has a better solution?
CodeSandboxchristosno
loving-tamas-lxprg4 by christosno using @tanstack/react-query, loader-utils, react, react-dom, react-scripts
