Apollo客户端不显示错误消息

问题描述

我已经配置并设置了功能齐全的express-nextjs-graphql-apollo应用程序，该应用程序可以登录/注销用户，并且可以完美地执行CRUD.最后也是非常重要的一步是在客户端显示错误消息.

I have configured and set up a fully functional express-nextjs-graphql-apollo app that can login/logout a user, and perfectly do CRUD.The last and very important step is to display error messages on client-side.

到目前为止，我仅在控制台中收到此红色错误: POST http://localhost:3000/graphql 500(内部服务器错误)

So far, I'm only getting this red error in a console: POST http://localhost:3000/graphql 500 (Internal Server Error)

例如，登录表单验证.如果未提供任何输入，则应该会收到无效的输入错误消息，或者，如果电子邮件格式不正确，则 E-Mail无效.

For example, a login form validation. When no input is provided, it's supposed to get an invalid input error message, or E-Mail is invalid if email format is incorrect.

以下变异代码在graphql中进行了测试 localhost:3000/graphql :

The following mutation code tested in graphql localhost:3000/graphql:

mutation {
  login(userInput: {email:"" password:""}){
    userId
  }
}

返回以下消息.我实际上希望此消息显示在客户端上.

returns the message below. And I actually want this message to be displayed on client.

{
  "errors": [
    {
      "message": "Please provide input.",
      "locations": [
        {
          "line": 2,
          "column": 3
        }
      ],
      "path": [
        "login"
      ]
    }
  ],
  "data": null
}

我还尝试使用onError在Mutation组件内的客户端上显示错误消息:

I also tried displaying error messages on client inside Mutation component with onError:

    onError={error => {
        console.log("ERROR in SigninBox component ", error);
      }}

仅在控制台中显示以下错误消息:响应不成功:收到状态码500

Which only shows this error message in a console: Response not successful: Received status code 500

这是我在服务器上设置'express-graphql'软件包的方式:

This is how I setup up the 'express-graphql' package on my server:

  server.use(
    "/graphql",
    graphqlHTTP({
      schema: graphQlSchema,
      rootValue: graphQlResolvers,
      graphiql: true,
      customFormatErrorFn(err) {
        if (!err.originalError) {
          return err;
        }
        const data = err.originalError.data;
        const message = err.message || "An error occurred.";
        const code = err.originalError.code || 500;
        return {
          message: message,
          status: code,
          data: data
        };
      }
    })
  );

登录解析器:

  login: async ({ userInput }) => {
    if (
      validator.isEmpty(userInput.email) ||
      validator.isEmpty(userInput.password)
    ) {
      throw new Error("Please provide input.");
    }

    if (!validator.isEmail(userInput.email)) {
      throw new Error("E-Mail is invalid.");
    }
    if (
      validator.isEmpty(userInput.password) ||
      !validator.isLength(userInput.password, { min: 5 })
    ) {
      throw new Error("Password too short!");
    }

    const user = await User.findOne({ email: userInput.email });
    if (!user) {
      const error = new Error("User does not exist!");
      error.code = 404;
      throw error;
    }
    const isEqual = await bcrypt.compare(userInput.password, user.password);
    if (!isEqual) {
      throw new Error("Password is incorrect!");
    }
    const token = jwt.sign(
      { userId: user.id, email: user.email },
      "somesupersecretkey",
      {
        expiresIn: 1000
      }
    );
    return { userId: user.id, token: token, tokenExpiration: 1 };
  }

客户端:

import { Mutation, withApollo } from "react-apollo";
import gql from "graphql-tag";
import redirect from "../lib/redirect";
import { setCookie } from "../helpers/cookie";

const SIGN_IN = gql`
  mutation login($email: String!, $password: String!) {
    login(userInput: { email: $email, password: $password }) {
      token
    }
  }
`;

const Signin = ({ client }) => {
  let email, password;

  return (
    <Mutation
      mutation={SIGN_IN}
      onCompleted={data => {
        setCookie("token", data.login.token);
        client.cache.reset().then(() => {
          redirect({}, "/admin");
        });
      }}
      onError={error => {
        console.log("ERROR in SigninBox ", error);
      }}
    >
      {(login, { data, error }) => (
        <div>
          <form
            onSubmit={e => {
              e.preventDefault();
              e.stopPropagation();
              login({
                variables: {
                  email: email.value,
                  password: password.value
                }
              });
              email.value = password.value = "";
            }}
          >
            <div>
              <h1>Admin Page Login</h1>
            </div>
            <div className="form-label-group">
              <input
                className={`form-control ${error ? "is-invalid" : ""}`}
                name="email"
                id="inputEmail"
                placeholder="Email"
                ref={node => {
                  email = node;
                }}
              />
              <label htmlFor="inputEmail">Email address</label>
              {error && (
                <div className="invalid-feedback">
                  No user found with that information.
                </div>
              )}
            </div>

            <div>
              <input
                name="password"
                id="inputPassword"
                placeholder="Password"
                ref={node => {
                  password = node;
                }}
                type="password"
              />
              <label htmlFor="inputPassword">Password</label>
            </div>
            <button type="submit">Login</button>
          </form>
        </div>
      )}
    </Mutation>
  );
};
export default withApollo(SignIn);

我也尝试了onError检查:

I also tried this onError check:

onError={({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
     graphQLErrors.map(({ message, locations, path }) =>
       console.log(
         `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
       )
     );
  if (networkError) console.log(`[Network error]: ${networkError}`);
}}

基本上返回了相同的错误消息: [网络错误]:ServerError:响应失败:收到状态码500

That basically returned the same error message: [Network error]: ServerError: Response not successful: Received status code 500

我的目标是显示通常会从来自我的解析器的graphql localhost:3000/graphql 中收到的消息，例如: E-Mail is invalid ，请提供输入内容.等如何获取此消息并发送给客户端onError处理程序?

My goal is to show the message that I would normally get in graphql localhost:3000/graphql which comes from my resolver, eg: E-Mail is invalid, Please provide input. or etc.How do I get this message to be sent to the client onError handler?

推荐答案

进行了一些研究之后，我意识到错误本身就是一个对象

After doing some research I realized that the error itself is an object

onError={error => {
  console.log("ERROR in SigninBox ", { error });
}}

错误消息存储在 error.networkError.result.errors [0] .message

这篇关于Apollo客户端不显示错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！