如何使用 React-Apollo 处理 GraphQL 错误？答案

【问题标题】：How to handle GraphQL errors with React-Apollo?如何使用 React-Apollo 处理 GraphQL 错误？
【发布时间】：2018-01-28 22:47:13
【问题描述】：

我正在尝试使用服务器上的 Express + Mongoose 和客户端上的 React + Apollo 从 Rest API 迁移到 GraphQL。

async resolve(_, { email, password, passwordConfirmation }) { // Sign Up mutation
            const user = new User({ email });
            user.password = password;
            user.passwordConfirmation = passwordConfirmation;
            try{
                const createdUser = await user.save();
                return createdUser;
            } catch(error) {
                console.log(error); // Returns errors object like {email: {message: 'E-mail is required'}}
                throw new Error(error); // But on the client there is a string with all errors
            }
        }`

如何处理客户端的整个错误对象？

【问题讨论】：

标签： javascript reactjs graphql apollo

【解决方案1】：

当您进行突变时，Apollo 客户端会返回一个承诺。可以在突变的结果承诺的 catch 块中访问来自该承诺的错误。请参阅下面的示例。

如果我的登录突变出现错误，我将在返回的 promise 的 catch 块中访问它们，然后将这些错误设置为组件中的本地状态。如果存在错误，则可以从那里渲染错误，或者如果您愿意，甚至可以将其传递给要渲染的子组件。请注意，错误通常以数组的形式返回。

class LoginForm extends Component {
  constructor(props) {
    super(props);

    this.state = { errors: [] };
  }


  onSubmit({ email, password }) {
    this.props.mutate({
      variables: { email, password },
      refetchQueries: [{ query }]
    }).catch(res => {
      const errors = res.graphQLErrors.map(error => error.message);
      this.setState({ errors });
    });
  }

  render() {
    return (
      <div>
        <AuthForm
          errors={this.state.errors}
          onSubmit={this.onSubmit.bind(this)}
        />
      </div>
    );
  }
}

export default graphql(query)(
  graphql(mutation)(LoginForm)
);

【讨论】：

【解决方案2】：

您还可以在 react-apollo 中使用 renderProps，它会在第二个参数中为您的对象提供错误和加载状态。

import React, { Component } from 'react';
import { Mutation } from 'react-apollo';
import gql from 'graphql-tag';
import Error from './ErrorMessage';

const LOGIN_MUTATION = gql`
  mutation LOGIN_MUTATION($email: String!, $password: String!) {
    signin(email: $email, password: $password) {
      id
      email
      name
    }
  }
`;

class Login extends Component {
  state = {
    name: '',
    password: '',
    email: '',
  };
  saveToState = e => {
    this.setState({ [e.target.name]: e.target.value });
  };
  render() {
    return (
      <Mutation
        mutation={LOGIN_MUTATION}
        variables={this.state}
      >
        {(login, { error, loading }) => (
          <form
            method="post"
            onSubmit={async e => {
              e.preventDefault();
              await login();
              this.setState({ name: '', email: '', password: '' });
            }}
          >
            <fieldset disabled={loading}>
              <h2>Sign into your account</h2>
              <Error error={error} />
              <label htmlFor="email">
                Email
                <input
                  type="email"
                  name="email"
                  placeholder="email"
                  value={this.state.email}
                  onChange={this.saveToState}
                />
              </label>
              <label htmlFor="password">
                Password
                <input
                  type="password"
                  name="password"
                  placeholder="password"
                  value={this.state.password}
                  onChange={this.saveToState}
                />
              </label>

              <button type="submit">Sign In!</button>
            </fieldset>
          </form>
        )}
      </Mutation>
    );
  }
}

export default Login;

希望这会有所帮助！

【讨论】：