Apollo 客户端:如何简单地调试 400 代码错误? [英] Apollo client: How to simply debug a 400 code error?

问题描述

我正在使用 Apollo 客户端，但我不明白为什么调试我的错误如此困难:我正在尝试对我的 GraphQL 石墨烯 python 实现执行 mutate 调用.结果是 400 错误代码，我无法检索信息.

I'm using Apollo-client and I don't understand why this is so hard to debug my error: I'm trying to perform a mutate call on my graphene python implementation of GraphQL. It end up with a 400 error code, and I have no way to retrieve the info.

例如:当我在/graphQL 接口上尝试我的石墨烯服务时，它会返回有用的错误作为错误的输入或错误的方法名称.在这里，在阿波罗客户端上，它只会给我一个 400 代码错误.这对我一点帮助都没有.那么是否有可能从我的 apolo 客户端获得石墨烯的错误信息，而不是无用的 400 代码错误?

For example: when I try my graphene service on the /graphQL interface, it return me helpful errors as bad input or bad methode name. Here, on apollo client, It only throw me a 400 code error. That doesn't help me at all. So is it possible to have the error info from graphene from my apolo client, instead of an unhelpful 400 code error?

这里有一个例子，来自我的石墨烯接口 (/graphQL):

Here an example, from my graphene interface (/graphQL):

mutation myMutation {
  uploadFile(input:"") {
    success
  }
}

将输出:

{
  "errors": [
    {
      "message": "Argument "input" has invalid value "".
Expected "UploadFileMutationInput", found not an object.",
      "locations": [
        {
          "column": 20,
          "line": 2
        }
      ]
    }
  ]
}

当我在 apollo 客户端 (js) 上尝试相同时:

When I try the same on apollo client (js):

client.mutate({
  mutation: gql`
    mutation($file: Upload!) {
      uploadFile(input: $file) {
        success
      }
    }
  `,
  variables: { file } })
  .then(console.log)
  .catch((e) => { console.log("catch", e) })

我明白了错误:网络错误:响应不成功:收到状态码400

我的 catch 从来没有被调用过，文档也根本没有帮助我.

My catch is never called, and the documentation is not helping me at all.

我想要的是获取我的调用的突变细节错误:当我使用不正确的方法调用或错误的输入类型时，我不应该在没有任何导致我的请求错误的信息的情况下落入 400.

What I want is get the mutation detail errors of my calls: When I use improper method call or bad input type, I should not fall in a 400 without any information of what made my request bad.

推荐答案

Error 和 console.log 惊喜

当尝试使用 console.log 查看错误时，您可能会惊讶于没有看到所有可用的错误数据.这是因为 console.log 以特殊方式处理作为内置 Error 类实例的值，仅打印消息、类型和堆栈.

Error and console.log surprises

When trying to use console.log to view an error, you might be surprised to not see all the error data available. This is because console.log treats values which are instances of the built-in Error class in a special way, printing only the message, the type, and the stack.

Apollo 从内置的 Error 类扩展了它自己的错误.这可以通过以下方式轻松测试:

Apollo extends its own errors from the built-in Error class. This can be easily tested by:

const error = apolloError // from async try/catch, onError method, or a promise .catch

console.log(error instanceof Error);
// --> true

当从 Error 扩展时，Apollo 会将它自己的数据添加到对象中.然而错误仍然是Error的一个实例，因此console.log只会显示有限的信息，

When extending from Error, Apollo will add it's own data to the object. Yet the error will still be an instance of Error, and thus console.log will only display a limited amount of information,

console.log(error);

// output:
// Error: Network error: Response not successful: Received status code 400
//     at ...
//     at ...
//     at ...

建议(解决方案?)

如果你知道去哪里找，你可以对错误对象进行属性查找.例如，您可以记录 error.networkError.result.errors.这种方法可能过于外科手术，导致对所有出错的事情的了解不完整.

Suggestion (solution?)

If you know where to look, you can just do a property lookup on the error object. For example, you can log error.networkError.result.errors. This approach may be too surgical and lead to an incomplete picture of all the things that went wrong.

或者，我们可以在错误对象上使用 JSON.stringify，并且整个数据将被打印到控制台，

Alternatively, we can use JSON.stringify on the error object, and the entirety of the data will be printed to the console,

// tip: use stringify's formatting options for better readability
console.log(JSON.stringify(error, null, 2));

{
  "graphQLErrors": [],
  "networkError": {
    "name": "ServerError",
    "response": {},
    "statusCode": 400,
    "result": {
      "errors": [...here you will find what you're looking for]
    }
  },
  "message": "Network error: Response not successful: Received status code 400",
  "name": "Error",
  "stack": "...same as before"
}

您一眼就能看出哪里出了问题.

and you'll be able to tell at a glance what went wrong.

这篇关于Apollo 客户端:如何简单地调试 400 代码错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！