this my code

React

const EXCHANGE_RATES = gql`
  mutation {
    signUp(lastName: "Amasia")
  }
`;
const HandlerRequest = () => {
  const [loading, { data }] = useMutation(EXCHANGE_RATES);

  console.log('apollo', data);

  return <p>apollo</p>;
};

Schema

  gql`
  extend type Mutation {
    signUp(
      lastName: String!
    ): String!
  }
`;

Resolvers

Mutation: {
    signUp: async (
      _,
      { lastName}
    ) => {
      try {
        console.log(lastName)
        return lastName;    
      } catch (error) {
        return 'error';
      }
    },
  },

useMutation always returns data undefined but at graphql playground are working.what am i doing netak ?.

this my code

React

const EXCHANGE_RATES = gql`
  mutation {
    signUp(lastName: "Amasia")
  }
`;
const HandlerRequest = () => {
  const [loading, { data }] = useMutation(EXCHANGE_RATES);

  console.log('apollo', data);

  return <p>apollo</p>;
};

Schema

  gql`
  extend type Mutation {
    signUp(
      lastName: String!
    ): String!
  }
`;

Resolvers

Mutation: {
    signUp: async (
      _,
      { lastName}
    ) => {
      try {
        console.log(lastName)
        return lastName;    
      } catch (error) {
        return 'error';
      }
    },
  },

useMutation always returns data undefined but at graphql playground are working.what am i doing netak ?.

• javascript
• react-apollo
• graphql-js
• apollo-server

Share Improve this question Follow asked Nov 19, 2019 at 5:45 EdgarEdgar 6,8781111 gold badges3838 silver badges7474 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

useMutation should return a function to call to execute the mutation. Generally you would hook this up to a button or something. It seems a little odd to use a mutation that executes automatically when the ponent loads.

const HandlerRequest = () => {
  const [getExchangeRates, { data }] = useMutation(EXCHANGE_RATES);
  // Load data if not already loaded.
  if (!data) { getExchangeRates(); }
  console.log('apollo', data);

  return <p>apollo</p>;
};

Using the above you'll likely see two console.logs.

1. The initial ponent render, should be undefined
2. When getExchangeRates returns and data updates the ponent will be rerendered and the log will be called again.

Use the onCompleted callback and remember to pass the data object:

  const [loading, { data }] = useMutation(EXCHANGE_RATES, {
    onCompleted: (data) => {
      console.log(data);
    }
  });

Your usage of useMutation is not quite correct. Here is the correct usage. You also need to execute the mutation. data will be undefined until then.

const SomeComponent = () => {
  const [doExchangeRates, { data, loading, error }] = useMutation(
    EXCHANGE_RATES,  
    onCompleted: (data) => {  console.log({data});  }
); 

  return <p onClick={doExchangeRates} >apollo</p>;
};

You can see full docs on useMutation here.