Как сделать запрос и мутацию одновременно с GraphQL?

Question

Привет, ребята. Я новичок в этом Apollo - GraphQL и использую его. Я пытаюсь реализовать свой сервер с помощью приложения React Native.

Когда я пытаюсь создать функции смены пароля, я получаю следующую ошибку 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. Кроме того, при использовании compose порядок HOC имеет значение, если какой-либо из них зависит от других для реквизита. Это означает, что пока ваш запрос идет первым внутри compose, вы можете использовать запрос HOC data в конфигурации вашей мутации.