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 onSuccessonSuccess 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 onSuccessonSuccess 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 mutateAsyncmutateAsync 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 onSuccessonSuccess 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 onSuccessonSuccess 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 mutateAsyncmutateAsync return type!

Jump to solution

Call and await multiple mutations within one clientside procedure

Call and await multiple mutations within one clientside procedure

Continue the conversation

tRPC

Continue the conversation

tRPC

Similar Threads