GraphQL 是 Fackbook 的一個(gè)開(kāi)源項(xiàng)目，它定義了一種查詢語(yǔ)言，用于描述客戶端與服務(wù)端交互時(shí)的數(shù)據(jù)模型和功能，相比 RESTful API 主要有以下特點(diǎn)：
- 根據(jù)需要返回?cái)?shù)據(jù)
- 一個(gè)請(qǐng)求獲取多個(gè)資源
- 提供內(nèi)省系統(tǒng)
這使得客戶端的功能得到了加強(qiáng)，特別是在查詢數(shù)據(jù)方面。
下面我們從使用的角度來(lái)介紹一下。
相關(guān)概念
在使用 GraphQL 之前，先介紹幾個(gè)相關(guān)概念，便于理解使用。
- Operations
GraphQL 服務(wù)提供的操作一般有：query、mutation。query 可以理解為 RESTful API 中的 GET 的請(qǐng)求。mutation 可以理解為 RESTful API 中的 POST、PUT、DELETE 之類的請(qǐng)求。
- Types
定義了 GraphQL 服務(wù)支持的類型，例如：
type User {
id: ID
name: String
}
type Query {
user: User
}
定義了 User 類型和包含的字段以及字段的類型；定義 Query 返回一個(gè) User 類型的 user，Query 也是一種類型。
- Scalar types
標(biāo)量類型。GraphQL 默認(rèn)提供的標(biāo)量類型有：Int、Float、String、Boolean、ID，也可以實(shí)現(xiàn)自定義的標(biāo)量類型，如：Date。
標(biāo)量類型有什么用呢？返回?cái)?shù)據(jù)的字段必須是標(biāo)量類型。例如我們想返回一個(gè) user：
query {
user // 報(bào)錯(cuò)
}
上面這樣是會(huì)報(bào)錯(cuò)的，因?yàn)?user 不是標(biāo)量類型，需要改成
query {
user {
id
name
}
}
指定返回 user 的 id 和 name，這兩個(gè)字段都是標(biāo)量類型，就可以正確返回了。
開(kāi)始使用
如果看完上面的介紹，心中有很多疑問(wèn)，沒(méi)關(guān)系，我們現(xiàn)在以 GitHub GraphQL API 為例，來(lái)實(shí)際使用一下。打開(kāi) https://developer.github.com/v4/explorer/，然后登錄，會(huì)看到一個(gè)這樣的界面
這是 GraphQL 提供的開(kāi)發(fā)工具 GraphiQL，可以檢查 GraphQL 的語(yǔ)法，發(fā)送 GraphQL 的請(qǐng)求，還提供文檔查詢功能。在開(kāi)始使用之前先介紹一下文檔查詢功能。點(diǎn)擊右上角的 < Docs 并可以看到
上面的 ROOT TYPES 表示最頂層支持的類型，只有兩個(gè) Query 和 Mutation。點(diǎn)擊 Query，可以看到該類型包含的字段。仔細(xì)看，會(huì)發(fā)現(xiàn)這些字段的值又都是類型。
往下滾動(dòng)，找到 user(login: String!): User，點(diǎn)擊 User
終于找到一個(gè)標(biāo)量類型的字段 bio: String，按照之前說(shuō)法，我們是可以查詢這個(gè)字段，寫(xiě)出如下的查詢語(yǔ)言：
{
user {
bio
}
}
準(zhǔn)備執(zhí)行時(shí)，會(huì)看到 user 下方有條紅線，鼠標(biāo)放上去
提示 user 必須指定一個(gè) login 的參數(shù)，再回頭看文檔中該字段的描述 user(login: String!): User，是不是就可以理解了，(login: ) 表示該字段接受一個(gè) login 參數(shù)，為 String 類型，! 表示是必須的。
將查詢語(yǔ)言改成：
{
user(login: "booxood") {
bio
}
}
再執(zhí)行，并得到了我們預(yù)期指定的結(jié)果
{
"data": {
"user": {
"bio": "HAppy coding & Happy life"
}
}
}
現(xiàn)在是不是有點(diǎn)理解這種查詢語(yǔ)言了。下面我們?cè)僖浴?Gitalk：一個(gè)基于 Github Issue 和 Preact 開(kāi)發(fā)的評(píng)論插件】中的兩個(gè)需求為例
- 展示某個(gè) Issue 的評(píng)論和評(píng)論上的點(diǎn)贊數(shù)據(jù)
query {
repository(owner: "gitalk", name: "gitalk") {
issue(number: 1) {
comments(last: 10) {
totalCount
nodes {
author {
login
avatarUrl
}
body
reactions(first: 100, content: HEART) {
totalCount
viewerHasReacted
}
}
}
}
}
}
先通過(guò) repository(owner: "gitalk", name: "gitalk") 找到 repository，再通過(guò) issue(number: 1) 指定 issue，然后 comments(last: 10) 表示從后面取 10 條 comments，同時(shí)獲取評(píng)論的 body 和 評(píng)論的 reactions(first: 100, content: HEART) 以及 reactions 的相關(guān)信息。
- 添加或取消某個(gè)評(píng)論上的點(diǎn)贊
添加
mutation {
addReaction(input: {subjectId: "MDEyOklzc3VlQ29tbWVudDMxNTQxOTc2NQ==", content: HEART}) {
reaction {
content
}
}
}
取消
mutation {
removeReaction(input: {subjectId: "MDEyOklzc3VlQ29tbWVudDMxNTQxOTc2NQ==", content: HEART}) {
reaction {
content
}
}
}
之前的都是查詢，這兩個(gè)是 mutation，分別調(diào)用了 addReaction 和 removeReaction。
可以在從文檔的 ROOT TYPE 上選擇 Mutation 查看支持的所有 mutation。
希望本文能幫助到您！
點(diǎn)贊+轉(zhuǎn)發(fā)，讓更多的人也能看到這篇內(nèi)容（收藏不點(diǎn)贊，都是耍流氓-_-）
關(guān)注 ｛我｝，享受文章首發(fā)體驗(yàn)！
每周重點(diǎn)攻克一個(gè)前端技術(shù)難點(diǎn)。更多精彩前端內(nèi)容私信 我 回復(fù)“教程”
原文鏈接：https://aotu.io/notes/2017/12/15/graphql-use/
作者：凹凸實(shí)驗(yàn)室
