學(xué)習(xí)如何構(gòu)建GraphQL API可能具有挑戰(zhàn)性。但是您可以學(xué)習(xí)如何在10分鐘內(nèi)使用GraphQL API！碰巧的是，我擁有完美的API：JavaScript GraphQl API的全新，新鮮的VS代碼狀態(tài)。

JavaScript調(diào)查狀態(tài)是對(duì)JavaScript景觀的年度調(diào)查。我們已經(jīng)做了四年了，最近版的開發(fā)人員超過20,000。

我們一直依靠蓋茨比建立我們的展示網(wǎng)站，但是直到今年，我們一直以一種通過某種僅僅是凡人稱為“ Elasticsearch”的奧術(shù)魔術(shù)而生成的靜態(tài)YAML文件的形式，以靜態(tài)的YAML文件的形式提供給Gatsby。

但是，由于蓋茨比（Gatsby）大便將其作為GraphQl所食用的所有數(shù)據(jù)源排出，但我們不妨跳過中間人并直接將其饋送為GraphQl！是的，我知道，這個(gè)隱喻在第二次越來越大，我已經(jīng)后悔了。我的意思是：我們?yōu)閿?shù)據(jù)構(gòu)建了內(nèi)部GraphQL API，現(xiàn)在我們可以向所有人提供它，以便您也可以輕松利用數(shù)據(jù)集！

“但是等等，”你說。 “我一生都在研究刀片，這讓我沒有時(shí)間學(xué)習(xí)GraphQl！”不用擔(dān)心：這就是本文的出現(xiàn)。

什么是GraphQl？

GraphQl的核心是一種語法，可讓您指定要從API接收的數(shù)據(jù)。請(qǐng)注意，我說的是API ，而不是數(shù)據(jù)庫(kù)。與SQL不同，GraphQl查詢不是直接轉(zhuǎn)到數(shù)據(jù)庫(kù)，而是轉(zhuǎn)到您的GraphQl API端點(diǎn)，該端點(diǎn)可以連接到數(shù)據(jù)庫(kù)或任何其他數(shù)據(jù)源。

GraphQl比REST（如REST）的最大優(yōu)勢(shì)在于，它可以讓您要求您想要什么。例如：

詢問 {
  用戶（id：“ foo123”）{
  姓名
 }
}

將為您提供具有單個(gè)名稱字段的用戶對(duì)象。還需要電子郵件嗎？只是做：

詢問 {
 用戶（id：“ foo123”）{
  姓名
  電子郵件
 }
}

如您所見，此示例中的用戶字段支持ID參數(shù)?，F(xiàn)在，我們來到GraphQl的最酷功能，嵌套：

詢問 {
 用戶（id：“ foo123”）{
  姓名
  電子郵件
    帖子{ 
      標(biāo)題
      身體
    }
  }
}

在這里，我們說我們想找到用戶的帖子，并加載其標(biāo)題和身體。關(guān)于GraphQl的好處是，我們的API層可以完成如何以特定格式獲取該額外信息的工作，因?yàn)槲覀儾皇侵苯优c數(shù)據(jù)庫(kù)交談，即使它沒有以嵌套格式存儲(chǔ)在我們的實(shí)際數(shù)據(jù)庫(kù)中。

塞巴斯蒂安·斯科爾（Sebastian Scholl）的出色工作在解釋graphql時(shí)，就好像您是在雞尾酒攪拌機(jī)上第一次見面一樣。

介紹GraphIQL

GraphIQL（注意其中的“ i”）是那里最常見的GraphQl IDE，它是我們將用于探索JavaScript API狀態(tài)的工具。您可以立即在graphiql.stateofjs.com上啟動(dòng)它，并且它將自動(dòng)連接到我們的端點(diǎn)（即api.stateofjs.com/graphql）。 UI由三個(gè)主要要素組成：探險(xiǎn)家面板，查詢構(gòu)建器和結(jié)果面板。稍后，我們將其添加到其中，但現(xiàn)在讓我們保持簡(jiǎn)單。

Explorer選項(xiàng)卡是由OneGraph開發(fā)和維護(hù)的渦輪增壓版本的一部分。非常感謝他們幫助我們整合它。如果要部署自己的graphiql實(shí)例，請(qǐng)務(wù)必查看他們的示例存儲(chǔ)庫(kù)。

不用擔(dān)心，我不會(huì)讓您編寫任何代碼。取而代之的是，讓我們從現(xiàn)有的GraphQl查詢開始，例如與過去四年相對(duì)應(yīng)的React的開發(fā)人員體驗(yàn)的查詢。

