如何使用GraphQL同时进行查询和变异？

Question

大家好，我是这个Apollo-GraphQL的新手，我正在尝试使用React Native应用程序实现服务器。

当我尝试构建密码更改功能时，出现以下错误this.props.resetPassword is not a function. (In 'this.props.resetPassword(_id, password)', 'this.props.resetPassword' is undefined) this.props.resetPassword is not a function. (In 'this.props.resetPassword(_id, password)', 'this.props.resetPassword' is undefined)

我的代码看起来像这样

toSend() {
    const { _id } = this.props.data.me;
    const { password } = this.state;
    console.log(_id, password)
    this.props
        .resetPassword(_id, password)
        .then(({ data }) => {
            return console.log(data);
        })
}

这是我的查询和突变

export default graphql(
    gql`
    query me {
      me {
        _id
      }
    }
  `,
    gql`
    mutation resetPassword($_id: String!, $password: String!) {
      resetPassword(_id: $_id, password: $password) {
        _id
      }
    }
  `,
    {
        props: ({ mutate }) => ({
            resetPassword: (_id, password) => mutate({ variables: { _id, password } }),
        }),
    },
)(PasswordChange);

Answer 1

如果使用graphql HOC，则需要使用compose组合多个查询/突变。 例如：

const mutationConfig = {
  props: ({mutate, ownProps}) => ({
    resetPassword: (_id, password) => mutate({ variables: { _id, password } }),
    ...ownProps,
  })
}

export default compose(
  graphql(YOUR_QUERY, { name: 'createTodo' }),
  graphql(YOUR_MUTATION, mutationConfig),
)(MyComponent);

请记住，默认情况下，HOC会传递它收到的所有道具，但是如果您在配置中为props提供功能，则必须利用ownProps来ownProps 。 同样，在使用compose ，如果HOC的任何一个依赖于其他道具，那么HOC的顺序也很重要。 这意味着，只要您的查询首先出现在compose ，您就可以在突变的配置中使用查询HOC的data 。