web-dev-qa-db-ja.com

Apolloクライアント：400コードエラーを単にデバッグする方法は？

私はApollo-clientを使用していますが、なぜこれが私のエラーをデバッグするのが難しいのか理解していません：グラフェンでmutateコールを実行しようとしていますpython GraphQLの実装。最終的に400エラーコードになり、情報を取得する方法がありません。

たとえば、/ graphQLインターフェイスでグラフェンサービスを試してみると、入力が間違っていたりメソッド名が間違っていたりするので、役立つエラーが返されます。ここで、apolloクライアントでは、400コードエラーのみがスローされます。それはまったく私を助けません。だから、役に立たない400コードエラーの代わりに、私のapoloクライアントからグラフェンからのエラー情報を持つことは可能ですか？

グラフェンインターフェイス（/ 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に落ちるべきではありません。

debugginggraphqlapollo
12
Mr Bonjour

次のリンクを使用する必要があります。 https://www.npmjs.com/package/apollo-link-errorApolloClientをインスタンス化するとき。次のように、他のリンクの前に移動する必要があります。

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]),
})
10
Yan Takushevich

このソリューションは私のためにそれを解決しました：

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

クライアント構成にonError関数を直接配置することでそれを実行できました（突然変異で行う場合、graphQLErrorsは常に空です）。

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

私の場合、クエリにタイプミスがありました。ただし、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 = '[email protected]') {
  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
  }
}
_
0
Megajin