資訊專欄INFORMATION COLUMN
摘要：什么是是一個(gè)用于的查詢語(yǔ)言，是一個(gè)使用基于類型系統(tǒng)來(lái)執(zhí)行查詢的服務(wù)端運(yùn)行時(shí)下圖展示所處的位置優(yōu)點(diǎn)有強(qiáng)類型是強(qiáng)類型的，可使用來(lái)定義。
1.什么是graphql
GraphQL 是一個(gè)用于 API 的查詢語(yǔ)言，是一個(gè)使用基于類型系統(tǒng)來(lái)執(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)來(lái)定義。比如，可以使用構(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",//訪問(wèn)地址,在這里使用代理
})
// 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(),//注冊(cè)全局組件
}).$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.可能遇到的問(wèn)題
1.npm版本問(wèn)題
解決思路:npm版本回退 npm install -g [email protected]
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97564.html
摘要：前端每周清單第期微服務(wù)實(shí)踐，與，組件技巧，攻防作者王下邀月熊編輯徐川前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。 前端每周清單第 26 期：Node.js 微服務(wù)實(shí)踐，Vue.js 與 GraphQL，Angular 組件技巧，HeadlessChrome 攻防 作者：王下邀月熊 編輯：徐川...
摘要：新聞熱點(diǎn)國(guó)內(nèi)國(guó)外，前端最新動(dòng)態(tài)就開源許可證風(fēng)波進(jìn)行回復(fù)數(shù)周前，基金會(huì)決定禁止旗下項(xiàng)目使用，因?yàn)槠湓跇?biāo)準(zhǔn)的許可證之外添加了專利聲明此舉引發(fā)了社區(qū)的廣泛討論，希望能夠更新其開源許可證。 showImg(https://segmentfault.com/img/remote/1460000010777089); 前端每周清單第 27 期：React Patent License 回復(fù)，Sho...
摘要：通過(guò)對(duì)比各項(xiàng)目過(guò)去個(gè)月在上新增數(shù)量，來(lái)評(píng)估其在年度的受關(guān)注程度，進(jìn)而選出年度領(lǐng)域崛起的明星項(xiàng)目。也許正因?yàn)樯鲜鲎詈笠稽c(diǎn)，在中國(guó)擁有大量的擁躉。不僅被中國(guó)最大的電商平臺(tái)阿里巴巴使用，也獲得了與這些公司青睞。 共 4741 字，讀完需 8 分鐘，速讀 2 分鐘。我有幸參與了該項(xiàng)目的部分中文版翻譯、校對(duì)工作，感謝 Sacha Grief，Micheal Ramberu 的統(tǒng)計(jì)整理，以及 Fr...
摘要：也就是說(shuō)在中，我們的代碼是要在環(huán)境中運(yùn)行。而在中，是沒有等以及的，即所有的框架都是不可以使用的。比如相關(guān)組件，相關(guān)組件，等都不能在中引用。是可以在中使用的。 接著第一彈講，我們已經(jīng)搭建好一個(gè)屬于自己的weex項(xiàng)目了，然后如何開發(fā)呢？由于之前項(xiàng)目中都是采用vue全家桶進(jìn)行開發(fā)，路由使用vue-router插件，狀態(tài)管理使用vuex，Ajax前后臺(tái)交互使用axios，圖標(biāo)庫(kù)使用font-a...
摘要：但是，有一件事是肯定的年對(duì)全棧開發(fā)者的需求量很大。有一些方法可以解決這個(gè)問(wèn)題，例如模式，或者你可以這么想，其實(shí)谷歌機(jī)器人在抓取單頁(yè)應(yīng)用程序時(shí)沒有那么糟糕。谷歌正在這方面努力推進(jìn)，但不要指望在年會(huì)看到任何突破。 對(duì)于什么是全棧開發(fā)者并沒有一個(gè)明確的定義。但是，有一件事是肯定的：2019 年對(duì)全棧開發(fā)者的需求量很大。在本文中，我將向你概述一些趨勢(shì)，你可以嘗試根據(jù)這些趨勢(shì)來(lái)確定你可能要投入的...
閱讀 2091·2021-09-29 09:35
閱讀 695·2021-09-08 09:36
閱讀 3404·2021-09-03 10:30
閱讀 2120·2019-08-30 14:21
閱讀 2920·2019-08-30 11:18
閱讀 3323·2019-08-29 17:31
閱讀 3150·2019-08-29 17:29
閱讀 1318·2019-08-29 17:13
