我目前正在使用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上安装了CORS和django-cors-headers软件包.当我使用graphiQL或用于chrome的失眠API客户端时,所有的查询和Mutations 都能很好地解决,但在我的vue应用程序中try 以下Mutations :

'''

import gql from "graphql-tag";
import CREATE_USER from "@/graphql/新用户.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)
      })
    }
  }
};

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

推荐答案

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

Vue.js相关问答推荐

我可以手动访问 vue-router 解析器吗?

为什么普通对象在 Vue3 中自动变成响应式的?

如何在 Laravel 中包含 Bootstrap-Vue

Vue 和 Bootstrap Vue - 动态使用插槽

[Vue 警告]:渲染函数中的错误:TypeError:无法读取属性 'first_name' of null

在 vuejs 中的图像中包含 router-link 标记

使用 aria-live 在 vue.js 中向屏幕阅读器宣布信息

POST 文件连同表单数据 Vue + axios

Vue:从 Vue 实例更新组件数据

VueRouter 未定义

使用 Blade/Mustache 模板混合 Laravel 和 Vue.Js

vue js 中的 process.env.BASE_URL 是什么?

vue 3 使用 Vuex 和路由的服务器端渲染

在路由更改之前显示确认对话框

我如何能够在 vue js html 中以给定格式进行多项 Select 和传递数据?

Axios 请求拦截器在我的 vue 应用程序中不起作用

在 vue js 中的何处以及如何存储 API 端点?

如何在我的 vue js 中实现无限滚动

使用 vuex-persistedstate 仅使一个模块持久化

隐藏特定标题及其在 vuetify 数据表中的对应列