GraphQL 是一种用于 API 的查询语言，它可以让客户端精确定义需要获取的数据。React Native 是一种跨平台的移动应用开发框架，它可以使用 JavaScript 构建原生移动应用。在 React Native 应用中使用 GraphQL 可以让我们更加高效地获取和管理数据。
安装和配置
首先，我们需要安装 react-apollo 和 graphql-tag 库。react-apollo 是一个用于在 React 应用中使用 GraphQL 的库，graphql-tag 则是一个用于解析 GraphQL 查询的库。
npm install --save react-apollo graphql-tag
然后，我们需要在应用中配置 ApolloProvider，这是一个 React 组件，它可以将 GraphQL 客户端注入整个应用中。我们还需要创建一个 Apollo 客户端，这个客户端负责与 GraphQL 服务器进行通信。
-- -------------------- ---- -------
------ - -------------- - ---- ---------------
------ ------------ ---- ---------------
----- ------ - --- --------------
---- ----------------------------------
---
----- --- - -- -- -
--------------- ----------------
------ --
-----------------
--在上面的代码中，我们创建了一个 Apollo 客户端，它的 uri 属性指向了 GraphQL 服务器的地址。然后，我们使用 ApolloProvider 将这个客户端注入整个应用中。
查询数据
现在，我们可以在应用中使用 GraphQL 查询数据了。首先，我们需要定义一个 GraphQL 查询，这个查询描述了我们需要获取的数据。我们可以使用 graphql-tag 库中的 gql 函数来定义一个查询。
-- -------------------- ---- -------
------ --- ---- --------------
----- --------- - ----
----- -------- -
----- -
--
----
-
-
--在上面的代码中，我们定义了一个名为 getUsers 的查询，它将返回所有用户的 id 和 name 字段。
然后，我们可以使用 react-apollo 库中的 Query 组件来执行这个查询，并将查询结果渲染到应用中。
-- -------------------- ---- -------
------ - ----- - ---- ---------------
----- -------- - -- -- -
------ ------------------
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------------
-- ------- ------ ----------- ----------
------ ------------------- -- -
----- --------------------------------
---
--
--------
--在上面的代码中，我们使用 Query 组件来执行 GET_USERS 查询。Query 组件接受一个 query 属性，它指定了要执行的查询。Query 组件的子组件是一个函数，这个函数接受一个包含查询结果的对象。我们可以根据这个对象中的 loading、error 和 data 属性来渲染不同的内容。
变更数据
除了查询数据，GraphQL 还可以用于变更数据。我们可以使用 Mutation 组件来执行 GraphQL 变更操作。
-- -------------------- ---- -------
------ - -------- - ---- ---------------
----- -------- - ----
-------- -------------- -------- -
------------- ------ -
--
----
-
-
--
----- ----------- - -- -- -
--- ------
------ -
---------
-------------------
--------------- - ----- - ------- - -- -- -
----- - ----- - - ----------------- ------ --------- ---
------------------
------ ----------
----- - ------ ----------------------- --
---
--
-
---------- - ---- -- -- -
------
----------
--------- -- -
----- - -----
--
--
-------
---------- -----
----------- -- -
--------- ---------- - ----- ----------- - ---
--------------
--
--
-------
--
-----------
--
--在上面的代码中，我们定义了一个名为 addUser 的变更操作，它接受一个名为 name 的参数，并返回新创建的用户的 id 和 name 字段。
然后，我们使用 Mutation 组件来执行这个变更操作。Mutation 组件接受一个 mutation 属性，它指定了要执行的变更操作。Mutation 组件的子组件是一个函数，这个函数接受一个 mutate 函数和一个包含变更结果的对象。我们可以使用 mutate 函数来执行变更操作，并将变更结果保存到应用中。
在上面的代码中，我们在变更操作完成后更新了缓存中的用户列表。我们使用 cache.readQuery 方法从缓存中读取当前的用户列表，然后使用 cache.writeQuery 方法将新的用户添加到列表中。
结论
在 React Native 应用中使用 GraphQL 可以让我们更加高效地获取和管理数据。我们可以使用 react-apollo 和 graphql-tag 库来执行 GraphQL 查询和变更操作。对于查询操作，我们可以使用 Query 组件来执行查询并将查询结果渲染到应用中。对于变更操作，我们可以使用 Mutation 组件来执行变更操作并更新应用中的数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675b7cc7cf21dbe5eaa4efe5