GraphQL 是一种用于 API 的查询语言，旨在为客户端提供所需的数据。从开发人员的角度来看，GraphQL 有很多优势，它不仅可以提供更好的应用性能，而且具有更好的可扩展性和可重复性。在此基础上，本篇文章将介绍如何构建跨平台的 GraphQL 应用程序，以及如何利用移动应用程序从 GraphQL 中获益。
什么是跨平台 GraphQL 应用程序？
跨平台的 GraphQL 应用程序可以运行在不同种类的客户端设备上，例如：iOS，Android，Web 和 Windows。这种跨平台的形式可以使应用程序具有更好的可重复性，更容易维护和更易于开发。移动应用程序特别适合使用 GraphQL，因为它们旨在为低带宽网络和延迟提供稳定的数据交互。
搭建 GraphQL 服务器
要构建跨平台的 GraphQL 应用程序，首先需要准备好 GraphQL 服务器。在本文中，我们将使用 Node.js 的 Express 框架来搭建 GraphQL 服务器。我们使用 npm 模块管理器来安装所需的库。
Step 1: 安装所需的库
由于我们使用的是 Express 框架，因此需要安装express和express-graphql npm 包。还需要安装graphql，graphql-tools和graphql-import。
npm install express express-graphql graphql graphql-tools graphql-import
express- Web 应用程序框架。express-graphql- 负责将 GraphQL 请求转换成服务端文本。graphql- GraphQL 规范的 JavaScript 实现。graphql-tools- 一系列创建和操作 GraphQL schema 的工具。graphql-import- 导入的 GraphQL schema。
Step 2: 实现 GraphQL 服务
首先，读入 GraphQL schema 文件，通过 graphql-import 库将其导入。这个库可以让我们将 GraphQL schema 文件分为多个文件，并从 js 中导入这些文件，以轻松地将它们组合起来。
-- -------------------- ---- ------- ----- ------- - -------------------------- -- --- ------- ------ --- ----- -------- - --------------------------------------- --------------------------- ----- --------- - --- -- - -------- - --------- ----- ------ -- ----- ------ - ---------------------- --------- --------- ---
现在，我们可以利用 graphql 和 express 实例来创建 GraphQL 服务。
-- -------------------- ---- -------
----- --- - ----------
----------------
-- --- ------- --- --- ----- ----------
--------
-----------
-------------
------- -------
--------- ----
--
--
-- -------- ------- ----
---------------- -- -- -
------------
-------- ------ -- --- ------- -- ------------------------------
--
---完成了这些步骤后，我们的 GraphQL 服务实例可以部署在我们选择的 Web 服务器上，提供给客户端访问。
为跨平台应用添加 GraphQL 数据
要为跨平台应用添加 GraphQL 数据，需要完成以下四个步骤：
- 创建一个 GraphQL 客户端，即 API 集成，用于查询和变更应用程序状态。
- 向应用程序添加数据存储，允许应用程序状态在客户端之间交换。
- 将 GraphQL schema 文件添加到应用程序中，以确保数据可以在客户端之间共享。
- 配置应用程序，以便它可以查询和变更状态。
Step 1: 创建 GraphQL 客户端
要创建 GraphQL 客户端，需要将创建和执行 GraphQL 查询和变更的工作分离，以允许应用程序可以在多个客户端之间共享代码。可以使用 apollo-client 和 graphql-tag 库来创建和执行 GraphQL 查询和变更。
-- -------------------- ---- ------- ------ - ------------ - ---- ---------------- ------ - ---------- - ---- -------------- ------ - -------- - ---- ------------------- ------ - ------------- - ---- ------------------------ ------ --- ---- -------------- ----- -------- - --- ---------- ---- ------------------------------- --- ----- ----- - --- ---------------- ----- ------ - --- -------------- ----- ---------------------------- ------ ----- ---
Step 2: 添加数据存储
在跨平台应用程序中，需要为数据存储添加支持。可以使用 Apollo Client 的本地状态管理来处理客户端上的数据状态。
-- -------------------- ---- -------
------ - ------------- - ---- ------------------------
------ - ------------ - ---- ----------------
------ - --- - ---- ---------------
------ - ---------- - ---- --------------
------ - -------- - ---- -------------------
------ ------------ ---- -----------------
----- -------- - --- ----------
---- -------------------------------
---
----- ----- - --- ----------------
----- ------ - --- --------------
----- ----------------------------
------ -----
---
----- -------- - -
----- ----
--
-----------------
----- --------
---
------ ----- --------- - -
--------- -
------ ------- ---- - ----- -- - ------ ------ -- - ----- -- ---- -- -
----- ---- - -
--------- -----
------ -----
--
----------------- ---- ---
------ -----
--
-------- ------- ---- - ---- -- - ----- --- -- - ----- -- ---- -- -
----------------- ----- - ----- ---- - ---
------ -----
--
------- ------- ----- --- - ----- -- ---- -- -
----------------- ----- -------- ---
------ ---------
-
-
--Step 3: 添加 GraphQL schema 文件
需要将 GraphQL schema 文件添加到跨平台运行时环境中，以将代码的 API 定义与代码的执行代码分离。可以使用 webpack 对代码进行打包，并使用 graphql-tag/loader 去加载 GraphQL schema 文件。
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- -------------------
-------- ---------------
---- -- ------- -------------------- --
-
-
-
--Step 4: 配置应用程序
将上述步骤的所有工作组合在一起，就可以构建跨平台的 GraphQL 应用程序了。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- ---------------
------ - ------ - ---- ------------
------ - -------------- -- ------------------- - ---- ----------------------
------ - -------------- - ---- -------------------
------ - ------------- ------------- - ---- -----------------------
---- ----- ------ ----
------ - ----------- - ---- ---------------
------ --- ---- --------
----- -------- - -
---- ---- -
--- ---
--------- ------
-
---- ----- -
--- ----
-
---- -------- -
------------ --------- ----
-
--
----- ----- - --- ----------------
----- ------ - --- --------------
------
---------- -
--------- -
------------ ---- - ----- -- - ------ ------ -- - ----- -- ---- -
----- ---- - - --------- ----- ----- --
----------------- ---- ---
------ -----
-
-
--
----- ----------------
---- --------------------------------
------------ ---------
--
---
-----------------
----- -
--------- ------
------ --
-
---
--------------------------------------- -- -- -----
------------------------------------ -
-------- -------------------------------
---
-------
--------------- ----------------
-------------------- ----------------
---- --
----------------------
------------------
-------------------------------
--结论
现在，您已经知道如何构建跨平台的 GraphQL 应用程序，并且掌握了以下几个步骤：
- 创建 GraphQL 服务器。
- 为跨平台应用程序添加 GraphQL 数据。
- 将 GraphQL schema 文件添加到应用程序中。
- 配置应用程序。
开始实际构建跨平台 GraphQL 应用程序吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b6e1cd91dce0dc88a7d82