前言
GraphQL 和 React Native 是当今前端开发最火热的技术之一。GraphQL 是一种 API 查询语言和运行时，可让客户端准确地描述其数据需求。React Native 是一个基于 React 构建的移动应用开发框架。将两者结合起来，可以构建出高效、可扩展、易维护的实时应用。在本文中，我们将探讨如何使用 GraphQL 和 React Native 构建实时应用的完整流程。
1. GraphQL 和 React Native 简介
1.1 GraphQL
如前所述，GraphQL 是一种 API 查询语言和运行时。它是由 Facebook 开发并在 2015 年首次公开发布的，其主要目的是解决 REST API 的一些缺陷。GraphQL 具有以下特点：
- 精确查询，减少冗余数据获取，提升性能。
- 客户端定义 API，易于维护更新。
- 支持多个数据源，聚合多个 API。
1.2 React Native
React Native 是一个基于 React 构建的移动端应用开发框架，其最大的特点是使用一套代码，即可同时开发 iOS 和 Android 应用。React Native 具有以下特点：
- 基于 React 开发，代码可重复利用。
- 支持原生控件，提升用户体验。
- 优秀的性能和稳定性。
2. 使用 GraphQL 和 React Native 构建实时应用
在使用 GraphQL 和 React Native 构建实时应用之前，需要掌握以下知识：
- GraphQL 查询语言。
- React Native 基础知识，包括组件、生命周期函数、样式等。
- GraphQL 和 React Native 集成的相关库，如
apollo-client、react-apollo等。
2.1 客户端
2.1.1 引入依赖
首先，在 React Native 项目中，需要安装并引入相关依赖：apollo-client、react-apollo 和 subscriptions-transport-ws。
npm install apollo-client react-apollo subscriptions-transport-ws --save
2.1.2 创建 ApolloClient 实例
接下来，创建一个 ApolloClient 实例，并将其传递给 ApolloProvider：
-- -------------------- ---- -------
------ -------------- ---- ----------------
------ ---------------- ---- ---------------
------ --------------- ---- ------------------------
------ ---------- ---- -------------------
------ --------------- ---- -----------------
------ ------- ---- --------------
------ ------------------- ---- -------------------
-- ---- --
----- -------- - --- ----------
---- --------------------------------
---
-- --------- --
----- ------ - --- ---------------
---- ------------------------------
-------- -
---------- -----
--
---
-- -- ---- - --------- --
----- ---- - ------
--------- -- -
----- ------ ---------- - -------------------------
------ ---- --- --------------------- -- --------- --- ---------------
--
-------
---------
--
----- ----- - --- ----------------
----- ------ - --- --------------
-----
------
---上面的代码中，我们创建了两个链接：httpLink 和 wsLink，前者用于发送 HTTP 请求，后者用于发送 WebSocket 请求。最后，通过 split 函数将两个链接进行拆分，以便在不同场景下使用。
2.1.3 定义 Subscription
我们需要定义一个 Subscription，以接收实时数据更新：
-- -------------------- ---- -------
------ ----- ---- ---------------
----- ------------ - ----
------------ ----------- -
----------- -
--
-------
-
-
--
------ ------- -------------这里我们定义了一个名为 messageSent 的 Subscription，并从服务器端订阅实时数据更新。
2.1.4 使用 Subscription
在 React Native 组件中，我们可以使用 useSubscription 或 ApolloConsumer 来订阅实时数据更新。这里以 ApolloConsumer 为例：
-- -------------------- ---- -------
------ ---------------- ---- ---------------
------ ------------ ---- ------------------------------
----- ---------- ------- --------------- -
-- ---
-------- -
------ -
----------------
------- -- -
------------------
------ -------------
--------------
----- -------- -- -
---------------
--------- ------------------ ------------------------
---
--
---
-- ---
--
-----------------
--
-
-- ---
-这里，我们传递了一个匿名函数给 ApolloConsumer，在该函数中订阅了 messageSent 的实时更新，并在数据更新时更新状态。
2.2 服务器端
2.2.1 引入依赖
与客户端类似，我们需要安装并引入相关依赖：apollo-server、graphql-subscriptions 和 subscriptions-transport-ws：
npm install apollo-server graphql-subscriptions subscriptions-transport-ws --save
2.2.2 创建 Subscription
创建订阅器实例，并在这个实例中定义 messageSent 订阅器：
-- -------------------- ---- -------
------ -------- ---- ------------------------
----- ------ - --- ---------
----- ------------ - ---------------
------ ----- --------- - -
------------- -
------------ -
---------- -- -- -------------------------------------
--
--
--------- -
------------ ----- --- ---------- -- -
----- ------- - ---- ------- ---------
---------------------------- ------------- ----------
------ --------
--
--
--这里，我们使用了 graphql-subscriptions 中的 PubSub 类来管理订阅器。在 Mutation 中定义了 sendMessage 方法，该方法在发送消息时发布一个 MESSAGE_SENT 事件，以便订阅器监听。
2.2.3 创建 Subscription 服务器
最后，创建 Subscription 服务器，使用 createServer 方法将 apollo-server 和 subscriptions-transport-ws 两个库进行集成：
-- -------------------- ---- -------
------ ------- ---- ----------
------ -------------- ---- ------------------------
------ -------------- ---- -------
------ --------- ---------- ---- ----------
------ -------------------- ---- -----------------------------
------ ---------- ---- -------------
------ ----------- ---- --------------
----- ---- - -----
----- --- - ----------
----- ------ - --- --------------
---------
----------
---
------------------------------
----- ---------- - ------------------
----------------------- -- -- -
--------------- ------ -- --------- -- ---- ----------
--- --------------------
--------
----------
------- --------------
-- -
------- -----------
----- -------------------
---
---3. 总结
在本文中，我们探讨了使用 GraphQL 和 React Native 构建实时应用的完整流程。我们了解了 GraphQL 和 React Native 的基础知识，并通过编写代码的方式实现了一个实时聊天应用。实时应用是现代 Web 应用的重要组成部分，它能够提供出色的性能和用户体验。尽管 GraphQL 和 React Native 是两个相对较新的技术，但它们已成为了前端开发不可或缺的工具。建议使用它们的开发者们持续学习并使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6495033b48841e98942497b1