javascript - 无法处理 React ApolloClient 中的错误

Question

我正在尝试使用此身份验证服务器示例来比较现实世界的应用程序，我从中获取一些数据。但自 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 UI:https://5fbqp.sse.codesandbox.io/graphql

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

我还阅读了很多有关此包的错误处理的内容，但我不确定如何应用于此项目。在我的实际示例中，我使用 Context API 来管理身份验证。

任何实现错误处理或其他任何内容的评论都将受到赞赏。

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

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