Refetch data without XHR request

[gdelacruzfdez]

Hello,
I have a button that makes a request using refetch. I would like that the second time refetch is called, useQuery should return the cached result and don't trigger again the request.

How can I do this? I tried setting staleTime to infinity, but it doesn't work. I'm trying with this but it stills requery the data when I call refetch.

  const queryResult = useQuery(
    ['alarms', formValues],
    fetchAlarms,
    {
      enabled: false,
      staleTime: Infinity,
      cacheTime: Infinity
    }
  );

[TkDodo]

I’m not following what you want to achieve 100%. You’re already asking for a solution (calling refetch) rather than describing the problem you want to solve. In my experience, you only need refetch if you want to make a request to the server with the exact same payload as the previous request.

useQuery will always return data from the cache with staleTime: infinity if you enable the query. Since you have formValues I guess you want to submit a form or perform some filtering. I would suggest to disable the query only as long as formValues are empty. When the user clicks submit, you set the formValues, the query becomes enabled and the query fetches once (and then no longer due to infinite staleTime). This is much more declarative than the imperative refetch.

[gdelacruzfdez]

Thanks for your answer! Yes, what I wanted to do is to send a form that takes some time to process in the backend, but for the same parameters always returns the same values. I didn't think about the possibility of updating formValues when sending the form instead of calling refetch, and then make useQuery depend on this. I think this approach will work, thanks a lot!