How to make a query and a mutation in the same time with GraphQL?

Question

Hello guys I am new in this Apollo - GraphQL and I am using I try to implement my server with my React Native app.

While I am trying to build the Password Change functions I get the following error 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)

My code looks like this

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);
        })
}

And here is my query and my mutation

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

If you're using the graphql HOC, you'll need to use compose to combine multiple queries/mutations. For example:

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);

Keep in mind that the HOC will pass down whatever props it receives by default, but if you provide a function for props in the configuration, it's on you to do so by utilizing ownProps . Also, when using compose , the order of the HOCs matters if any of them are dependent on the others for props. That means as long as your query comes first inside compose , you can use the query HOC's data inside your mutation's configuration.