使用ApolloClient和Apollo-Server-Express進行GraphQL錯誤處理

Question

來自apollo-link-error的onError函數具有一個填充的graphQLErrors對象，但是當ApolloClient拋出一個錯誤對象時， graphQLErrors屬性將包含一個空數組。 進一步的檢查揭示了graphql錯誤消息error.networkError.result.errors 。

如何正確配置Apollo客戶端以返回填充的graphQLErrors對象？

Apollo客戶端安裝程序：

const {ApolloClient} = require('apollo-client')
const { ApolloLink } = require('apollo-link')

const {HttpLink} = require('apollo-link-http')
const {onError} = require('apollo-link-error')
const {InMemoryCache} = require('apollo-cache-inmemory')

const errorLink = 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}`)
})

const middleware = (req, ignored_res, next) => {
  const client = new ApolloClient({
    link: ApolloLink.from([errorLink, new HttpLink({ uri:'http://somegraphqlserver.com', fetch: require('node-fetch') })]),
    cache: new InMemoryCache(),
  })

  req.GQLClient = client

  return next()
}

module.exports = middleware

調用apollo-server-express：

req.GQLClient
    .query({
      query: SOME_MALFORMED_QUERY,
    })
    .then((data) => {...})
    .catch((error) => {
      console.log('rawError', error)
      console.log('error.networkError.result.errors', error.networkError.result.errors)
      return next(error)
    })

控制台結果：

[GraphQL error]: Message: Cannot query field "blah" on type "CustomerList"., Location: [object Object], Path: undefined
[Network error]: Error: Response not successful: Received status code 400


 rawError { Error: Network error: Response not successful: Received status code 400
   at new ApolloError (/.../node_modules/apollo-client/bundle.umd.js:121:28)
   at /.../node_modules/apollo-client/bundle.umd.js:1187:41
   at /.../node_modules/apollo-client/bundle.umd.js:1620:17
   at Array.forEach (<anonymous>)
   at /.../node_modules/apollo-client/bundle.umd.js:1619:18
   at Map.forEach (<anonymous>)
   at QueryManager.broadcastQueries (/.../node_modules/apollo-client/bundle.umd.js:1614:22)
   at /.../node_modules/apollo-client/bundle.umd.js:1114:31
   at process._tickCallback (internal/process/next_tick.js:178:7)
 graphQLErrors: [],
 networkError: 
  { Error: Response not successful: Received status code 400
   at throwServerError (/.../node_modules/apollo-link-http-common/lib/bundle.umd.js:33:21)
   at /.../node_modules/apollo-link-http-common/lib/bundle.umd.js:58:17
   at process._tickCallback (internal/process/next_tick.js:178:7)
    response: 
     Response {
       size: 0,
       timeout: 0,
       [Symbol(Body internals)]: [Object],
       [Symbol(Response internals)]: [Object] },
    statusCode: 400,
    result: { errors: [Array] } },
 message: 'Network error: Response not successful: Received status code 400',
 extraInfo: undefined }


error.networkError.result.errors [ { message: 'Cannot query field "blah" on type "CustomerList".',
   locations: [ [Object] ] } ]

庫版本：

服務器：

"apollo-server-express": "^1.3.2"

客戶：

"apollo-cache-inmemory": "^1.1.12"
"apollo-client": "^2.2.8"
"apollo-link-error": "^1.0.9"
"apollo-link-http": "^1.5.4"

Answer 1

這是設計使然。 從文檔 ：

• graphQLErrors：來自GraphQL端點的錯誤數組
• networkError：鏈接執行或服務器響應期間出現的任何錯誤，但未作為GraphQL結果中的error字段的一部分提供

換句話說，如果查詢格式錯誤，您請求的字段無效（例如您的示例中），或者遇到任何其他導致狀態不為200的問題，則該錯誤將顯示為networkError屬性的一部分。 另一方面，如果請求返回200，但填充了響應內部的errors數組，則那些相同的錯誤將作為graphQLErrors一部分返回。

如果要查看正在填充的graphQLErrors的示例，請正確格式化查詢，但是讓其中一個解析器在調用后立即引發錯誤。 只要查詢沒有遇到其他問題，您都應該在graphQLErrors內部看到相同的錯誤。