學(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)是對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！是的，我知道，這個隱喻在第二次越來越大，我已經(jīng)後悔了。我的意思是：我們?yōu)閿?shù)據(jù)構(gòu)建了內(nèi)部GraphQL API，現(xiàn)在我們可以向所有人提供它，以便您也可以輕鬆利用數(shù)據(jù)集！

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

什麼是GraphQl？

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

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

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

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

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

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

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

在這裡，我們說我們想找到用戶的帖子，並加載其標(biāo)題和身體。關(guān)於GraphQl的好處是，我們的API層可以完成如何以特定格式獲取該額外信息的工作，因為我們不是直接與數(shù)據(jù)庫交談，即使它沒有以嵌套格式存儲在我們的實際數(shù)據(jù)庫中。

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

介紹GraphIQL

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

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

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

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

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

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

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

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

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

更改變量

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

使用資源管理器

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

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

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

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

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

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

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

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

結(jié)論

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

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

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

JavaScript API參考狀態(tài)

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

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

頂級字段

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

普通字段

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

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