Apollo-клиент возвращает «400 (Bad Request) Error» при отправке мутации на сервер - PullRequest
Новая
       20

Apollo-клиент возвращает «400 (Bad Request) Error» при отправке мутации на сервер

0 голосов
/ 09 сентября 2018

В настоящее время я использую пакет vue-apollo для клиента Apollo со стеком VueJs с помощью django и graphene-python для моего API GraphQl.

У меня есть простая установка с помощью vue-apolloниже: 

import Vue from 'vue'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'
import Cookies from 'js-cookie'


const httpLink = new HttpLink({
  credentials: 'same-origin',
  uri: 'http://localhost:8000/api/',
})

// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
  connectToDevTools: true,
})

export const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})

// Install the vue plugin
Vue.use(VueApollo)

У меня также есть настройка CORS на моем Django settings.py с пакетом django-cors-headers .Все запросы и мутации разрешаются нормально, когда я использую GraphiQL или клиент Insomnia API для Chrome, но пытаюсь выполнить приведенную ниже мутацию из моего приложения vue: 

'''

import gql from "graphql-tag";
import CREATE_USER from "@/graphql/NewUser.gql";

export default {
  data() {
    return {
      test: ""
    };
  },
  methods: {
    authenticateUser() {
      this.$apollo.mutate({
        mutation: CREATE_USER,
        variables: {
          email: "test@example.com",
          password: "pa$$word",
          username: "testuser"
        }
      }).then(data => {
          console.log(result)
      })
    }
  }
};

NewUser.gql 

mutation createUser($email: String!, $password: String!, $username: String!) {
  createUser (username: $name, password: $password, email: $email)
  user {
    id
    username
    email
    password
  }
}

возвращаетс ответом об ошибке ниже: 

POST http://localhost:8000/api/ 400 (Bad Request)

ApolloError.js?d4ec:37 Uncaught (in promise) Error: Network error: Response not successful: Received status code 400

Регулярные запросы в моем приложении vue, однако, работают нормально, разрешая правильный ответ, кроме мутаций, так что это меня действительно сбивает с толку

Ответы [ 3 ]

0 голосов
/ 10 сентября 2018

Конечно, мутация не отформатирована правильно, если это именно то, что вы отправляете. Вам нужна открывающая скобка в мутации 

mutation createUser($email: String!, $password: String!, $username: String!) {
  createUser (username: $name, password: $password, email: $email) {
    user {
      id
      username
      email
      password
    }
  }
}

С любым из этих запросов, когда я сталкиваюсь с ошибками, я вставляю его в площадку graphiql или graphql, чтобы определить ошибки форматирования, чтобы определить, что не так.

0 голосов
/ 08 июля 2019

В дополнение к graphiQL, я хотел бы добавить, что пакет apollo-link-error также очень помог. Импортируя его обработчик ошибок {onError}, вы можете получить через консоль подробные сведения об ошибках, возникающих на уровне сети и приложения (graphql): 

import { onError } from 'apollo-link-error';
import { ApolloLink } from 'apollo-link';

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    console.log('graphQLErrors', graphQLErrors);
  }
  if (networkError) {
    console.log('networkError', networkError);
  }
});

const httpLink = ...

const link = ApolloLink.from([errorLink, httpLink]);

const client = new ApolloClient({
  ...,
  link,
  ...
});

Добавив эту конфигурацию, где вы создаете экземпляр клиента Apollo, вы получили бы ошибку, похожую на эту:

GraphQLError {message: "Синтаксическая ошибка: ожидается {, найдено имя" createUser ""}

Дополнительную информацию можно найти в Apollo Doc - Обработка ошибок: https://www.apollographql.com/docs/react/features/error-handling. Надеюсь, это поможет в будущем.

0 голосов
/ 09 сентября 2018

400 ошибок обычно означают, что с запросом что-то не так. В этом случае вы определили (и передаете) переменную с именем $username - однако ваш запрос ссылается на нее как $name в строке 2.

...