使用JavaScript API練習GraphQl查詢

學習如何構建GraphQL API可能具有挑戰性。但是您可以學習如何在10分鐘內使用GraphQL API！碰巧的是，我擁有完美的API：JavaScript GraphQl API的全新，新鮮的VS代碼狀態。

JavaScript調查狀態是對JavaScript景觀的年度調查。我們已經做了四年了，最近版的開發人員超過20,000。

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

但是，由於蓋茨比（Gatsby）大便將其作為GraphQl所食用的所有數據源排出，但我們不妨跳過中間人並直接將其饋送為GraphQl！是的，我知道，這個隱喻在第二次越來越大，我已經後悔了。我的意思是：我們為數據構建了內部GraphQL API，現在我們可以向所有人提供它，以便您也可以輕鬆利用數據集！

“但是等等，”你說。 “我一生都在研究刀片，這讓我沒有時間學習GraphQl！”不用擔心：這就是本文的出現。

什麼是GraphQl？

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

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

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

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

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

如您所見，此示例中的用戶字段支持ID參數。現在，我們來到GraphQl的最酷功能，嵌套：

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

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

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

介紹GraphIQL

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

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

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

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

如果一切都按計劃進行，則應看到您的數據出現在結果面板中。讓我們花點時間分析查詢。

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

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

然後，我們進行了第一個領域的調查，該領域進行了調查論點。 （我們也有一個CSS調查狀態，因此我們需要指定有關調查的調查。）然後，我們有一個工具字段，該工具字段採用ID參數。之後的所有內容都與該特定工具的API結果有關。實體為您提供有關所選特定工具（例如React）的信息，而經驗包含實際的統計數據。

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

更改變量

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

使用資源管理器

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

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

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

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

過濾數據

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

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

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

結論

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

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

而且，如果您有興趣參加我們的下一個調查（應該是CSS 2020的狀態），請務必註冊我們的郵件列表，以便在我們啟動時可以通知您。

JavaScript API參考狀態

您可以在API.stateofjs.com上找到有關API的更多信息（包括指向實際端點和GitHub Repo的鏈接）。

這是JS API狀態內使用的術語的快速詞彙表。

頂級字段

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

普通字段

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

以上是使用JavaScript API練習GraphQl查詢的詳細內容。更多資訊請關注PHP中文網其他相關文章！