還記得我說我們?cè)趦?nèi)部使用GraphQl來構(gòu)建我們的網(wǎng)站嗎？我們不僅要公開API，而且還可以自己揭露查詢。單擊小“導(dǎo)出”按鈕，在“ GraphQl”選項(xiàng)卡中復(fù)制查詢，將其粘貼到Graphiql的查詢構(gòu)建器窗口中，然后單擊“播放”按鈕。

如果一切都按計(jì)劃進(jìn)行，則應(yīng)看到您的數(shù)據(jù)出現(xiàn)在結(jié)果面板中。讓我們花點(diǎn)時(shí)間分析查詢。

查詢React_experienceQuery {
  調(diào)查（調(diào)查：JS）{
    工具（id：react）{
      ID
      實(shí)體 {
        首頁(yè)
        姓名
        github {
          URL
        }
      }
      經(jīng)驗(yàn) {
        Allyears {
          年
          全部的
          完成{
            數(shù)數(shù)
            百分比
          }
          意識(shí)感興趣{
            意識(shí)
            興趣
            滿意
          }
          水桶{
            ID
            數(shù)數(shù)
            百分比
          }
        }
      }
    }
  }
}

首先是查詢關(guān)鍵字，該關(guān)鍵字定義了我們的GraphQl查詢的開始以及查詢的名稱react_experienceQuery。查詢名稱在GraphQL中是可選的，但對(duì)于調(diào)試目的可能很有用。

然后，我們進(jìn)行了第一個(gè)領(lǐng)域的調(diào)查，該領(lǐng)域進(jìn)行了調(diào)查論點(diǎn)。 （我們也有一個(gè)CSS調(diào)查狀態(tài)，因此我們需要指定有關(guān)調(diào)查的調(diào)查。）然后，我們有一個(gè)工具字段，該工具字段采用ID參數(shù)。之后的所有內(nèi)容都與該特定工具的API結(jié)果有關(guān)。實(shí)體為您提供有關(guān)所選特定工具（例如React）的信息，而經(jīng)驗(yàn)包含實(shí)際的統(tǒng)計(jì)數(shù)據(jù)。

現(xiàn)在，我將教您一個(gè)小技巧：命令單擊（或控制單擊）GraphIQL中的任何一個(gè)字段，而是會(huì)啟動(dòng)Docs面板。恭喜，您剛剛目睹了GraphQl的另一個(gè)技巧，即自我證明！您可以將文檔直接寫入API定義，而GraphIQL將依次將其用于最終用戶。

更改變量

讓我們進(jìn)行一些調(diào)整：在查詢構(gòu)建器中，用“ vuejs”替換“ react”，您應(yīng)該注意到另一個(gè)很酷的GraphQl Thing：Auto-Completion。這對(duì)于避免犯錯(cuò)或節(jié)省時(shí)間非常有幫助！再次按“ Play”，您將獲得相同的數(shù)據(jù)，但是這次為VUE。

使用資源管理器

現(xiàn)在，我們將再解鎖一個(gè)GraphQl電源工具：Explorer。資源管理器基本上是整個(gè)API的樹，不僅可以使您可視化其結(jié)構(gòu)，而且還可以在不編寫一行代碼的情況下構(gòu)建查詢！因此，讓我們嘗試使用Explorer這次重新創(chuàng)建React查詢。

首先，讓我們打開一個(gè)新的瀏覽器選項(xiàng)卡，并在其中加載graphiql.stateofjs.com以開始新鮮。單擊Explorer中的調(diào)查節(jié)點(diǎn)，在其下方的工具節(jié)點(diǎn)下，單擊“播放”。該工具的ID字段應(yīng)自動(dòng)添加到結(jié)果中，順便說一句，這是將默認(rèn)參數(shù)值（“ typeScript”）更改為“ React”的好時(shí)機(jī)。

接下來，讓我們繼續(xù)鉆探。如果您添加沒有任何子字段的實(shí)體，則應(yīng)該在其下面看到一條小彎曲的紅線，讓您知道您還需要指定至少一個(gè)或多個(gè)子場(chǎng)。因此，讓我們至少添加ID，名稱和主頁(yè)。另一個(gè)有用的技巧：您可以自動(dòng)告訴GraphIQL通過將其控制在Explorer中鍵入選項(xiàng)，以添加所有字段的子字段。

