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

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

У меня есть простая установка с 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. Все запросы и мутации разрешаются нормально, когда я использую 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: "[email protected]",
          password: "pa$$word",
          username: "testuser"
        }
      }).then(data => {
          console.info(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 отлично работают, разрешая правильный ответ, за исключением мутаций, так что это меня действительно сбивает с толку.

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
12
0
23 832
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

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

Ого, спасибо! никогда не видел этого, но теперь я изменил его на правильную переменную, и я все еще получаю ту же ошибку

Feyisayo Sonubi 09.09.2018 22:34

Итак, я наконец понял это, большое спасибо за то, что вы привели меня в правильном направлении, Дэниел! В моем поле мутации отсутствовала внешняя фигурная скобка после аргументов, и я смог обнаружить это после вставки запроса в graphiQL. Никогда бы не подумал, что всего одна фигурная скобка вызовет у меня такой стресс.

Feyisayo Sonubi 09.09.2018 23:07

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

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

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

Да, спасибо Austio, мне пришлось вставить мутацию в graphiql, чтобы обнаружить это.

Feyisayo Sonubi 09.09.2018 23:09

В дополнение к 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.info('graphQLErrors', graphQLErrors);
  }
  if (networkError) {
    console.info('networkError', networkError);
  }
});

const httpLink = ...

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

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

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

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

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

Для меня это было то, что я использовал поле, не определенное в схеме GraphQL. Всегда будьте осторожны!

Другие вопросы по теме