How do you get the return data from a mutation?

[joshuarobs]

So when you call mutations in Graphql, you can ask for some return data. How do you do that with this library? I see no way to get what the server has sent back after making a mutation.

[revskill10]

I made a custom useMutation hook, which allows returning data, loading and error from mutation

import useClient from "./useClient";
import gql from "graphql-tag";
import { useState } from "react";

function useMutate(
  url: string,
  mutation: any,
): [any, { data: any; error: any; loading: any }] {
  const client = useClient(url);
  const gqlQuery = gql(mutation);
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  const mutate = async (variables: any) => {
    try {
      setLoading(true);
      const res = await client.mutate({
        mutation: gqlQuery,
        variables
      });
      setLoading(false);
      if (res.data) {
        setData(res.data);
      } else {
        // setError(JSON.stringify(res.errors, Object.getOwnPropertyNames(res.errors))))
        console.log(res)
      }
    } catch (e) {
      // console.log(e);
      setLoading(false);
      setError(e);
    }
  };

  return [mutate, { data, error, loading }];
}

export default useMutate;

[joshuarobs]

@revskill10 Thanks you for that custom hook. I actually managed to figure it out but I didn't use a custom hook instead. How does your custom hook differ from passing in update and using mutationResult?

[revskill10]

@joshuarobs What do you mean by passing in update and using mutationResult ?

The usage is simple:

const [mutate, { data, error, loading}] = useMutate(url, mutationQuery)

[joshuarobs]

@revskill10 This is what I am using, which I found from the readme:

const [createUser, { loading }] = useMutation(CREATE_USER_MUTATION, {
    update: (proxy, mutationResult) => {
      console.log('mutationResult: ', mutationResult);
    },
    variables: {
      firstName,
      lastName,
      email,
      password,
    },
  });

The result from the mutation is in the mutationResult argument. But it only gets the result (if successful). I have no way that I know of where I can get the error message if the mutation fails.

I'm going to try your custom hook since it appears as though it can support returning the error. Also what is useClient in your custom hook?

[revskill10]

@joshuarobs My useMutate is used differently.

const onClick = () => {
   mutate(variables)
}

This library force variables in the argument of the hook, which i see is not flexible enough.
THe useClient is just a hook to return the Apollo Client.