Apollo-client returns 向服务器发送突变时出现“400(错误请求)错误”
Apollo-client returns "400 (Bad Request) Error" on sending mutation to server
我目前正在为 Apollo 客户端使用 vue-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)
我还在我的 Django settings.py
上使用 django-cors-headers 包设置了 CORS。当我为 chrome 使用 graphiQL 或 Insomnia API 客户端时,所有查询和突变都可以很好地解决,但是从我的 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
}
}
returns 错误响应如下:
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
的变量——但是,您的查询在第 2 行将其引用为 $name
。
如果这正是您发送的内容,请确保突变的格式不正确。您需要在 mutation
中有一个左括号
mutation createUser($email: String!, $password: String!, $username: String!) {
createUser (username: $name, password: $password, email: $email) {
user {
id
username
email
password
}
}
}
当我 运行 遇到错误时,对于这些查询中的任何一个,我将其粘贴到 graphiql 或 graphql playground 中以识别格式错误是什么,以便隔离错误。
除了 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 Client 的位置添加此配置,您会收到类似于此错误的错误:
GraphQLError{消息:"Syntax Error: Expected {, found Name "createUser""}
可在 Apollo Doc - 错误处理中找到更多信息:https://www.apollographql.com/docs/react/features/error-handling。
希望对以后有帮助。
对我来说,我使用的是 GraphQL 架构中未定义的字段。时刻小心!
我目前正在为 Apollo 客户端使用 vue-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)
我还在我的 Django settings.py
上使用 django-cors-headers 包设置了 CORS。当我为 chrome 使用 graphiQL 或 Insomnia API 客户端时,所有查询和突变都可以很好地解决,但是从我的 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
}
}
returns 错误响应如下:
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
的变量——但是,您的查询在第 2 行将其引用为 $name
。
如果这正是您发送的内容,请确保突变的格式不正确。您需要在 mutation
中有一个左括号mutation createUser($email: String!, $password: String!, $username: String!) {
createUser (username: $name, password: $password, email: $email) {
user {
id
username
email
password
}
}
}
当我 运行 遇到错误时,对于这些查询中的任何一个,我将其粘贴到 graphiql 或 graphql playground 中以识别格式错误是什么,以便隔离错误。
除了 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 Client 的位置添加此配置,您会收到类似于此错误的错误:
GraphQLError{消息:"Syntax Error: Expected {, found Name "createUser""}
可在 Apollo Doc - 错误处理中找到更多信息:https://www.apollographql.com/docs/react/features/error-handling。 希望对以后有帮助。
对我来说,我使用的是 GraphQL 架构中未定义的字段。时刻小心!