sbbu•2mo ago

Call and await multiple mutations within one clientside procedure

hey all, does anyone know of a nice way to call & await multiple tRPC requests inside a procedure or within one mutation? reason being is i'm building a blockchain app, and we have to implement flows like this:

1. trigger a mutation on our server, recieve back data for a blockchain transaction
2. interact with the user's browser extension to send the tx on the blockchain
3. once it's complete, hit our servers again to update with completed tx data

1. trigger a mutation on our server, recieve back data for a blockchain transaction
2. interact with the user's browser extension to send the tx on the blockchain
3. once it's complete, hit our servers again to update with completed tx data

setting up a flow like this gets pretty complicated with a bunch of useMutation()s and onSuccess callbacks.. ideally it would really be something like

const { mutate } = useMutation({
  mutationFn: async () => {
    const txData = await api.firstMutation();
    const data = await doBlockchainStuff({ txData });
    await api.updateStuffOnOurServer({ data });
  }
})

const { mutate } = useMutation({
  mutationFn: async () => {
    const txData = await api.firstMutation();
    const data = await doBlockchainStuff({ txData });
    await api.updateStuffOnOurServer({ data });
  }
})

is something like this possible? so far i've been setting up chains of onSuccess callbacks but doing it that way can get really convoluted with flows like this

Solution:

looks like i can do this after all with the mutateAsync return type!

Jump to solution

1 Reply

Solution

sbbu•2mo ago

looks like i can do this after all with the mutateAsync return type!