无法处理 React ApolloClient 中的错误答案

【问题标题】：Cannot handle error in React ApolloClient无法处理 React ApolloClient 中的错误
【发布时间】：2019-11-29 19:22:05
【问题描述】：

我正在尝试使用此身份验证服务器示例来比较真实世界的应用程序，我从中获取一些数据。但是我无法捕获客户端错误，因为Apollo Client 将自己的异常发送到控制台。

我的示例服务器比较输入和“数据库”用户和密码，并返回一个字符串响应，如果没有匹配则抛出错误。

这是我的前端代码：

import React from "react";
import ReactDOM from "react-dom";
import ApolloClient, { gql } from "apollo-boost";

import "./styles.css";

class App extends React.Component {
  state = {
    username: "",
    password: "",
    message: ""
  };
  render() {
    return (
      <div className="App">
        <form onSubmit={this.submitForm.bind(this)}>
          <h1>Login</h1>
          <div className="formControl">
            <label htmlFor="username">
              Username&nbsp;
              <input
                id="username"
                value={this.state.username}
                onChange={this.changeInput.bind(this)}
              />
            </label>
          </div>
          <div className="formControl">
            <label htmlFor="password">
              Password&nbsp;
              <input
                id="password"
                value={this.state.password}
                onChange={this.changeInput.bind(this)}
              />
            </label>
          </div>
          <button>Login</button>
        </form>
        <p>{this.state.message}</p>
      </div>
    );
  }

  changeInput(e) {
    this.setState({ [e.target.id]: [e.target.value] });
  }

  async submitForm(e) {
    e.preventDefault();
    const client = new ApolloClient({
      uri: "https://5fbqp.sse.codesandbox.io/graphql"
    });

    const CHECK_USER = gql`
      query {
        login(user: "${this.state.username}", pass: "${this.state.password}")
      }
    `;
    const { data, error, loading } = await client.query({ query: CHECK_USER });
    // The following lines are being completely ignored.
    if (loading) this.setState({ message: "Validating credentials" });
    if (error) this.setState({ message: error });
    if (data) console.log(data);
    console.log("Done");
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

前端沙盒：https://codesandbox.io/s/magical-tesla-zp7hp
后端沙盒：https://codesandbox.io/s/sharp-bartik-5fbqp
GraphiQL 用户界面：https://5fbqp.sse.codesandbox.io/graphql

我尝试了不同的方法来实现，似乎这个 NPM 包是使用 GraphQL API 的“最佳解决方案”。

我也阅读了很多关于这个包的错误处理，但我不知道如何应用到这个项目。在我的真实示例中，我使用 Context API 来管理身份验证。

感谢任何实现错误处理或其他任何内容的 cmets。

【问题讨论】：

你试过这个函数中的try catch语句吗？？
@ShubhamVerma，是的，我有。结果相同。

标签： javascript node.js reactjs express graphql

【解决方案1】：

我刚刚根据Apollo React documentation - Error handling 将query() 函数内errorPolicy 的默认值更改为'all' 就像这样：

const CHECK_USER = gql`
    query {
        login(user: "${this.state.username}", pass: "${this.state.password}")
    }
`;
const { data, error, loading } = await client.query({ 
    query: CHECK_USER,
    errorPolicy: 'all'
});

它在开发者工具控制台中显示相同的错误，但现在它允许应用程序在出现错误时继续运行。

【讨论】：