无法处理 React ApolloClient 中的错误

Posted 2023-03-08

【中文标题】无法处理 React ApolloClient 中的错误

【英文标题】：Cannot handle error in 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，是的，我有。结果相同。

【参考方案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'
);

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