React-ApolloでGraphQLエラーを処理する方法は？

Question

私はサーバー上の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 
      } 
     }` 

エラーのオブジェクト全体をクライアントで処理するにはどうすればよいですか？

Answer 1

突然変異を作成すると、Apolloクライアントは約束を返します。その約束からの誤りは、突然変異の結果として得られる約束のキャッチブロックでアクセスすることができる。下の私の例を見てください。

私のログイン突然変異からのエラーがある場合、返される約束の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) 
);