useMutation with data from useQuery

[aminick]

I have a situation where my mutation needs to involve some data from a useQuery.

I could think of chaining the "mutate" in the "onSuccess" callback of useQuery, but this already sounds like an ongoing callback hell.

Is there a better way to handle such chaining/dependent situations?

Thanks.

[TkDodo]

I don’t quite follow. Do you have an example maybe?

[aminick]

const useCustomHook = () => {
  const {data} = usePost(id);
  const {mutate} = useUpatePost(id);

  const action =  mutate({...data, extraData: true}); <--

  return action;
}

Theoretically, the "action" can be called before the usePost responses, which makes this custom hook error prone.
I would like to have "mutante" wait for the response from usePost.

I could also do something like:

const [active, setActive] = useState(false);
usePose(id, {enable: active, onSuccess: (data) => mutate({...data, extraData: true})});

return () => setAction(true);

But this just feels very bloated.
Any suggestions TkDodo? Thanks.

[TkDodo]

as discussed on Discord, queryClient.fetchQuery is what you'd want. It will resolve the promise to data from the cache, and re-fetch if it's stale:

const { mutate } = useMutation(
  async (variables) => {
     const data = await queryClient.fetchQuery(key);
     return axios.post(...)
  }
)

[motss]

@TkDodo I have a use case which can be quite similar to this thread where I have a component contains useQuery() and useMutation() and the useQuery() will run first when the component first renders but the mutation only runs on button click. When I click on the button, if the query takes longer than usual, the mutation needs to be queued until the query settles because the mutation depends on the result of the query.

// here is the reduced test case to demonstrate my use case stated above.
export function Component() {
  const { data } = useQuery({ ... });
  const mutation = useMutation({ ... });
  
  const handleClick = async () => {
    // Here I need to wait for the query to settle so that I can get `data.id` to call the mutation.
    // I was using useEffect() to achieve that but not sure if there is another way.
    //
    // todo: wait for the query before calling mutation
    // 
    // pseudocode:
    // const { id } = await query;
    // await mutate({ id });

    await mutation.mutateAsync({ id: data.id });
  };
  
  return (
    <button onClick={handleClick}>Click me</button>
  );
}

[TkDodo]

if the mutation depends on the result of the query - don't let the mutation fire until it's ready, e.g. by disabling the button. Why would I want to click the button if I don't know what it's gonna do because what it does depends on the query that is in progress? What if the query errors and I already clicked the button ... ?

[motss]

if the mutation depends on the result of the query - don't let the mutation fire until it's ready, e.g. by disabling the button. Why would I want to click the button if I don't know what it's gonna do because what it does depends on the query that is in progress? What if the query errors and I already clicked the button ... ?

That actually makes sense and reduces the complexity. Thanks for the suggestion.