GraphQL 是一种用于 API 的查询语言，它可以让客户端精确地描述它需要的数据，并从服务器获取它们。React-Native 是一个用于构建原生应用程序的框架，它可以使用 GraphQL 作为数据源来获取数据。在本文中，我们将讨论如何在 React-Native 中使用 GraphQL。
GraphQL 的基本概念
在开始使用 GraphQL 之前，我们需要了解一些基本概念。
Schema
GraphQL Schema 是定义查询类型和字段的集合。它描述了可用的查询和变异操作，以及它们返回的数据类型。
Query
GraphQL 查询是一个用于获取数据的字符串。它描述了客户端需要的数据，并根据 Schema 从服务器获取它们。
Resolver
Resolver 是一个用于将查询映射到实际数据的函数。它接收查询参数并返回数据。
Mutation
GraphQL 变异是一种用于修改数据的操作。它们类似于查询，但它们允许更改数据。
在 React-Native 中使用 GraphQL
在 React-Native 中使用 GraphQL，我们需要使用一个名为 react-apollo 的库。该库提供了一个 ApolloProvider 组件，它可以将 GraphQL 客户端注入到整个应用程序中。
安装依赖
首先，我们需要安装 react-apollo 和 graphql 库。
npm install react-apollo graphql --save
创建 GraphQL 客户端
接下来，我们需要创建一个 GraphQL 客户端。我们可以使用 ApolloClient 类来创建一个客户端。
import { ApolloClient, HttpLink, InMemoryCache } from 'apollo-client-preset';
const client = new ApolloClient({
link: new HttpLink({ uri: 'http://localhost:4000/graphql' }),
cache: new InMemoryCache(),
});在上面的代码中，我们创建了一个名为 client 的 Apollo 客户端。我们使用 HttpLink 类来指定 GraphQL 服务器的地址，并使用 InMemoryCache 类来缓存数据。
创建查询
接下来，我们需要创建一个查询。我们可以使用 gql 函数来定义查询字符串。
-- -------------------- ---- -------
------ - --- - ---- --------------
----- --------- - ----
----- -------- -
----- -
--
----
-----
-
-
--在上面的代码中，我们创建了一个名为 GET_USERS 的查询，该查询将从服务器获取用户的 ID、名称和电子邮件。
在组件中使用查询
现在，我们可以在组件中使用查询。我们可以使用 graphql 高阶组件来将查询注入到组件中。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------------
------ - --------- - ---- ------------
----- -------- - -- ----- - -------- ------ ----- - -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
----
--------------- -- -
--- ------------------------- -------------------
---
-----
--
--
------ ------- -----------------------------在上面的代码中，我们使用 graphql 高阶组件将查询注入到 UserList 组件中。我们将查询的结果作为 data 属性传递给组件。如果查询正在加载，我们将显示 "Loading..."，如果出现错误，我们将显示 "Error :("，否则我们将显示用户列表。
创建变异
除了查询之外，我们还可以创建变异。我们可以使用 gql 函数来定义变异字符串。
-- -------------------- ---- -------
------ - --- - ---- --------------
----- -------- - ----
-------- -------------- -------- ------- -------- -
------------- ------ ------ ------- -
--
----
-----
-
-
--在上面的代码中，我们创建了一个名为 ADD_USER 的变异，该变异将添加一个新用户并返回用户的 ID、名称和电子邮件。
在组件中使用变异
现在，我们可以在组件中使用变异。我们可以使用 mutate 属性来执行变异。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------- - ---- ---------------
------ - --------- --------- - ---- ------------
----- ------- - -- ------ -- -- -
----- ------ -------- - -------------
----- ------- --------- - -------------
----- ------------ - - -- -
-------------------
--------
---------- - ----- ----- --
--------------- -- ------ --------- ---
---
------------
-------------
--
------ -
----- ------------------------
------
-----------
------------------
------------
----------- -- ------------------------
--
------
------------
-------------------
-------------
----------- -- -------------------------
--
------- ----------------- -------------
-------
--
--
------ ------- ---------------------------在上面的代码中，我们使用 graphql 高阶组件将变异注入到 AddUser 组件中。我们使用 useState 钩子来跟踪表单字段的值。我们使用 mutate 属性来执行变异，并使用 refetchQueries 选项来重新获取用户查询。最后，我们在表单提交后将字段重置为初始值。
结论
在本文中，我们讨论了如何在 React-Native 中使用 GraphQL。我们了解了 GraphQL 的基本概念，包括 Schema、Query、Resolver 和 Mutation。我们学习了如何创建 GraphQL 客户端、查询和变异，并将它们注入到 React-Native 组件中。这些技术可以帮助我们构建更高效、更可靠的 React-Native 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675fd3c203c3aa6a56f96ed5