为什么在 GraphQL 突变后结果记录未定义？答案

【问题标题】：Why are Results logging as undefined after a GraphQL Mutation?为什么在 GraphQL 突变后结果记录未定义？
【发布时间】：2018-06-07 17:08:50
【问题描述】：

在我的一个 redux-form onSubmit 组件中，我有以下内容：

const result = await helloSignup(values);
console.log(result);

helloSignup 正在按预期更改数据库，但 const result 当前记录为 undefined

为什么？

我的 HOC/突变 helloSignup：

export const HELLO_SIGNUP_MUTATION = gql`
mutation (
  $email: String!
  $code: String!
) {
  signup(authProvider: {
    emailAndCode: {
      email: $email
      code: $code
    }
  }) {
    token
    user {
      id
    }
  }
}
`;

export default graphql(
  HELLO_SIGNUP_MUTATION,
  {
    props: ({ mutate }) => ({
      emailAndCodeSignup: async (variables) => {
        const { data } = await mutate({ variables });
        const { token } = data.signup;
      },
    }),
  }
);

使用 GraphiQL，我可以看到我的 graphql 突变返回了所需的结果：

{
  "data": {
    "signup": {
      "token": "xxx",
      "user": {
        "id": "16"
      }
    }
  }
}

如果 GraphiQL 在变异后得到了想要的结果，为什么上面的控制台没有记录结果？

【问题讨论】：

你使用的是 react-apollo，对吧？我可以看看你是如何在组件级别启动突变的吗？ client.mutate 位
是的，我正在使用 react-apollo
在 App.js <ApolloProvider client={client}>

标签： reactjs graphql redux-form graphiql

【解决方案1】：

React-Apollo 为客户端查询和突变提供了一个名为 withApollo 的 HOC。

这个签名是这样的：

withApollo(MyForm)

https://www.apollographql.com/docs/react/basics/setup.html#withApollo

向 MyForm 组件添加一个“客户端”属性。在提交表单时，你会想要访问这个道具，并从那里调用突变。因此，在您的表单提交处理程序中，您最终会得到这样的结果：

https://www.apollographql.com/docs/react/basics/mutations.html#basics

onSubmit() {
  const { client } = this.props
  const options = {} // your mutation options
  // mutations ands queries return promises, 
  // so you must wait for their completion before accessing data
  client.mutate(
    HELLO_SIGNUP_MUTATION, 
    options
   ).then(({ data }) => (
     console.log('got data', data);
   )
  }
}

从 API 返回的数据应该在哪里

【讨论】：