query-key change refetch mix button click fetch

[Luncher]

Demo: https://stackblitz.com/edit/react-ts-rx5zo7

I want to trigger a request when the form is submitted, regardless of whether the content of the form changes at this time. But I don't want to trigger multiple requests. What should I do?

[TkDodo]

I don't understand the question and I don't know how to use the example 🤷

[Luncher]

@TkDodo ..

[TkDodo]

it's a question about how you store your local state and what you pass to react-query.

for the dropdown, it just works because there is only one state - what you select is automatically applied.

for the filter, you need "two states". one ephemeral one that has the text that the user types, and another one that gets set when the apply button is clicked. react-query only sees the one from when the apply button is clicked.

It doesn't have to be two useStates on the same level. I would write applied filters directly to the url. here is an old example (uses v2) but the concept is still the same. Or, you can have the form field be uncontrolled (without state) and only move it to local state when apply is hit.

It is also expected that the data will be queried once when the button is clicked, regardless of whether the input parameters have changed.

yeah that's a bit more tricky. I would probably just do an equals check when the button is clicked and call refetch if filters are equal, and if they are not equal, set them to state / the url.

[Luncher]

Thanks Reply :)

for the filter, you need "two states". one ephemeral one that has the text that the user types, and another one that gets set when the apply button is clicked. react-query only sees the one from when the apply button is clicked.

yeah, But if you need to verify the content of the filter in time, you can't do this.

yeah that's a bit more tricky. I would probably just do an equals check when the button is clicked and call refetch if filters are equal, and if they are not equal, set them to state / the url.

The solution you mentioned is a good idea. I have thought about this question for a long time, and I have several ideas:

1. Use imperative query and completely abandon declarative writing.
2. Add a time attribute to the state to ensure that a new query is triggered every time setState is set, but it will be a bit weird to write like this

[TkDodo]

yeah, But if you need to verify the content of the filter in time, you can't do this.

why wouldn't this work with verification? Treat he FilterForm with it's own internal state as a separate unit.

<FilterForm onApply={...} />

onApply should only be called if the input was submitted by the user and was valid. There, you take the input and put it into a state that react-query can see.

[Luncher]

Personally, I feel that wrapping a FilterForm is also overhead, and a user input state must be maintained in the FilterForm (in order to verify whether the input is valid). the total number of filter states has not changed