GraphQL Server 使用教程完整版

GraphQL 是一种用于 API 的查询语言和运行时环境,最初由 Facebook 开发并在 2015 年公开发布。GraphQL 通过 API 定义类型和字段,然后允许客户端查询指定的字段,这使得客户和服务器之间的通信更加高效和灵活。

本文将介绍如何使用 GraphQL Server 构建一个 GraphQL API,包括 Schema、Resolvers 和 GraphQL Server。

一、搭建 GraphQL Server

首先,我们需要安装一些必要的软件:Node.js、NPM 和 GraphQL。

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

接下来,我们创建一个新的目录,初始化一个空的 Node.js 项目,然后安装两个必要的依赖项,分别是 Express 和 Express GraphQL:

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

然后,我们在该项目下创建一个新的 index.js 文件,用于构建并运行 GraphQL Server。

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

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

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

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

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

现在,我们可以通过下面的命令来启动 GraphQL Server 了:

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

访问 http://localhost:3000/graphql,你会看到 GraphiQL 界面,用于测试我们创建的 GraphQL API。在 query 窗口中输入以下查询语句并执行:

-
  -------
-

你会得到以下的响应:

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

二、使用 Schema 和 Resolvers

上面的例子非常简单,只有一个字符串类型的 message 字段。现在,让我们增加一些更现实的数据和字段来理解使用 Schema 和 Resolvers 的方法。

1. 定义 Schema

我们将创建一个图书管理系统,其中包含两个类型:BookAuthor。定义如下:

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

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

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

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

上面的代码定义了两个类型:BookAuthor,以及一个根查询类型 RootQuery,其中包含 bookauthor 两个字段。

2. 实现 Resolvers

现在,我们需要实现 Resolvers,以实现数据的获取和返回。

首先,我们需要定义一些书和作者的假数据:

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

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

然后,我们实现每个 Resolver 函数:

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

最后,我们将其添加到 RootQueryType 中:

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

现在,我们可以在 GraphiQL 中测试这些查询,例如:

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

响应:

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

响应:

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

三、使用 GraphQL Server

现在,我们已经创建了一个 GraphQL API,包括 Schema 和 Resolvers。然而,如果我们想要在 JavaScript 应用程序中使用它,我们需要一个 GraphQl 服务器。我们可以使用 express-graphql 创建一个服务器。

首先,我们需要在 index.js 中添加以下代码:

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

现在,我们就可以在浏览器或其他应用程序中使用 GraphQL API 了。

现在,我们把所有的代码放在一起,供你参考:

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

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

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

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

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

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

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

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

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

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

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

结论

本文讲述了如何使用 GraphQL Server 构建一个 GraphQL API,包括 Schema、Resolvers 和 GraphQL Server。借助 GraphQL,我们可以使客户端查询指定的数据,从而使客户端和服务器之间的通信更加高效和灵活。GraphQL Server 是使用 GraphQL 的基本要素之一,它可以让我们使用语言无关的方式构建并提供 GraphQL API。使用 GraphQL,我们可以更容易地设计和构建应用程序的数据模型,从而更加灵活地响应客户端的需求。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/66ffaf871b0bf82c71ce4d81