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()

useMutation()

s and

onSuccess

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

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

mutateAsync

return type!

Jump to solution

Call and await multiple mutations within one clientside procedure

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()

useMutation()

s and

onSuccess

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

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

mutateAsync

return type!

Jump to solution

Call and await multiple mutations within one clientside procedure

Similar Threads

Call and await multiple mutations within one clientside procedure

Similar Threads

Similar Threads

Similar Threads