Missing "disabled" option on useMutation?

[kaumac]

I need to get data from a query and only run a mutation once the data from that query is available, but it sees like there's no "disabled" option on useMutation?

I also can't do it conditionally because its a hook, any ideas on how to achieve this?

`
export const useUpdatePatient = () => {
const { data: patient } = useCurrentPatient()

return useMutation((vars: UpdatePatientVars) => {
const url = /patients/patients/${patient?.id}

return request.put<UpdatePatientResponse>(url, vars)

}, {disabled: !patient?.id})
}
`

[TkDodo]

There isn't really a need to disable a mutation, because mutations don't run automatically when you call useMutation, as opposed to useQuery, which does that.

useMutation returns a mutate function. You can invoke that function whenever you want. So if you don't have a patient id yet, don't call mutate ;)

one way to achieve this is to disable the button that would trigger the mutation (or whatever other ui element does that)

[ori-shalom]

The mutation function already knows what dependencies it requires to perform the mutation.
While it is possible to extract the logic out of the mutation to the button, it can cause duplicate logic and it require the user of the mutation to know what dependencies this mutation has.
It would have been cleaner if useMutation could have exposed this information directly to the user.

Consider the very common use case of using a mutation that call an API using an auth token.

The mutation can looks like this:

export function useCreateTask() {
  const token = useAuthToken(); // init as undefined

  return useMutation({
    mutationFn: (task: Task) => {
      // call an API with task in the body and auth token as header.
    },
  });
}

Now to use this mutation, the user need to be aware of the implementation details of useCreateTask and must check first that an auth token is available like this:

export function CreateTask() {
  const [task, setTask] = useState('');
  const { mutate } = useCreateTask();
  const token = useAuthToken(); // implementation detail of useCreateTask which the caller must be aware of when using the mutation!

  return (
    <>
      <input value={task} onChange={e => setTask(e.target.value)} />
      <button onClick={() => !token && mutate()} disabled={!token}>Add Task</button>
    </>
  );
}

Now if enabled/disabled feature would have been available in useMutation, code could have been much cleaner and the caller of the useCreateTask doesn't need to be aware of its internal dependencies.

For example the mutation could have looked like this:

export function useCreateTask() {
  const token = useAuthToken();

  return useMutation({
    mutationFn: (task: Task) => {
      // perform the mutation using auto token
    },
    enabled: !!token
  });
}

And the component could have looked like this:

export function CreateTask() {
  const [task, setTask] = useState('');
  const { enabled, mutate } = useCreateTask();

  return (
    <>
      <input value={task} onChange={e => setTask(e.target.value)} />
      <button onClick={mutate} disabled={!enabled}>Add Task</button>
    </>
  );
}

I think this is far cleaner design having the mutation hook encapsulating its dependencies in such a way that the user don't need to bother with explicitly checking them whenever calling the mutation.

The above is a very simple example where the mutation has a single dependency on an auth token but in reality mutations might have far more complex dependencies and if this mutation is used in more than one place in the application it can be very error prone to pass the responsibility for the check to the caller when useMutation can solve it much more elegantly in a single place.

[TkDodo]

You can literally compose this with your custom hook

export function useCreateTask() {
  const token = useAuthToken();

  const mutation = useMutation({
    mutationFn: (task: Task) => {
      // perform the mutation using auto token
    },
  });

  return { mutation, enabled: !!token }
}

We will not build this into React Query. What should happen if mutate gets called while enabled is false because you forget to disable your button? That's an invariant where we would need to go into some sort of error state.