1.什么是graphql
GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时
下图展示graphql所处的位置
2.优点
1.GraphQL API 有强类型 schema
GraphQL schema是强类型的,可使用SDL(GraphQL Schema Definition Language)来定义。比如,可以使用构建工具验证API请求,编译时检查API调用可能发生的错误
2.按需获取
在不添加后端接口的前提下减少不必要的字段,做到前端自主订阅字段
3.使用 vue集成graphql
1.安装vue脚手架 npm install -g vue-cli
2.安装vue-apollo客户端 vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
3.webpack.base.conf.js 安装加载器加载graphql后缀文件
{ test: /\.(graphql|gql)$/, exclude: /node_modules/, loader: 'graphql-tag/loader' },
4.main.js 添加
import { ApolloClient } from 'apollo-client' import { HttpLink } from 'apollo-link-http' import { InMemoryCache } from 'apollo-cache-inmemory' import VueApollo from 'vue-apollo' const httpLink = new HttpLink({ // You should use an absolute URL here //config.js 代理设置 // '/graphql': { // target: "http://eshipe.net:3000/graphql", // changeOrigin: true, // pathRewrite: { // '^/graphql': '/graphql' // } // }, uri: '/graphql',//访问地址,在这里使用代理 }) // Create the apollo client const apolloClient = new ApolloClient({ link: httpLink, cache: new InMemoryCache(), connectToDevTools: true, }) // Install the vue plugin Vue.use(VueApollo) const apolloProvider = new VueApollo({ defaultClient: apolloClient, }) new Vue({ router, store, provide: apolloProvider.provide(),//注册全局组件 }).$mount('#app')
5.添加search.graphql文件
//定义查询 query q_user($id: Int){ User(id: $id){ id address name } }
6.具体的vue组件中
1.import gql from "graphql-tag";
2.import {q_user} from'search.graphql'
3. 具体方法中使用
this.$apollo.query({ query: q_user, variables: { id: 1, }, }).then(res => { console.log(res) }).catch(err => { console.log(err) })
4.可能遇到的问题
1.npm版本问题
解决思路:npm版本回退 npm install -g npm@4.6.1
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍集成vue到jquery/bootstrap项目的方法,包括了集成vue到jquery/bootstrap项目的方法的使用技巧和注意事项,需要的朋友参考一下 说明,项目本身使用jquery和bootstrap做的管理后台,部分登录接口跑在node服务端,大部分接口使用springmvc实现。现在,使用vue开发,集成vue到原先的项目中。不影响原先的框架。原来的打包方式是使用fis打
本文向大家介绍在vue项目中引入vue-beauty操作方法,包括了在vue项目中引入vue-beauty操作方法的使用技巧和注意事项,需要的朋友参考一下 vue-beauty有丰富的vue组件库,使用vue-beauty方便项目的开发,下面介绍在vue项目中引入vue-beauty。 1、vue项目初始化 npm install --global vue-cl:全局安装vue脚手架vue ini
刚刚开始尝试。因为它是相当新的,似乎找不到好的留档nativescript vue集成与图形ql。尝试,但无法安装。当我添加apollo时,它会出错。有没有关于如何集成nativescript-vue与图形ql后端或更具体地通过的好文档?
Boilerplate Vue + Vuex + Vuetify + Apollo Client + GraphQL + Express + MongoDB + HTTP/2 Just a simple way of starting your projects with these marvelous technologies! Installing Download or clone the
vite项目中如何把vue3.2版本升级到vue3.4版本
本文向大家介绍详解Vue使用 vue-cli 搭建项目,包括了详解Vue使用 vue-cli 搭建项目的使用技巧和注意事项,需要的朋友参考一下 vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一、 安装 node.js 首先需要安装node环境,可以直