首页 文章

Apollo-client在向服务器发送变异时返回“400（错误请求）错误”

提问于
浏览 次
1

我目前正在为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设置 . 当我使用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: "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

2 回答

  • 2

    400错误通常意味着's something off with the query itself. In this instance, you' ve已定义（并且您正在传入）一个名为 $username 的变量 - 但是，您的查询在第2行将其引用为 $name .

    回复于
  • 3

    如果这正是您发送的内容，请确保突变格式不正确 . 你需要一个突变的开放括号

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

    当我遇到任何这些查询时，我会将其粘贴到graphiql或graphql playground中，以确定格式错误是什么，以便找出错误 .

    回复于

相关问题