Question

在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在变异后获得了预期的结果，为什么结果不是上面记录的控制台？

Answer 1

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

这个签名是这样的：

withApollo(MyForm)

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

将“客户端”的支柱添加到MyForm组件。在表单提交时，您需要访问此prop，并从那里调用变异。因此，在您的表单提交处理程序中，您最终会得到以下内容：

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 Mutation之后结果记录为未定义？

1 个答案: