Клиент Apollo: как просто отладить ошибку кода 400?

Я использую Apollo-клиент, и я не понимаю, почему так сложно отлаживать мою ошибку: я пытаюсь выполнить вызов мутанта на моей графической реализации графического скрипта graphene python. В итоге получается код ошибки 400, и у меня нет способа получить информацию.

Например: когда я пытаюсь воспользоваться службой graphene на интерфейсе /graphQL, он возвращает мне полезные ошибки, как плохой ввод или неправильное имя метода. Здесь, на клиенте apollo, он просто меняет 400 ошибок кода. Это мне совсем не помогает. Так можно ли получить информацию об ошибке от графена от моего клиента apolo, а не бесполезную ошибку кода 400?

Вот пример из моего интерфейса graphene (/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 без какой-либо информации о том, что сделало мой запрос плохим.

Ответ 1

Вы должны использовать эту ссылку: 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]),
})

Ответ 2

Это решение решило это для меня:

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

Ответ 3

Мне удалось сделать это, поместив функцию onError непосредственно в конфигурацию клиента (graphQLErrors всегда пуст при выполнении этого в мутации):

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

Ответ 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 = '[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
  }
}