Apollo客户端:如何简单地调试一个400代码错误？

Question

我使用的是Apollo-client，我不明白为什么这很难调试我的错误:我正在尝试对我的石墨烯python实现GraphQL执行一个变异调用。它以一个400错误代码结束，并且我没有办法检索信息。

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

下面是我的石墨烯接口(/graphQL)中的一个示例：

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

将输出：

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

当我在apollo客户端(Js)上尝试相同的操作时：

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

我得到了Error: Network error: Response not successful: Received status code 400

我捕获的内容从来没有调用过，文档对我一点帮助都没有。

我想要的是得到我的调用的突变细节错误:当我使用不正确的方法调用或错误的输入类型时，我不应该在没有任何信息的情况下陷入400，因为我的请求是错误的。

Answer 1

Error和console.log带来的惊喜

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

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

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

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

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

console.log(error);

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

建议(解决方案？)

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

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

// 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"
}

您将能够一目了然地指出哪里出了问题。

Answer 2

在实例化ApolloClient时，应该使用这个链接：https://www.npmjs.com/package/apollo-link-error。它应该放在其他链接之前，如下所示：

import { ApolloClient, ApolloLink } from 'apollo-boost'
import { onError } from 'apollo-link-error'

const errorLink = onError(({ graphQLErrors }) => {
  if (graphQLErrors) graphQLErrors.map(({ message }) => console.log(message))
})

new ApolloClient({
  ...
  link: ApolloLink.from([errorLink, authLink, restLink, httpLink]),
})

Answer 3

这个解决方案为我解决了这个问题：

const client = new ApolloClient({
  uri: 'http://localhost:4444/graphql',
  onError: ({ networkError, graphQLErrors }) => {
    console.log('graphQLErrors', graphQLErrors)
    console.log('networkError', networkError)
  }
})