将 GraphQL API 添加到现有应用程序中的步骤

阅读时长 7 分钟读完

在现代 Web 应用程序中,API 是一个关键因素,它能让前后端分离,使得不同的客户端可以在不同的平台上使用。传统的 RESTful API 已经非常流行,但是随着数据的复杂性增加,GraphQL API 在前端开发中逐渐成为了另一种流行的选择。如果你想在你的现有应用中添加一个 GraphQL API,下面是一些步骤和指导。

步骤

了解你的数据模型

在添加 GraphQL API 前,你需要对你的数据模型有一些深入的了解。这个数据模型应该描述了系统中的所有数据和它们之间的关系。这个数据模型将会被用来作为 GraphQL API 的 schema。它会描述对象、类型、查询等等。

安装依赖

接下来你需要安装一些依赖。你需要安装以下的工具和库:

  • graphql:一个用于创建 GraphQL 解析器的 JavaScript 库
  • express-graphql:一个用于在 Express 应用中集成 GraphQL API 的库
  • graphql-tools:一个用于创建和操作 GraphQL schema 的工具库

你可以使用 npm 来安装这些库,如下所示:

创建 schema

创建 schema 是添加 GraphQL API 的重要步骤。使用 GraphQL schema 语言来定义你的 schema。它是一种声明性、强类型和自描述的语言,可以描述你的 GraphQL API 所暴露的所有对象和字段。如下所示是一个简单的 schema:

-- -------------------- ---- -------
---- ----- -
  --- ----
  -------- ----- ----
  ------ ------
-

---- -------- -
  ----------------- ------------ ----
-

---- ---- -
  --- ---
  ----- -------
  ------ -------
-

----- --------- -
  ----- -------
  ------ -------
-
展开代码

创建解析器

由于 schema 只是一张图纸,所以需要实际的代码来完成 GraphQL 请求的解析。你需要编写解析器来处理你的查询和变更。你可以使用 makeExecutableSchema 函数来创建 schema,并将它们传递给 resolvers 对象,如下所示:

-- -------------------- ---- -------
----- - -------------------- - - -------------------------
----- --------- - -----------------------

----- -------- - -
  ---- ----- -
    --- ----
    -------- ----- ----
    ------ ------
  -

  ---- -------- -
    ----------------- ------------ ----
  -

  ---- ---- -
    --- ---
    ----- -------
    ------ -------
  -

  ----- --------- -
    ----- -------
    ------ -------
  -
--

----- ------ - ---------------------- --------- --------- ---

-------------- - -------
展开代码

创建解析逻辑

然后你要编写解析逻辑,实现查询和变更的处理逻辑。resolvers 应该是一个对象,包含一个或多个函数。每个函数都应该返回执行结果。如下所示是一个简单的 resolver:

-- -------------------- ---- -------
----- ----- - -
  - --- ---- ----- ----- ------ ---------------------- --
  - --- ---- ----- ----- ------ ------------------ --
--

----- --------- - -
  ------ -
    --- -- -- ---------
    ----- ------ - -- -- -- --------------- -- ------- --- ----
    ------ -- -- ------
  --
  --------- -
    ----------- ------ - ----- -- -- -
      ----- ---- - - --- ------------- - -------------- -------- --
      -----------------
      ------ -----
    --
  --
--

-------------- - ----------
展开代码

使用 Express-GraphQL 集成 GraphQL API

最后一个步骤是将 GraphQL API 集成到 Express 应用中。你需要编写一个路由来集成 GraphQL,并使用 express-graphql 库来创建 HTTP 服务器。如下所示是一个简单的 Express 应用,它集成了 GraphQL API:

-- -------------------- ---- -------
----- ------- - -------------------
----- ----------- - ---------------------------
----- ------ - --------------------

----- --- - ----------

------------------- -------------
  -------
  --------- -----
----

---------------- -- -- ------------------- ------- -- ---- --------
展开代码

示例代码

下面是一个完整的示例代码,用于将 GraphQL API 添加到现有应用程序中。你可以将它作为模板来编写自己的 GraphQL API。

-- -------------------- ---- -------
----- - -------------------- - - -------------------------
----- ------- - -------------------
----- ----------- - ---------------------------

-- -- ------
----- -------- - -
  ---- ----- -
    --- ----
    -------- ----- ----
    ------ ------
  -

  ---- -------- -
    ----------------- ------------ ----
  -

  ---- ---- -
    --- ---
    ----- -------
    ------ -------
  -

  ----- --------- -
    ----- -------
    ------ -------
  -
--

-- -- --------
----- ----- - -
  - --- ---- ----- ----- ------ ---------------------- --
  - --- ---- ----- ----- ------ ------------------ --
--
----- --------- - -
  ------ -
    --- -- -- ---------
    ----- ------ - -- -- -- --------------- -- ------- --- ----
    ------ -- -- ------
  --
  --------- -
    ----------- ------ - ----- -- -- -
      ----- ---- - - --- ------------- - -------------- -------- --
      -----------------
      ------ -----
    --
  --
--

-- -- ------
----- ------ - ---------------------- --------- --------- ---

-- -- ------- --
----- --- - ----------

-- -- ------- ---
------------------- -------------
  -------
  --------- -----
----

-- -----
---------------- -- -- ------------------- ------- -- ---- --------
展开代码

结论

在这篇文章中,我们已经介绍了如何将 GraphQL API 添加到现有的应用程序中。GraphQL API 不仅使得数据复杂性的管理更简单,而且使得前后端解耦更容易。如果你还没有开始使用 GraphQL API,它值得你去尝试。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/676f6e26e9a7045d0d72c389

纠错
反馈

纠错反馈