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

Question

我正在使用Apollo-client而且我不明白为什么这么难调试我的错误:我正在尝试对我的石墨烯python实现GraphQL执行mutate调用.最终得到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

我的捕获从未被调用过,文档根本没有帮助我.

我想要的是得到我的调用的突变细节错误:当我使用不正确的方法调用或错误的输入类型时,我不应该没有任何关于什么使我的请求变坏的信息.

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，Apollo 会将它自己的数据添加到对象中。然而错误仍然是一个实例Error，因此 console.log 只会显示有限的信息，

console.log(error);

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

建议（解决方案？）

如果您知道要查找的位置，则只需对错误对象进行属性查找即可。例如，您可以登录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

您应该在实例化时使用此链接:https://www.npmjs.com/package/apollo-link-error ApolloClient.它应该在其他链接之前,如下:

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)
  }
})

Answer 4

就我而言，查询中有一个拼写错误。但最终还是出现了 400 错误。

要调试此类情况，您可以简单地使用以下代码：

function query() {
  try {
    /**
     * DO QUERY
     */
  } catch (e) {
    // Here you can catch any errors from Apollo Error.
    console.log(e.networkError.result.errors);
  }
}

提示：GraphQL 错误并不总是会出现，graphQLErrors因此最好将网络错误与 graphql 错误一起检查。要查看 GraphQL 错误：console.log(e.graphQLErrors);请注意，这graphQLErrors将是一个数组。

这是一个完整的示例：

async function userQueryInterface(userid = '1234', usermail = 'test@test.test') {
  try {
    let users = await client.query({
      query: gql`
        query GetUsers($userid: ID!, $usermail: String) {
          getUsers(vlanid: $userid, usermail: $usermail) {
            _id
            mail
          }
        }
      `,
      variables: { userid, usermail }
    });

    return users.data.getUsers;
  } catch (e) {
    console.log(e.networkError.result.errors); // here you can see your network
  }
}

Answer 5

我设法通过onError直接在客户端配置中放置一个函数来做到这一点（graphQLErrors在突变中执行此操作时始终为空）：

const client = new ApolloClient({
  uri: 'http://localhost:3000/graphql',
  onError: (e) => { console.log(e) },
});