如果這是第二次看到我的文章妖爷，歡迎訂閱z哥的公眾號(hào)（跨界架構(gòu)師）哦~
每周五11：45 按時(shí)送達(dá)霞玄。當(dāng)然了窜司，也會(huì)時(shí)不時(shí)加個(gè)餐～
一、Graphql是什么
最近在折騰使用Github api做個(gè)微信小程序練練手蹲坷，本篇文章就是在這個(gè)過(guò)程中記錄驶乾。
直接先看下GraphQL的語(yǔ)法風(fēng)格，感受一下：
query {
? repository(owner:"octocat", name:"Hello-World") {
? ? ? id
? }
}
這是最最最簡(jiǎn)單的一個(gè)運(yùn)用示例循签，效果上等價(jià)于http://graphqlapi.xxx.com/query/repository?owner=octocat&name=Hello-World 级乐，返回的內(nèi)容格式是這樣：
{
? "data": {
? ? "repository": {
? ? ? "id": "MDEwOlJlcG9zaXRvcnkxMjk2MjY5"? ? }
? }
}
再看下稍微復(fù)雜點(diǎn)的查詢方式：
query {
? repository(owner:"octocat", name:"Hello-World") {
? ? issues(last:20, states:CLOSED) {
? ? ? edges {
? ? ? ? node {
? ? ? ? ? title
? ? ? ? ? url
? ? ? ? ? labels(first:5) {
? ? ? ? ? ? edges {
? ? ? ? ? ? ? node {
? ? ? ? ? ? ? ? name
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? }
? }
}
????????這是一個(gè)多級(jí)對(duì)象嵌套的查詢，這里就不繼續(xù)展開了县匠。關(guān)于egde和node在下文會(huì)有少許講解风科。對(duì)GraphQL有興趣進(jìn)行更深入了解的可以自行研究學(xué)習(xí)，我自己也是剛?cè)腴T乞旦，不坑大家了：）贼穆，官網(wǎng)是http://graphql.org/（這個(gè)可能打不開，可以打開國(guó)內(nèi)的地址http://graphql.cn）杆查，F(xiàn)acebook發(fā)布的規(guī)范在http://facebook.github.io/graphql/October2016/。
GraphQL 既是一種用于 API 的查詢語(yǔ)言也是一個(gè)滿足你數(shù)據(jù)查詢的運(yùn)行時(shí)臀蛛。GraphQL 對(duì)你的 API 中的數(shù)據(jù)提供了一套易于理解的完整描述亲桦，使得客戶端能夠準(zhǔn)確地獲得它需要的數(shù)據(jù)，而且沒有任何冗余浊仆，也讓 API 更容易地隨著時(shí)間推移而演進(jìn)客峭，還能用于構(gòu)建強(qiáng)大的開發(fā)者工具。
二抡柿、.net下如何運(yùn)用GraphQL
????????由于我需要做一個(gè)定時(shí)任務(wù)將github上的數(shù)據(jù)定時(shí)拉到本地舔琅，所以自然的選擇了后端處理的方式。找了一下.net下的GraphQL客戶端洲劣，用了這個(gè)graphql-client备蚓。代碼如下：
varheroRequest =new GraphQLRequest
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? Query = graphql? //這里填寫query的內(nèi)容课蔬。
? ? ? ? ? ? ? ? };vargraphQLClient =newGraphQLClient("https://api.github.com/graphql");graphQLClient.DefaultRequestHeaders.UserAgent.Add(new ProductInfoHeaderValue("Safari", "537.36"));
//上面這行很關(guān)鍵，UserAgent一定要寫上郊尝，要不然會(huì)出現(xiàn)403錯(cuò)誤二跋，花了好久才找到這個(gè)問題。
graphQLClient.DefaultRequestHeaders.Add(
"Authorization","bearertoken");? //這里的token是個(gè)占位流昏，實(shí)際需要在Github上生成扎即。vargraphQLResponse = graphQLClient.PostAsync(heroRequest).Result;
關(guān)于token的生成以及其它的一些環(huán)境準(zhǔn)備工作，在github上有詳細(xì)的描述况凉，參見：https://developer.github.com/v4/guides/forming-calls/#authenticating-with-graphql谚鄙。
重要的事情說(shuō)3遍：UserAgent一定要寫上！刁绒！?UserAgent一定要寫上Ｃ朴！?UserAgent一定要寫上Ｌ哦А粮坞！
三、運(yùn)用GraphQL調(diào)用Github api
????????Github提供的API和相關(guān)文檔在https://developer.github.com/v4/?右側(cè)的目錄樹上初狰，這次筆者需要拉取github的大量repository庫(kù)莫杈，所以用到的search接口（但是很奇怪，這個(gè)接口在文檔中并沒有列出來(lái)奢入，也不知道為什么）筝闹。建議大家可以先在Github提供的explorer中先測(cè)試和驗(yàn)證，OK了在把代碼寫到實(shí)際的項(xiàng)目中腥光。
接著关顷，筆者在實(shí)現(xiàn)自己需要的功能時(shí)又學(xué)習(xí)了2個(gè)概念，才能正常開展下面的工作武福。第一個(gè)是edge與node的概念议双，edge可以理解為一個(gè)分頁(yè)對(duì)象，其中除了包含實(shí)際的數(shù)據(jù)外還有一個(gè)cursor（返回的每條數(shù)據(jù)的唯一標(biāo)識(shí)捉片，如果要分頁(yè)的話用得到這個(gè)數(shù)據(jù)平痰，配合before與after關(guān)鍵字來(lái)使用）字段，實(shí)際數(shù)據(jù)就是用node表示的伍纫。
????????另外GraphQL是強(qiáng)類型的宗雇，所以當(dāng)筆者用到的search返回的結(jié)果并不是一個(gè)明確的數(shù)據(jù)對(duì)象時(shí)，先需要通過(guò)node下的__typename字段來(lái)獲得實(shí)際的對(duì)象是什么莹规。代碼如下：
query {
? search(query:"language:c#",type:REPOSITORY,first:1){? ? edges{? ? ? cursor,? ? ? node{__typename}? ? }? }}
得到的結(jié)果是：
{
? "data": {
? ? "search": {
? ? ? "edges": [
? ? ? ? {
? ? ? ? ? "cursor": "Y3Vyc29yOjE=",
? ? ? ? ? "node": {
? ? ? ? ? ? "__typename": "Repository"? ? ? ? ? }
? ? ? ? }
? ? ? ]
? ? }
? }
}
????????得到的實(shí)際的數(shù)據(jù)對(duì)象是Repository之后赔蒲，通過(guò)查閱Github Api的文檔得到該對(duì)象有哪些字段，并且從中選擇需要的字段即可。這個(gè)就是GraphQL的設(shè)計(jì)天然優(yōu)勢(shì)之一舞虱，按需獲取欢际。單在接下去運(yùn)用的時(shí)候又需要引入一個(gè)新的概念fragment，這個(gè)可以理解為一個(gè)模板砾嫉，通過(guò)這個(gè)模板來(lái)向服務(wù)端指明需要獲取的數(shù)據(jù)字段幼苛。代碼如下：
fragment repFragment on Repository {
? name,
? forkCount,
? url,
? createdAt,
? updatedAt,
? licenseInfo{? //對(duì)象嵌套
? ? nickname? ? //licenseInfo的nickname字段
? },
? stargazers{? //對(duì)象嵌套
? ? totalCount? //stargazers的totalCount字段
? }
}
query {
? search(query:"language:c#",type:REPOSITORY,first:100){
? ? edges{
? ? ? cursor,
? ? ? node{
? ? ? ? __typename
? ? ? ? ...repFragment
? ? ? }
? ? }
? }
}
? 好了，這樣就得到我需要的結(jié)果了焕刮。
下面附上筆者做的Demo：https://github.com/ZacharyFan/GitHubRanking舶沿，其中的token在配置文件中自行替換即可。
四配并、結(jié)語(yǔ)
????????最后附帶提一下括荡，GraphQL的出現(xiàn)，主要的場(chǎng)景還是在于賦能前端開發(fā)溉旋，賦予了前端開發(fā)者自由組織和定制請(qǐng)求數(shù)據(jù)的能力畸冲。這是一個(gè)將前后端分離后的界限偏向前端的框架，所以直接在前端通過(guò)GraphQL訪問后端數(shù)據(jù)是個(gè)人比較推崇的方式观腊。目前前端非骋叵校火熱的GraphQL框架也不少，主流的就是下面2個(gè)：apollo（https://github.com/apollographql/apollo-client）梧油、relay（https://github.com/facebook/relay）苫耸。
GraphQL雖好，但是要真正在中大型項(xiàng)目中運(yùn)用GraphQL儡陨，還有有很大的困難的褪子，服務(wù)端需要支持到GraphQL的規(guī)范格式進(jìn)行數(shù)據(jù)輸出，我認(rèn)為需要付出的成本可不小骗村。哪怕的架設(shè)一層中間層嫌褪，也需要解決諸如分發(fā)、聚合和性能等問題胚股。
?作者：Zachary（個(gè)人微信號(hào)：Zachary-ZF）
微信公眾號(hào)（首發(fā)）：跨界架構(gòu)師笼痛。<-- 點(diǎn)擊查閱近期熱門文章
如果你是初級(jí)程序員，想提升但不知道如何下手琅拌。又或者做程序員多年缨伊，陷入了一些瓶頸想拓寬一下視野。歡迎關(guān)注我的公眾號(hào)「跨界架構(gòu)師」财忽，回復(fù)「技術(shù)」倘核，送你一份我長(zhǎng)期收集和整理的思維導(dǎo)圖泣侮。
如果你是運(yùn)營(yíng)即彪，面對(duì)不斷變化的市場(chǎng)束手無(wú)策。又或者想了解主流的運(yùn)營(yíng)策略，以豐富自己的“倉(cāng)庫(kù)”隶校。歡迎關(guān)注我的公眾號(hào)「跨界架構(gòu)師」漏益，回復(fù)「運(yùn)營(yíng)」，送你一份我長(zhǎng)期收集和整理的思維導(dǎo)圖深胳。
定期發(fā)表原創(chuàng)內(nèi)容：架構(gòu)設(shè)計(jì)丨分布式系統(tǒng)丨產(chǎn)品丨運(yùn)營(yíng)丨一些深度思考绰疤。
掃碼加入小圈子??
