best practices passing path params to RQ useMutation hook

[crisfcodes]

I created a hook that will use a react-query useMutation behind the scenes, the hook will receive an ID to be used in the request like so:

const useMyHook = (id) => {
  return mutationFn: (payload) => {
    axios.post(`https://some-url/${id}`, payload)
  }
}

usually, I will pass the ID directly in the execution of useMyHook The thing is, the ID should be retrieved with an asynchronous process, so should I pass the ID in the mutate payload or should I handle the ID in a React.state and pass the value to useMyHook?

Using React.state

const MyComponent = () => {
  const [id, setId] = React.state(null);
  const { mutate } = useMyHook(id);

  getId().then(newId => {
    setId(newId)
    mutate(payload);
  });
}

Using the payload

// please note I change the hook implementation for using the payload in path parms
const useMyHook = () => {
  return mutationFn: (payload) => {
    axios.post(`https://some-url/${payload.id}`, payload)
  }
}

const MyComponent = () => {
  const { mutate } = useMyHook();

  someAsyncronousProcess().then(id => { mutate({ ...payload, id } }));
}

[nandorojo]

generally speaking, it's much easier to have all the params as close as possible to the mutation. so your second example is much better. there's no reason to force yourself to make id a state variable. instead, let the mutation receive it when it's called.

[TkDodo]

my rule of thumb is: if id could change with each invocation of mutate, I'd put it there. If it's "static", I pass it to useMutation. The id / payload split is usually good, but if an async thing is involved, you have an easier time to put it to mutate directly.