В настоящее время я использую пакет 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 отлично работают, разрешая правильный ответ, за исключением мутаций, так что это меня действительно сбивает с толку.





400 ошибок обычно означают, что что-то не так с самим запросом. В этом случае вы определили (и передаете) переменную с именем $username, однако ваш запрос ссылается на нее как на $name в строке 2.
Итак, я наконец понял это, большое спасибо за то, что вы привели меня в правильном направлении, Дэниел! В моем поле мутации отсутствовала внешняя фигурная скобка после аргументов, и я смог обнаружить это после вставки запроса в graphiQL. Никогда бы не подумал, что всего одна фигурная скобка вызовет у меня такой стресс.
Конечно, мутация отформатирована неправильно, если это именно то, что вы отправляете. Вам нужна открывающая скобка в мутации
mutation createUser($email: String!, $password: String!, $username: String!) {
createUser (username: $name, password: $password, email: $email) {
user {
id
username
email
password
}
}
}
С любым из этих запросов, когда я сталкиваюсь с ошибками, я вставляю его в игровую площадку graphiql или graphql, чтобы определить, какие ошибки форматирования, чтобы изолировать, что не так.
Да, спасибо Austio, мне пришлось вставить мутацию в graphiql, чтобы обнаружить это.
В дополнение к 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. Всегда будьте осторожны!
Ого, спасибо! никогда не видел этого, но теперь я изменил его на правильную переменную, и я все еще получаю ту же ошибку