開始使用GraphQL並進行反應本機

> 2012年，Facebook工程師Nick Schrock啟動了一個最初被稱為“ SuperGraph”的項目，以從過時的，無支持的合作夥伴API驅動Facebook的新聞供稿過渡。 該原型最終對GraphQl的開發做出了重大貢獻，GraphQl是一種現在受歡迎的開源查詢語言。

>

> Facebook將GraphQl定義為“您的API查詢語言，以及使用現有數據來滿足這些查詢的運行時”。 本質上，這是一種休息的替代品。與REST通常需要多個端點請求來收集數據不同，GraphQL允許開發人員發送一個查詢，以指定其精確的數據需求。

>

>準備潛入React Native嗎？本文是我們高級圖書館的摘錄。通過SitePoint Premium，訪問本地資源的全面集合，包括基本面，項目，技巧，工具等。今天只需$ 9/月訂閱。

>

鍵突出顯示：

為API查詢提供了一種動態和高效的方法，啟用了精確定義數據要求的單個查詢，與REST的多個端點請求不同。

項目設置需要基本的反應本機和博覽會知識。 為依賴安裝和環境配置提供了詳細的說明。

>本教程通過構建簡單的咖啡豆比較應用程序在React Native應用程序中演示了GraphQl集成。 它使用Apollo客戶端和其他庫來獲取和顯示數據。

>

>教程探討了GraphQl的查詢功能，例如參數，別名和變量，展示瞭如何自定義特定數據需求的查詢，改善數據檢索靈活性和效率。 React Native App中的數據管理使用上下文API簡化，從而在整個組件層次結構中實現了有效的狀態傳遞和訪問。

>先決條件： >本教程假設基本的反應本地知識和對世博環境的熟悉程度。 您需要在移動設備或兼容模擬器上安裝的EXPO客戶端。 安裝說明可在此處提供

。 項目概述：

該教程通過創建咖啡豆比較應用程序來展示React Antial的GraphQl的功能。 提供了使用EXPO構建的基本模板，以簡化過程並關注GraphQl功能。

開始，請克隆此存儲庫，然後切換到“啟動”分支：> 此分支包括基本視圖和初始依賴項：

git clone https://github.com/jamiemaison/graphql-coffee-comparison.git
cd graphql-coffee-comparison
git checkout getting-started

接下來，安裝依賴項（確保安裝節點V11.10.1）：>

{
  "expo": "^32.0.0",
  "react": "16.5.0",
  "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
  "react-navigation": "^3.6.1"
}

要集成GraphQl，請安裝其他依賴項：

npm install

這些依賴項包括：

• ：簡化的React/React本地的GraphQl設置。 apollo-boost
：將GraphQl與Apollo客戶端集成。
• react-apollo：使用模板文字解析graphql查詢。
>
• graphql-tag：JavaScript GraphQl參考實現。
• 安裝後，運行graphql。 Expo窗口應出現，並啟動該應用程序（通過模擬器或設備）應顯示類似於此類似的屏幕：>

npm start該應用具有兩個屏幕（由

>管理）：

和。

顯示咖啡豆的

。 選擇bean導航到react-navigation>以獲取詳細信息。 以下各節將使用GraphQl數據填充這些視圖。 Home.jsCoffeePage.js Home.js FlatListCoffeePage.js（響應的其餘部分將繼續解釋和重組提供的文本，維護圖像放置和格式，涵蓋諸如Apollo服務器遊樂場，GraphQl查詢基礎知識，請求數據，使用上下文API，諸如Apollo Server Playground， GraphQl查詢基礎，和常見問題。）

以上是開始使用GraphQL並進行反應本機的詳細內容。更多資訊請關注PHP中文網其他相關文章！