NPM 包 koa-graphql 使用教程-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种用于 API 的查询语言，它提供了强大的查询语法和类型系统，使得客户端能够精确地请求需要的数据。Koa 是一个基于 Node.js 的 Web 框架，它提供了一套简单、灵活的 API 和中间件，可以轻松地构建 Web 应用。

Koa-graphql 是一个使用了 GraphQL 的 Koa 中间件，它可以帮助我们轻松地在 Koa 应用中实现 GraphQL API。本文将详细介绍如何使用 koa-graphql 包来构建 GraphQL API。

环境准备

我们假设您已经熟悉了 Node.js 和 Koa 框架的基本使用，如果您还不熟悉，请先学习相关知识。

在开始之前，我们需要安装一些必要的工具和包：

Node.js：下载安装最新版 Node.js。
Koa：使用 npm 安装 Koa，命令如下：
```
npm install koa --save
```
koa-graphql：使用 npm 安装 koa-graphql，命令如下：
```
npm install koa-graphql --save
```
graphql：使用 npm 安装 graphql，命令如下：
```
npm install graphql --save
```

开始使用

首先，我们需要创建一个新的 Koa 应用。打开命令行工具，定位到您的项目目录下，输入以下命令：
```
mkdir my-koa-app && cd my-koa-app
npm init -y
```
这样就在当前目录中创建了一个名为 my-koa-app 的新项目，并生成了一个默认的 package.json 文件。

接下来，在项目根目录下创建一个 app.js 文件，并写入以下代码：

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

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

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

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

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

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

这个代码创建了一个 Koa 应用，当我们访问 http://localhost:3000/graphql 时，就可以看到 GraphQL 的交互式查询界面。在 schema 中定义了一个 Query 类型，其中有一个 hello 字段，类型为 String，它返回了一个字符串 'Hello world!'，在 root 中定义了 hello 函数，它实现了 hello 字段的具体查询逻辑。

运行应用。在命令行工具中输入以下命令：
```
node app.js
```
这样就启动了应用，并监听 http://localhost:3000，可以在浏览器中访问该地址来查看。
在 GraphQL 的交互式查询界面中输入以下查询语句：
```
{
  hello
}
```
点击右侧的“运行”按钮，就可以看到返回的结果：
```
{
  "data": {
    "hello": "Hello world!"
  }
}
```
这样我们就成功地构建了一个简单的 GraphQL API。

支持更多的查询和变量

GraphQL 支持多种类型的查询和变量，我们在这里只是介绍一些常用的类型和变量。

查询

假设我们有一个数据源，其中包含了用户的信息。那么我们可以通过 GraphQL 查询语句来获取这些信息。在 schema 中可以定义多个类型，包括 User 类型和 Query 类型。User 类型包含了用户的信息，Query 定义了查询入口。

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

在 root 中实现 user 和 users 函数查询逻辑：

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

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

在 Koa 应用中添加路由中间件：

app.use(mount('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
})));

现在我们可以在 GraphQL 的交互式查询界面中进行查询了。

获取指定 ID 的用户信息：

{
  user(id: "1") {
    id
    name
    gender
  }
}

获取所有用户信息：
```
{
  users {
    id
    name
  }
}
```

变量

假设我们要查询特定 ID 的用户信息，但是这个 ID 是不确定的，需要从外部输入。在 GraphQL 中可以用变量来实现这个功能。

在 schema 中定义一个查询字段，使用 $id 来表示变量：

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

在 Koa 应用中添加路由中间件：

app.use(mount('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
})));

在 GraphQL 的交互式查询界面中进行查询：

获取指定 ID 的用户信息：

query GetUser($id: ID!) {
  user(id: $id) {
    name
    age
    gender
  }
}

在右侧的“Query Variables”中输入变量值：

{
  "id": "1"
}

点击“运行”按钮，就可以看到返回的结果：

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

这样就成功地构建了一个支持查询和变量的 GraphQL API。

结论

在本文中，我们介绍了如何使用 koa-graphql 包来构建 GraphQL API。通过示例代码，我们学习了如何定义查询字段和变量，并实现了查询逻辑。希望本文能够对您理解和使用 GraphQL 有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5eedb4b7b5cbfe1ea061133d