1.什么是graphql
GraphQL 是一個(gè)用于 API 的查詢語言，是一個(gè)使用基于類型系統(tǒng)來執(zhí)行查詢的服務(wù)端運(yùn)行時(shí)
下圖展示graphql所處的位置
2.優(yōu)點(diǎn)
1.GraphQL API 有強(qiáng)類型 schema
GraphQL schema是強(qiáng)類型的，可使用SDL(GraphQL Schema Definition Language)來定義。比如，可以使用構(gòu)建工具驗(yàn)證API請(qǐng)求，編譯時(shí)檢查API調(diào)用可能發(fā)生的錯(cuò)誤
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 代理設(shè)置// '/graphql': {// target: "http://eshipe.net:3000/graphql",// changeOrigin: true,// pathRewrite: {// '^/graphql': '/graphql'// }// },uri: '/graphql',//訪問地址,在這里使用代理})// Create the apollo clientconst apolloClient = new ApolloClient({link: httpLink,cache: new InMemoryCache(),connectToDevTools: true,})// Install the vue pluginVue.use(VueApollo)const apolloProvider = new VueApollo({defaultClient: apolloClient,})new Vue({router,store,provide: apolloProvider.provide(),//注冊(cè)全局組件}).$mount('#app')5.添加search.graphql文件
//定義查詢query q_user($id: Int){User(id: $id){idaddressname}}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
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
