近年来， GraphQL 成为了越来越多开发者的关注点。GraphQL 是一种用于 API 设计的查询语言，它允许客户端像服务端提出请求，获取需要的、精确的数据。GraphQL 的一个主要优点是它可以减少网络传输数据的数量和提高应用的性能。在 React Native 中，GraphQL 也被广泛运用，接下来我们将详细介绍在 React Native 中使用 GraphQL 的入门知识和技巧。
GraphQL 入门
在 React Native 中使用 GraphQL，首先需要了解 GraphQL 的基本语法和概念。
查询
GraphQL 的查询语法与 JSON 相似，可以用来检索服务端数据。下面是一个查询 Github API 获取仓库信息的示例：
----- --------------------- -------- ------ -------- -
----------------- ------- ----- ------ -
----
-----------
---
---------- -
----------
-
-
-上述查询语句中，我们定义了一个名为 GetRepository 的查询，并传入了 owner 和 name 两个变量。在我们实际使用时，会把这些变量替换成真实的数据。
翻译
GraphQL 的翻译层是一个非常重要的概念。它将查询语句转换成一个或多个底层接口的调用。GraphQL 的翻译层是开源的，这意味着我们可以自己编写翻译器，以使其支持特定的数据源和操作。
操作类型
在 GraphQL 中，操作类型一共有三种，分别是 query、mutation 和 subscription。
- query：用于检索数据，相当于 REST API 中的 GET 请求。
- mutation：用于修改数据，相当于 REST API 中的 POST、PUT、DELETE 请求。
- subscription：用于订阅实时数据，相当于 Websocket。
模式
GraphQL 的模式用来描述数据的类型和关系。在 GraphQL 模式中，有两个主要概念：类型和字段。类型定义了某个数据的结构，而字段则描述了这个数据结构包含的字段。例如，在 Github API 的 GraphQL 模式中，以下操作会检索一个仓库，并返回它的代码库中包含的文件的列表：
----- --------------------- -------- ------ -------- -
----------------- ------- ----- ------ -
----
-----------
---
---------- -
----------
-
------------------ --------- -
--- -- ---- -
------- -
----
----
------ -
--- -- ---- -
----
-
-
-
-
-
-
-上述查询中，我们可以看到一个名为 Tree 的 Type，它包含了一个子字段 entries。entries 字段是一个集合类型，表示原始查询中的 object 是一个对象的数组。这个数组中的每一项都包含了一个 name 字段和一个 type 字段。对于数组中的每一个对象，我们需要进一步检索一个场景对象，因此需要使用子查询的方式。
在 React Native 中使用 GraphQL，首先需要安装 Apollo Client。Apollo Client 是一个流行的 GraphQL 客户端库，它是一个强大的工具，可以用于管理数据缓存和提供出色的性能。下面是安装指南：
--- ------- ------ ------------ ------------ -----------
创建客户端
在 React Native 中，要使用 Apollo Client，我们需要先创建一个 Apollo Client 实例。这个实例是一个配置对象，它告诉 Apollo 如何连接到 GraphQL 服务器，并如何处理响应。下面是一个示例 Apollo Client 配置：
------ ------------ ---- ---------------
----- ------ - --- --------------
---- -------------------------------- -- --
-------- ----- ----------- -- - -- ----
----------------------
-------- -
---------------- ------- ---------
-
---
--
-------- -- ------------- ------------- -- -- - -- ----
-------------------- -------- --------------
-------------------- -------- ---------------
-
---上述代码中，我们创建了一个 ApolloClient 实例，并指定了 GraphQL 服务器的地址。我们还提供了一个请求钩子，在这个钩子中，我们将令牌附加到请求头中，以便服务器可以将请求与某个用户的身份关联起来。最后，我们提供了一个错误处理器，用于处理响应中的任何错误。
发送查询请求
在创建了 Apollo Client 实例后，我们就可以使用它从服务器获取数据了。要发送请求，我们可以使用 React Apollo 提供的 Query 组件。Query 组件是一个高阶组件，它能够将从服务器检索到的数据传递给我们的 React 组件。
下面是一个使用 Query 组件获取 Github 仓库信息的示例：
------ - ----- - ---- ---------------
------ --- ---- --------------
----- -------------- - ----
----- --------------------- -------- ------ -------- -
----------------- ------- ----- ------ -
----
-----------
---
---------- -
----------
-
-
-
--
----- ----------------- ------- --------------- -
-------- -
------ -
------ ---------------------- ------------ ------ ----------- ----- ------- ---
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------------
-- ------- ------ ----------- ----------
------ -
------
-----------------------------------
------------------------------------------
----------------------------------
------------ ----------------------------------------------
-------
--
--
--------
--
-
-上述代码中，我们使用 Query 组件来发送一个名为 GetRepository 的查询，并将 owner 和 name 作为变量传递。在 render 方法中，我们使用 data 属性获取响应字段，并将它们渲染到一些文本视图中。
发送变异请求
在使用 GraphQL 时，我们不仅可以检索数据，还可以使用变异请求来修改远程数据。为了使用变异请求，我们可以使用 Mutation 组件。
下面是一个使用 Mutation 组件将用户添加到 Github 组织的示例：
------ - -------- - ---- ---------------
------ --- ---- --------------
----- ---------- - ----
-------- ---------------------------- -------- ---------- -------- -
--------------------------- ------------------ --------- ---------- -
--------
-
-
--
----- ------------- ------- --------------- -
----- - -
----------------- ---
--------- --
--
---------------------------- - ------ -- -
--------------- ----------------- ---- ---
--
-------------------- - ------ -- -
--------------- --------- ---- ---
--
------------ - ----------- -- -
----------- ---------- ---------- ---
--
-------- -
------ -
--------- ----------------------
------------ - ---- -- -- -
------
---------- ------------------------------------------------ --
---------- ---------------------------------------- --
------- ---------- ------- ----------- -- ----------------------------- --
-------
--
-----------
--
-
-上述代码中，我们定义了一个名为 AddMember 的变异请求。我们使用 Mutation 组件来发送这个变异请求，并将变量 organizationName 和 userName 传递给服务端。在 render 方法中，我们定义了一组输入元素和一个提交按钮。当用户提交表单时，我们调用 handleSubmt 方法来发送变异请求。
结论
在 React Native 应用中使用 GraphQL 是一个非常强大的工具，它可以大大提高应用的性能并减少网络传输。通过本文的介绍，我们可以看到 GraphQL 在 React Native 中的使用方法是非常简单和直观的。无论是查询或者变异请求，我们都可以通过 React Apollo 提供的组件来处理。在实际开发过程中，不断地练习和学习，将会使我们更加熟练掌握 GraphQL 和 React Native 开发。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67384e6f317fbffedf0f7966