在前端应用程序中，管理数据关系是一项常见任务。通常，这是通过编写与后端 API 的 REST 调用来完成的。然而，REST 风格的 API 非常繁琐，很难管理多个数据关系。GraphQL 提供了一种更简单、灵活和一致的方法来管理数据关系。
ORM（Object Relational Mapping，对象关系映射）是一种将对象模型与关系型数据库的数据模型进行映射的模式。ORM 可以简化为应用程序和数据库之间的交互，使开发人员可以使用面向对象的方法来操作数据库。
在本文中，我们将学习如何使用 GraphQL 和类型 ORM 来管理数据关系。
前置知识
- 基础的 JavaScript 和 ES6 知识
- 了解 GraphQL 概念与使用
- 熟悉类型 ORM 框架，如 TypeORM
准备工作
我们将使用 Node.js 编写后端代码，并使用 TypeScript 和 TypeORM 作为 ORM 框架。
首先，我们需要在项目中安装必要的依赖：
npm install express graphql typeorm reflect-metadata npm install --save-dev typescript ts-node
接着，我们需要创建一个 tsconfig.json 文件，它将告诉 TypeScript 编译器如何编译我们的代码。
-- -------------------- ---- -------
-
------------------ -
--------- -----------
------------------ -----
--------- ------
------------ -----
--------- ---------
---------- ----
-------- -
---- ------------------ --------------
-
--
---------- -------------
---------- ----------------
-然后，在项目的根目录下创建一个 src 文件夹，我们将在其中编写所有的代码文件。在 src 文件夹下创建以下文件：
entity/User.ts：定义用户实体entity/Post.ts：定义文章实体resolver/UserResolver.ts：定义用户的 GraphQL Resolverresolver/PostResolver.ts：定义文章的 GraphQL Resolverschema.ts：定义 GraphQL Schemaindex.ts：启动服务器
定义实体
在本例中，我们将创建两个实体：用户和文章。我们将使用 TypeORM 来定义这些实体。创建 src/entity/User.ts 和 src/entity/Post.ts 文件，并定义它们的实体类。
-- -------------------- ---- ------- -- ------------------ ------ - ------- ----------------------- ------- --------- - ---- --------- ------ - ---- - ---- -------- --------- ------ ----- ---- - ------------------------- --- ------ --------- ----- ------ ------------- -- ----- ---- -- ------------ ------ ------ -
-- -------------------- ---- ------- -- ------------------ ------ - ------- ----------------------- ------- --------- - ---- --------- ------ - ---- - ---- -------- --------- ------ ----- ---- - ------------------------- --- ------ --------- ------ ------ --------- -------- ------ ------------- -- ----- ---- -- ----------- ------- ---- -
这些实体类会自动生成数据库表，这些表将存储我们的用户和文章数据，以便我们可以使用 TypeORM 轻松地进行数据操作。
定义 GraphQL Resolver
我们还需要为用户和文章定义 GraphQL Resolver。Resolver 将为应用程序提供数据，并在应用程序与前端之间建立联系。
创建 src/resolver/UserResolver.ts 和 src/resolver/PostResolver.ts 文件，并定义它们的 Resolver。
-- -------------------- ---- -------
-- ----------------------------
------ - --------- ------ ---- --------- -------------- ---- - ---- --------------
------ - ---- - ---- ----------------
------ - ---- - ---- ----------------
---------------
------ ----- ------------ -
--------- -- -----
----- --------------- --- -------- ------------ - ---------- -
------ ----------------
-
--------- -- -------
----- -------- --------------- -
------ -----------
-
------------ -- -----
----- ----------------------- ----- -------- ------------- -
----- ---- - ------------- ---- --
----- -----------
------ ----
-
----------------
----- ------------- ----- ------ --------------- -
------ ----------
-
--- -------------------- ---- -------
-- ----------------------------
------ - --------- ------ ---- --------- -------------- ---- - ---- --------------
------ - ---- - ---- ----------------
------ - ---- - ---- ----------------
---------------
------ ----- ------------ -
--------- -- -----
----- --------------- --- -------- ------------ - ---------- -
------ ----------------
-
--------- -- -------
----- -------- --------------- -
------ -----------
-
------------ -- -----
----- ------------------------ ------ ------- --------------- -------- ------- ---------------- --------- -------- ------------- -
----- ------ - ----- ----------------------
----- ---- - ------------- ------ -------- ------ --
----- -----------
------ ----
-
----------------
----- -------------- ----- ------ ------------- -
------ ---------------------------
-
-这些 Resolver 为每个实体定义了查询和创建方法，同时还定义了用于关联查询的 FieldResolver。
定义 GraphQL Schema
我们还需要创建 GraphQL Schema，定义 Resolver 中的查询和创建方法。
创建 src/schema.ts 文件，并定义 GraphQL Schema。
-- -------------------- ---- -------
-- -------------
------ - ----------- - ---- --------------
------ - ------------ - ---- -------------------------
------ - ------------ - ---- -------------------------
------ ----- -------- -------------- -
----- ------ - ----- -------------
---------- -------------- --------------
--------- -----
--
------ ------
-这个函数将动态地构建 GraphQL Schema。
启动服务器
现在我们已经完成了所有准备工作，我们需要编写一个 index.ts 文件来启动服务器。我们将创建一个 Express 应用程序，并使用 Apollo Server 和已经定义的 GraphQL Schema 为其提供服务。
-- -------------------- ---- -------
-- --------
------ ------------------
------ - -- ------- ---- ---------
------ - ---------------- - ---- ---------
------ - ------------ - ---- -----------------------
------ - ------------ - ---- ----------
----- ---- - ----
----- -------- ------------- -
----- --- - ---------
-- -----
----- ------------------
----- ------ - --- --------------
------- ----- ---------------
-------- -- ---- --- -- -- -- ---- --- --
--
------------------------ --- --
------------ ----- ---- -- -- -- ------------------- -- ------- -- -----------------------------------
-
-------------在这个文件中，我们还连接了数据库，然后将 Apollo Server 集成到应用程序中。我们还定义了应用程序的监听端口，以及启动服务器时的输出消息。
总结
使用 GraphQL 和类型 ORM 管理数据关系可以大大简化应用程序中的数据操作。TypeORM 提供了一种与数据库进行交互的简单方法，而 GraphQL 则允许我们通过类型安全的查询和关联查询来检索数据。在开发前端应用程序时，这些技术可以极大地提高开发效率，并统一数据源。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6461d8b5968c7c53b032fa9f