Apollo 客户端在向服务器发送突变时返回“400（错误请求）错误”答案

【问题标题】：Apollo-client returns "400 (Bad Request) Error" on sending mutation to serverApollo 客户端在向服务器发送突变时返回“400（错误请求）错误”
【发布时间】：2019-02-14 07:16:21
【问题描述】：

我目前正在为 Apollo 客户端使用 vue-apollo 包，并为我的 GraphQl API 使用带有 django 和 graphene-python 的 VueJs 堆栈。

我在下面有一个简单的 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
  }
}

返回以下错误响应：

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

【问题讨论】：

标签： django vue.js graphql apollo graphene-python

【解决方案1】：

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

【讨论】：

哇，谢谢！从来没有见过，但我现在把它改成了正确的变量，我仍然得到同样的错误
所以我终于想通了，非常感谢你带领我朝着正确的方向前进，Daniel！我的突变字段在其参数之后缺少一个外大括号，我在将查询粘贴到 graphiQL 后发现了这一点。没想到只有一个花括号会让我有这么大的压力。

【解决方案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{message: "语法错误：预期 {，找到名称 "createUser""}

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

【讨论】：

【解决方案3】：

对我来说，这是因为我使用了一个未在 GraphQL 架构中定义的字段。永远小心！

【讨论】：

【解决方案4】：

如果这正是您发送的内容，请确保突变格式不正确。您需要在突变中添加一个左括号

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

当我遇到错误时，我会将这些查询中的任何一个粘贴到 graphiql 或 graphql Playground 中，以识别格式错误是什么，以便找出错误所在。

【讨论】：

是的，感谢 Austio，我必须将突变粘贴到 graphiql 中才能检测到。