資訊專欄INFORMATION COLUMN
摘要：樣例前端傳入字段和結(jié)構(gòu)。后臺按照前端的需求返回數(shù)據(jù)。則將前后臺通信直接分為兩大類和。顧名思義，是默認(rèn)的操作符，代表查詢，是不會給服務(wù)端帶來副作用的請求。文檔文檔部分文檔就是前端向后臺描述所需的字段。降低前后端溝通成本。
簡介
GraphQL是基于「類型系統(tǒng)」來執(zhí)行查詢的查詢語言。
Facebook 2012 年開始使用 GraphQL，15年開源。
graph定義了一套標(biāo)準(zhǔn)，用于描述服務(wù)端和客戶端的通信。可以使用任意語言來實現(xiàn)graph所描述的功能。就和ECMAScript標(biāo)準(zhǔn)之于JavaScript一樣。
樣例前端傳入字段和結(jié)構(gòu)。后臺按照前端的需求返回數(shù)據(jù)。
一個GraphQL請求由兩部分組成。 操作符 和 文檔。
操作符GraphQL作為前后臺交互的中間層，不能只有查詢功能，在REST中，有GET、POST、DELETE等類型的請求。
GraphQL則將前后臺通信直接分為兩大類 query和mutation。
query顧名思義，query是默認(rèn)的操作符，代表查詢，是不會給服務(wù)端帶來副作用的請求。沒有操作符的話會默認(rèn)是query操作符，上面的動圖就是省略了query操作符。 完整的請求其實是這樣的。
query {
hero {
name
}
}
mutation
mutation代表一個動作，會給服務(wù)器帶來修改。比如增刪改。例如：
mutation addMessage($input: MessageType!) {
addMessage(input: $input) {
id
text
}
}
返回結(jié)果
{
"addMessage": {
"label": "測試的一個message",
"id": "0RaqSeOL0"
}
}
對($input: MessageType!) 可能會一頭霧水，這寫只是定義傳參的一些語法，過過文檔就可以學(xué)會。
subscriptionsubscription， 訂閱操作符還未納入標(biāo)準(zhǔn)，但是已經(jīng)被實現(xiàn)應(yīng)用了。訂閱操作符的功能是像服務(wù)端監(jiān)聽一個操作。就像VUE里面的watch一樣。只是我們watch的是服務(wù)端。一旦服務(wù)端發(fā)生了我們訂閱的改變，服務(wù)端就會主動把變化推送給我們。自己的業(yè)務(wù)代碼里面再也不要維護什么輪詢，定時器啦。
文檔文檔部分：
{
hero {
name
height
}
}
文檔就是前端向后臺描述所需的字段。也是前端覺得最爽的地方，數(shù)據(jù)結(jié)構(gòu)清晰明了。發(fā)送什么樣的請求，拿到什么樣的數(shù)據(jù)。
觀察文檔，文檔是由 類型 和 字段 構(gòu)成的。GraphQL是強類型語言。如果使用過typescript就很好理解。
可以認(rèn)為，我們規(guī)定了一種對象，它們一定有定義的屬性。
hero就是一個類型。name 和 height就是字段。
特點獲取多類資源，只用一個請求。
前端控制：是客戶端指定的查詢，端從被動為主動，想要什么拿什么。
層次結(jié)構(gòu)化： 操作粒度為字段級別，可讀性好，查詢的結(jié)構(gòu)和結(jié)果非常相似。
開發(fā)友好：得益于強類型，GraphQL可以在編寫代碼時就檢查語句是否錯誤，也能智能提示類型下的字段。可以自動生成文檔，提供豐富的體驗。
降低前后端溝通成本。
和REST對比隨著系統(tǒng)發(fā)展，REST的接口持續(xù)平面增長，GraphQL 只需增加類型，更加利于維護。
如果是復(fù)雜的客戶端，一個頁面往往需要調(diào)用多個接口，GraphQL 只需調(diào)用一次即可，一次請求到所有數(shù)據(jù)。
REST 所操作的資源相對是離散的（接口接口接口），GraphQL的數(shù)據(jù)更有整體性(因為是類型構(gòu)成)。
社區(qū)框架目前前端客戶端主要有Apollo和Relay，他們的作用就和axios一樣，方便我們構(gòu)造請求。因為業(yè)務(wù)中主要用到vue，有vue-apollo所以我選擇的是Apollo。
vue-apollo自帶了store層，方便進行數(shù)據(jù)緩存，vuex也可以去掉了。
資料我用vue-cli生成了一個簡單的增刪改查的項目。 可以對照著文檔自己敲代碼。 GraphQL_demo
文章阻礙你使用 GraphQL 的十個問題
30分鐘理解GraphQL核心概念
RPC vs REST vs GraphQL
文檔graphql官方文檔
vue-apollo文檔
apollo文檔
github的graph樣例接口（在線把玩）
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100729.html
摘要：異步剪貼板操作過去的數(shù)年中，各瀏覽器基本上都在使用來進行剪貼板交互。而提供了新的，則為我們提供了另一種異步式的剪貼板操作方式，本文即是對該機制與接口規(guī)范的詳細(xì)介紹。 showImg(https://segmentfault.com/img/remote/1460000013854167); 前端每周清單第 55 期: MobX 4 特性概覽，iOS Hacks 分享, 分布式事務(wù)詳解 ...
摘要：我們知道是一種從服務(wù)器公開數(shù)據(jù)的流行方式。描述所有的可能類型系統(tǒng)基于類型和字段的方式進行組織，而非入口端點。因此，需要對后端進行調(diào)整，以滿足新的數(shù)據(jù)需求，這會降低生產(chǎn)力并顯著降低將用戶反饋集成到產(chǎn)品中的能力。 showImg(https://segmentfault.com/img/remote/1460000017875905?w=2234&h=974); 在前幾天的《StateOf...
摘要：我們知道是一種從服務(wù)器公開數(shù)據(jù)的流行方式。描述所有的可能類型系統(tǒng)基于類型和字段的方式進行組織，而非入口端點。因此，需要對后端進行調(diào)整，以滿足新的數(shù)據(jù)需求，這會降低生產(chǎn)力并顯著降低將用戶反饋集成到產(chǎn)品中的能力。 showImg(https://segmentfault.com/img/remote/1460000017875905?w=2234&h=974); 在前幾天的《StateOf...
摘要：我們知道是一種從服務(wù)器公開數(shù)據(jù)的流行方式。描述所有的可能類型系統(tǒng)基于類型和字段的方式進行組織，而非入口端點。因此，需要對后端進行調(diào)整，以滿足新的數(shù)據(jù)需求，這會降低生產(chǎn)力并顯著降低將用戶反饋集成到產(chǎn)品中的能力。 showImg(https://segmentfault.com/img/remote/1460000017875905?w=2234&h=974); 在前幾天的《StateOf...
摘要：我們知道是一種從服務(wù)器公開數(shù)據(jù)的流行方式。描述所有的可能類型系統(tǒng)基于類型和字段的方式進行組織，而非入口端點。因此，需要對后端進行調(diào)整，以滿足新的數(shù)據(jù)需求，這會降低生產(chǎn)力并顯著降低將用戶反饋集成到產(chǎn)品中的能力。 showImg(https://segmentfault.com/img/remote/1460000017875905?w=2234&h=974); 在前幾天的《StateOf...
閱讀 1272·2021-09-02 13:36
閱讀 2727·2019-08-30 15:44
閱讀 2982·2019-08-29 15:04
閱讀 3200·2019-08-26 13:40
閱讀 3650·2019-08-26 13:37
閱讀 1181·2019-08-26 12:22
閱讀 1021·2019-08-26 11:36
閱讀 1223·2019-08-26 10:41
