开始使用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客户端。 安装说明可在此处提供

。 项目概述：

该教程通过创建咖啡豆比较应用程序来展示GraphQl在React Native中的功能。 提供了使用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中文网其他相关文章！