接下來是經(jīng)驗(yàn)。繼續(xù)添加字段和子字段，直到您獲得最初從JavaScript網(wǎng)站復(fù)制的查詢的內(nèi)容。您選擇的任何項(xiàng)目都會(huì)立即反映在查詢構(gòu)建器面板內(nèi)。在那里，您剛剛寫了第一個(gè)GraphQl查詢！

過濾數(shù)據(jù)

您可能已經(jīng)注意到經(jīng)驗(yàn)豐富的紫色過濾器項(xiàng)目。實(shí)際上，這是您要使用我們的GraphQL API而不是簡(jiǎn)單地瀏覽我們的網(wǎng)站的關(guān)鍵原因：API提供的任何聚合都可以通過許多因素過濾，例如受訪者的性別，公司規(guī)模，工資，工資或國(guó)家 /地區(qū)。

擴(kuò)展過濾器，然后選擇CompanySize，然后選擇EQ和Range_more_than_1000。您剛剛計(jì)算了React在大公司中的知名度！相反，選擇Range_1，您現(xiàn)在可以將其與自由職業(yè)者和獨(dú)立開發(fā)人員之間的同一數(shù)據(jù)點(diǎn)進(jìn)行比較。

重要的是要注意，GraphQL僅定義非常低級(jí)別的原始詞，例如字段和參數(shù)，因此這些等式，IN，NIN等。過濾器不是GraphQl本身的一部分，而是我們?cè)谠O(shè)置API時(shí)已經(jīng)定義了自己的參數(shù)。一開始這可能是很多工作，但是它確實(shí)可以使您完全控制客戶如何查詢API。

結(jié)論

希望您已經(jīng)看到查詢GraphQl API并不是那么大，尤其是使用GraphiQl之類的很棒的工具來幫助您完成?，F(xiàn)在可以肯定的是，實(shí)際將GraphQl數(shù)據(jù)集成到現(xiàn)實(shí)世界應(yīng)用程序中是另一回事，但這主要是由于處理客戶端和服務(wù)器之間的數(shù)據(jù)傳輸?shù)膹?fù)雜性。 GraphQL部分本身實(shí)際上很容易！

無論您是希望開始使用GraphQL還是只是學(xué)習(xí)足以查詢我們的數(shù)據(jù)并提出一些令人驚嘆的新見解，我希望本指南能夠證明有用！

而且，如果您有興趣參加我們的下一個(gè)調(diào)查（應(yīng)該是CSS 2020的狀態(tài)），請(qǐng)務(wù)必注冊(cè)我們的郵件列表，以便在我們啟動(dòng)時(shí)可以通知您。

JavaScript API參考狀態(tài)

您可以在API.stateofjs.com上找到有關(guān)API的更多信息（包括指向?qū)嶋H端點(diǎn)和GitHub Repo的鏈接）。

這是JS API狀態(tài)內(nèi)使用的術(shù)語的快速詞匯表。

頂級(jí)字段

• 人口統(tǒng)計(jì)：重組所有人口統(tǒng)計(jì)信息，例如性別，公司規(guī)模，工資等。
• 實(shí)體：訪問有關(guān)特定“實(shí)體”（庫(kù)，框架，編程語言等）的更多信息。
• 功能：特定JavaScript或CSS功能的使用數(shù)據(jù)。
• 功能：相同，但遍布一系列功能。
• 矩陣：訪問用于填充我們的交叉參考熱圖的數(shù)據(jù)。
• 意見：特定問題的意見數(shù)據(jù)（例如“您認(rèn)為JavaScript正在朝正確的方向移動(dòng)？”）。
• 其他工具： “其他工具”部分的數(shù)據(jù)（文本編輯器，瀏覽器，捆綁器等）。
• 資源： “資源”部分的數(shù)據(jù)（網(wǎng)站，博客，播客等）。
• 工具：體驗(yàn)特定工具（庫(kù)，框架等）的數(shù)據(jù)。
• 工具：相同，但跨各種工具。
• ToolsRankings：一系列工具的排名（意識(shí)，興趣，滿意度）。

普通字段

• 完成：哪個(gè)比例的受訪者回答了任何給定的問題。
• 存儲(chǔ)桶：包含實(shí)際數(shù)據(jù)的數(shù)組。
• 年份/Allyears：是否獲取特定調(diào)查年度的數(shù)據(jù)；或包含全年的陣列。

以上是使用JavaScript API的狀態(tài)練習(xí)GraphQl查詢的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！