GraphQL 是一种用于 API 的查询语言，是一个与语言无关、被定义为标准的数据查询和操作语言。GraphQL 在前端中，尤其是在 React Native 框架中得到了广泛的应用。在本文中，我们将探讨 GraphQL 在 React Native 中的应用实践及常见问题，并提供相应的示例代码。
GraphQL 的优点
GraphQL 相较于传统的 RESTful API 有以下优点：
- 可以一次性获取多个数据属性
- 降低了数据传输量，减少了网络请求负载
- 自定义返回数据和字段格式
- 前端可以减少 Reduex 技术的使用
React Native 中的应用实践
安装 GraphQL
要在 React Native 中使用 GraphQL，需要先安装 GraphQL。可以使用 npm 安装：
npm install graphql
定义 GraphQL 查询
在 React Native 中定义 GraphQL 查询需要使用 gql 来引用，并使用 query 函数将查询语句传递给 Apollo。
-- -------------------- ---- -------
------ - --- - ---- ---------------
------ - ----- - ---- ---------------
----- --------- - ----
-
----- -
--
----
-
-
--
----- --- - -- -- -
------ ------------------
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------------
-- ------- ------ ------------ -----------------------
------ ----------------- --- ---- -- -- -
----- ----------------------
---
--
--------
--上面的代码中，我们先定义了一个 GET_USERS 查询语句，并将其传递给 Apollo 的 Query 组件。在组件中，我们检测数据的加载状态，如果是正在加载中，我们将显示“正在加载”；如果存在错误，我们将显示错误信息；如果数据加载成功，我们将遍历所有的数据并显示它们的名称。
设置 Apollo Client
在 React Native 中，我们需要手动设置 Apollo Client。我们首先需要引入 ApolloClient 和 HttpLink，然后我们将设置链接和缓存。最后，将 ApolloProvider 组件包裹在根组件周围，以便整个应用程序使用此客户端。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- ----------------
------ - ------------- - ---- ------------------------
------ - -------- - ---- -------------------
------ - -------------- - ---- ---------------
------ --- ---- --------
----- ----- - --- ----------------
----- ---- - --- ----------
---- -------------------------------
---
----- ------ - --- --------------
------
----
---
------ ------- -------- ------ -
------ -
--------------- ----------------
---- --
-----------------
--
-使用 Mutation
在 React Native 中使用 Mutation 需要定义一个 mutation 对象，然后使用 graphql 标记模板字符串定义 mutation 语句。mutation 对象包含一个名为 mutation 的字段，该字段的值是一个函数，该函数接收了 graphql 函数并将其应用于 Mutation。在 Mutation 的 update 回调中，我们读取更新数据条目的 ID，然后将其添加到缓存中，并将其传递到下一个链接。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ---------------
------ --- ---- --------------
----- -------- - ----
-------- ------------------ -------- --------- -------- -
----------------- ------- -------- --------- -
--
-----
-------
-
-
--
----- --- - -- -- -
--- -----------
--- -------------
------ -
--------- --------------------
------------- - ---- -- -- -
-----
-----
----------- -- -
-------------------
------------
---------- -
------ -----------------
-------- ------------------
-
---
---------------- - ---
------------------ - ---
--
-
------
--------- -- -
---------- - -----
--
--
------
--------- -- -
------------ - -----
--
--
------- ----------------- -------------
-------
------
--
-----------
--
--在上面的代码中，我们定义了一个 ADD_POST mutation 对象，它接受两个参数 title 和 content，然后返回 id、title 和 content 数据。我们还定义了一个组件，该组件包含了一个名为 createPost 的 mutation 函数。mutation 函数可以通过提交表单并传递所需的参数来调用。
常见问题
缓存
GraphQL 中的缓存非常强大，在进行查询之前，它会首先检查缓存。然而，在某些情况下，您可能希望在发生突变后刷新缓存。在这种情况下，您可以使用 Apollo 重新查询数据，如下所示：
-- -------------------- ---- -------
----- --------- - ----
-
----- -
--
-----
-
-
--
----- -------- - ----
-------- ------------------ -------- --------- -------- -
----------------- ------- -------- --------- -
--
-----
-
-
--
----- ------- - -- -- -
--- -----------
--- -------------
------ -
---------
-------------------
--------------- - ----- - ---------- - -- -- -
----- - ----- - - ----------------- ------ --------- ---
------------------
------ ----------
----- - ------ -------------------------- -
---
--
-
------------- - ---- -- -- -
-----
-----
----------- -- -
-------------------
------------
---------- -
------ -----------------
-------- ------------------
-
---
---------------- - ---
------------------ - ---
--
-
------
--------- -- -
---------- - -----
--
--
------
--------- -- -
------------ - -----
--
--
------- ----------------- -------------
-------
------
--
-----------
--
--在上面的代码中，我们使用 update 属性来更新缓存。在 createPost 突变之后，我们将使用 readQuery 和 concat() 方法来读取和更新缓存中的数据。
Fragments
在 GraphQL 中使用片段类似于 React 中的组合组件。使用片段可以将重复代码存储在单个地方，并从多个查询结果中复用它们。以下是一个示例：
-- -------------------- ---- -------
----- ------------- - ----
-------- ------------ -- ---- -
--
-----
-
--
----- --------- - ----
-
----- -
---------------
-
-
----------------
--
----- -------- - ----
-------- ------------------ -------- --------- -------- -
----------------- ------- -------- --------- -
---------------
-
-
----------------
--在上面的代码中，我们首先定义了 POST_FRAGMENT 片段，并将其应用于 GET_POSTS 和 ADD_POST 查询中。片段的定义在查询之外，它不是查询本身的一部分，因此我们需要将其作为模板字符串的第二个参数传递。
结论
GraphQL 提供了许多优点，例如可以一次性获取多个数据属性、降低了数据传输量、自定义返回数据和字段格式等等。与传统的 RESTful API 相比，GraphQL 在 React Native 应用中更为方便、灵活。本文中，我们提供了关于如何在 React Native 中使用 GraphQL 的应用实践及常见问题，并对示例代码进行了详细说明。希望能够对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670a04a9d91dce0dc87dcf89