Query on click

[JesusTheHun]

I have a page with some states the user can change.
Once changes are made, he can save them.

To actually save the state, I need to query my API first, makes some computation, then perform a series of mutations.
Since I cannot conditionally query, I used the following pattern :

const MyComponent () => {

  [triggerSave, setTriggerSave] = useState(false);
  [someStateData] = useState([]); // modified by the user interacting with the page

  const { data } = useQuery(/* query using someStateData */);
  
  useEffect(() => {
  if (triggerSave, data) {
    // mutations & cie
    setTriggerSave(false);
  }
}, [triggerSave, data ]); // notice someStateData is missing

  return <button onClick={() => setTriggerSave(true)} >Save</button>
}

The problem is that I have no guarantee about the execution here, the user can click Save, then immediately change the state, triggering a new query before the previous save is done, triggering the effect again.

Is there any recommended pattern for this kind of scenarios ?

[ondrejvelisek]

Hi,
I believe you are looking for refetch funcion returned by useQuery.
https://react-query.tanstack.com/reference/useQuery
Alternativly dont use react-query at all.

I see react-query suitable for calls which you want to trigger by state change. In my experience most of scenarios but not all of them. This is your case.

with refetch

const MyComponent () => {

  [someStateData] = useState([]); // modified by the user interacting with the page

  const { refetch } = useQuery(/* query using someStateData */);
  
  const save = async () => {
      await refetch();
      // your mutations
  });

  return <button onClick={() => save(true)} >Save</button>
}

Alternativly withou react-query

const MyComponent () => {

  [someStateData] = useState([]); // modified by the user interacting with the page
  
  const save = async () => {
      await myComputation(someStateData);
      // your mutations
  });

  return <button onClick={() => save(true)} >Save</button>
}

Hope it helps. :)

[JesusTheHun]

My concern was the invalid execution of useEffect since changing the state would trigger the query again and therefore the hook.
But I've find my way. I call setTriggerSave(false) at the beginning of my effect, so if the user changes the state, the hook will return early.

[TkDodo]

If your query depends on someState, it should be part if the query key for multiple reasons:

• to get an automatic refetch when the dependency changes
• to get separate caching
• to avoid state closures

https://react-query.tanstack.com/guides/query-functions#query-function-variables

https://tkdodo.eu/blog/practical-react-query#treat-the-query-key-like-a-dependency-array

[JesusTheHun]

Thanks for your input, I already do that ;)

[TkDodo]

if you do that already, then why would you need a triggerSave boolean state at all ?

[JesusTheHun]

Because I want to save only when the user clicks the save button.

[TkDodo]

i think for that all you usually need is to update the state your query depends upon once the user hits the save button. like:

 function Todos() {
   const [filter, setFilter] = React.useState('')
 
   const { data } = useQuery(
     ['todos', filter],
     () => fetchTodos(filter),
     {
       // ⬇️ disabled as long as the filter is empty
       enabled: !!filter
     }
   )
 
   return (
       <div>
         // 🚀 applying the filter will enable and execute the query
         <FiltersForm onApply={setFilter} />
         {data && <TodosTable data={data}} />
       </div>
   )
 }

The FilterForm can hold the temporary state while the user fills out the form, and clicking submit updates some "more global" state.

Another, similar idea is to have state in the same component, but when clicking the save button, you e.g. serialize it to the url. The query could depend on useParams(), thus it will only re-fetch once the url params change, and you get sharable url state for free :)