docs: retrieving data from a mutation call

[ShashwatPS]

Area of Improvement

In the documentation linked below, the backend code returns data from the mutation call. Attached code for reference:

 return {
        user: {
          name: opts.input.name,
          role: 'ADMIN',
        },

However, even when the mutation is invoked on the client side, the data is not being retrieved. Attached code for reference:

export function MyComponent() {
  // This can either be a tuple ['login'] or string 'login'
  const mutation = trpc.login.useMutation();
  const handleLogin = () => {
    const name = 'John Doe';
    mutation.mutate({ name });
  };

I encountered difficulty fetching data from the backend code during the mutation. Therefore, I would like to add an example on the client side to address this issue.

Link to related docs

https://trpc.io/docs/client/react/useMutation

Additional information

There was no section in the documentation that explained the process of retrieving data during a mutation call on the client side. I attempted to implement this on my own but encountered issues with the asynchronous nature of the operation. Specifically, the data was not being resolved before the variable was being set. Therefore, when attempting to assign the variable from the returned data of the mutation call, it appeared as undefined.

👨‍👧‍👦 Contributing

• 🙋‍♂️ Yes, I'd be down to file a PR implementing the suggested changes!

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

[achrafl0]

Hey @ShashwatPS
You can get the result when using a useMutation by providing a onSuccess argument when calling mutate.

In your example it's be something like

  const handleLogin = () => {
    const name = 'John Doe';
    mutation.mutate({ name }, {
    	onSuccess: ({user}) => {
    		console.log("Just did a mutation on", user.name)
			// add this user to the context or whatever you need ! 
    	}
    
    });
  };