GraphQL 是一种由 Facebook 发明的用于 API 设计的查询语言和执行引擎。它的灵活度和效率使其成为了构建现代Web 应用程序的一种有力选择。React Native 是一个流行的跨平台移动开发框架，而且它可以很好地与 GraphQL 配合使用。在本文中，我们将提供一个完整的教程，以指导您如何在 React Native 应用程序中使用 GraphQL。
GraphQL 是什么
GraphQL 不仅是一种能够帮助我们设计应用程序 API 的语言，还是一个拥有运行时数据执行引擎的技术堆栈。在几年的发展中，GraphQL 逐渐成为了许多开发者的首选工具。有许多方面使 GraphQL 受欢迎：与 RESTful API 相比，GraphQL 允许开发者查询所需数据的精确字段，加快了客户端的数据加载和响应速度；GraphQL 还可以轻松地处理多个数据源，通过操作 GraphQL 的数据层，我们可以优化移动应用程序的性能和功能。
GraphQL 如何工作
GraphQL 查询不是由服务器提供的 API路由处理的，而是由客户端直接与 GraphQL 服务通信进行处理。这意味着 GraphQL 服务将通过 GraphQL 查询语言提供一个 API，客户端将发送一系列查询，然后服务器将返回结果。当客户端发送一个 GraphQL 查询时，它将指定要返回的数据属性，而不是整个文档。这让应用程序开发者能够具有更好的控制权和灵活度，以确定返回的数据属性。
在React Native 应用程序中使用 GraphQL
使用 GraphQL 服务的过程是基本相同的，不计入使用的编程语言或框架。在 React Native 应用程序中，我们将使用 Apollo Client 包来实现 GraphQL 查询和数据管理。在 React Native 应用程序中使用 GraphQL 有几个步骤：
步骤1：安装依赖
在命令行工具中使用以下命令安装 Apollo Client 包：
--- ------- ------------ ------------ ----------- ------- ------
在这个过程中，这些依赖项将被安装并包括在您的项目中：
- apollo-boost - 预定义了一些可用于创建 Apollo Client 的默认参数，包括缓存，在创建客户端实例时使用，
- react-apollo - 用于将 Apollo Client 集成到 React 组件中的 React 高阶组件
- graphql-tag - 用于处理 GraphQL 查询的模板字符串，使用它可以使代码更易于阅读与维护
- graphql - 核心 GraphQL 库
步骤2：创建 Apollo Client
在 index.js 文件中创建 Apollo Client 实例。您可以使用 createHttpLink 函数设置与服务端连接的 URL （如果您使用的是 GraphiQL，则 URL 应与 GraphiQL URL 相同），然后将之放入 Apollo Client 构造函数中。
------ - ------------ - ---- ---------------- ------ - -------------- - ---- ------------------- ------ - ------------- - ---- ------------------------ ----- -------- - ---------------- ---- ------------------------------ --- ----- ----- - --- ---------------- ----- ------ - --- -------------- ----- --------- ------ ---
在这个过程中，我们创建了一个 httpLink 对象，使用它可以设置接口请求 URL ，这里的 URL 替换为您的 GraphQL API 端点。
步骤3：创建一个 GraphQL Query
现在您可以创建一个 GraphQL 查询。使用 gql 函数创建一个封装过的 GraphQL 查询字符串。将该查询用于 Query 组件，并将查询和组件包装在 graphql 函数中，以便您的应用程序可以访问由 Apollo Client 支持的 GraphQL API。例如：
------ - --- - ---- ---------------
------ - ----- - ---- ---------------
----- ---------- - ----
----- ------------- -
----- -
--
----
---
-
-
--
----- --- - -- -- -
------ -------------------
--- -------- ------ ---- -- -- -
-- --------- ------ -------------
-- ------- ------ ------- ------------------
------ -
----
-------------------- -- -
--- --------------
------------------
-----------------
-----
---
-----
--
--
--------
--在这个过程中，我们将 Loading... 或 Error! {error.message} 显示为初始状态，我们使用 users.map 方法来显示用户列表，并将字符串模板插入组件中以显示每个用户的信息。
步骤4：在 React Native 应用程序中使用 Apollo Client
现在您可以在 React Native 应用程序中使用 Apollo Client 和 GraphQL 查询。为此，要将 client 对象传递到 ApolloProvider 组件中，如下所示：
------ - -------------- - ---- ---------------
----- --- - -- -- -
--------------- ----------------
------ -------------------
--- -------- ------ ---- -- -- -
-- --------- ------ -------------
-- ------- ------ ------- ------------------
------ -
----
-------------------- -- -
--- --------------
------------------
-----------------
-----
---
-----
--
--
--------
-----------------
--在这个过程中，我们使用 ApolloProvider 将 client 对象包裹在测试应用程序的根组件中。这使我们可以使用 React 的 Bakery Devtools 来检查 Apollo 缓存和 Query 使用情况，并可以用于在同一验收测试工具中仿真 iOS 或 Android 用户。
结论
GraphQL 是一个独立于编程语言和框架的强大查询语言和执行引擎，可以帮助您在 React Native 应用程序中优化数据性能和功能。例如，GraphQL 允许高度可定制的查询，可以部分加载应用程序组件，提高资源使用率并提高响应速度。在 React Native 应用程序中使用 GraphQL 可以轻松实现，效果也非常好，Apollo Client 使我们能够轻松使用 GraphQL，因此我们强烈建议您使用 GraphQL 来优化您的移动应用程序的数据层。
参考文献
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673920c3317fbffedf154a94