GraphQL 是 Fackbook 的一個(gè)開源項(xiàng)目，它定義了一種查詢語言，用于描述客戶端與服務(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ù)方面。

下面我們從使用的角度來介紹一下。

相關(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)量類型，就可以正確返回了。

開始使用

如果看完上面的介紹，心中有很多疑問，沒關(guān)系，我們現(xiàn)在以 GitHub GraphQL API 為例，來實(shí)際使用一下。打開 https://developer.github.com/v4/explorer/，然后登錄，會(huì)看到一個(gè)這樣的界面

這是 GraphQL 提供的開發(fā)工具 GraphiQL，可以檢查 GraphQL 的語法，發(fā)送 GraphQL 的請(qǐng)求，還提供文檔查詢功能。在開始使用之前先介紹一下文檔查詢功能。點(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，按照之前說法，我們是可以查詢這個(gè)字段，寫出如下的查詢語言：

{
 user {
 bio
 }
}

準(zhǔn)備執(zhí)行時(shí)，會(huì)看到 user 下方有條紅線，鼠標(biāo)放上去

提示 user 必須指定一個(gè) login 的參數(shù)，再回頭看文檔中該字段的描述 user(login: String!): User，是不是就可以理解了，(login: ) 表示該字段接受一個(gè) login 參數(shù)，為 String 類型，! 表示是必須的。

將查詢語言改成：

{
 user(login: "booxood") {
 bio
 }
}

再執(zhí)行，并得到了我們預(yù)期指定的結(jié)果

{
 "data": {
 "user": {
 "bio": "HAppy coding & Happy life"
 }
 }
}

現(xiàn)在是不是有點(diǎn)理解這種查詢語言了。下面我們?cè)僖浴?Gitalk：一個(gè)基于 Github Issue 和 Preact 開發(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
 }
 }
 }
 }
 }
}

先通過 repository(owner: "gitalk", name: "gitalk") 找到 repository，再通過 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)室