Apollo-客户端在将突变发送到服务器时返回"400 (Bad Request) Error“

Question

我目前正在使用用于阿波罗客户端的vue-apollo包和带有django的VueJs栈，以及用于我的GraphQl应用程序接口的石墨烯-python。

下面我用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-cors-headers包在我的Django settings.py上安装了CORS。当我使用graphiQL或用于chrome的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
  }
}

返回以下错误响应：

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应用程序中的常规查询可以很好地解决正确的响应，除了突变，所以这真的让我感到困惑

Answer 1

400错误通常意味着查询本身有问题。在本例中，您已经定义(并传入)了一个名为$username的变量--但是，您的查询在第2行将其引用为$name。

Answer 2

除了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{消息：“语法错误:预期{，找到名称"createUser""}

更多信息可以在Apollo文档-错误处理：https://www.apollographql.com/docs/react/features/error-handling中找到。希望将来能有所帮助。

Answer 3

对我来说，这是因为我使用的字段没有在GraphQL模式中定义。永远要小心！