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

Question

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

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

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

为什么？

我的 HOC/mutation 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 突变，returns 期望的结果：

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

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

Answer 1

React-Apollo 为客户端查询和变更提供了一个 HOC，称为 withApollo。

这个签名是这样的：

withApollo(MyForm)

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

将 'client' 的属性添加到 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

返回的数据应该在哪里

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

Why are Results logging as undefined after a GraphQL Mutation?

reactjs

graphql

redux-form

graphiql