How to request only once when clicking the query button?

[vaynevayne]

Expectation: every time an onSubmit is triggered, a query is required, regardless of whether the fetchOptions changes or not

This is my code, and there's a problem that when the form changes, it triggers two queries

What should I do just once? Testers do not accept twice

const [form,setForm] = useState()

  const url = '/roiDetail'
  const {
    data: res,
    isFetching,
    error,
    refetch,
  } = useQuery({
    queryKey: [url, fetchOption],
    queryFn: () => axios.post(url, fetchOption),
  })

 <FormContainer
        onSubmit={(newForm: any) => {
          setForm(newForm)
          refetch()
        }}
        form={form}
      />

[TkDodo]

only call refetch if fetchOptions haven't changed.

[vaynevayne]

Do I need to judge for myself whether fetchOptions has changed?

Is it OK to go like this? Is there a better way? @TkDodo

 <FormContainer
        onSubmit={(newForm: any) => {
             const hasChanged = JSON.stringify(form) !== JSON.stringify(newForm)
             hasChanged ? setForm(newForm) :  refetch() 
        }}
        form={form}
      />

[TkDodo]

Do I need to judge for myself whether fetchOptions has changed?

yes because that's client state.

[vaynevayne]

As long as react-query supports custom queryKey comparison functions instead of write-dead serialization, this problem can be solved