总结

本文记录了第一次尝试实现GraphQL的步骤，以及示例源代码。

环境

• macOS Big Sur 11.1

• node v14.12.0

• yarn 1.22.10

• express 4.16.1

• Docker version 19.03.13

docker-compose version 1.27.4

样本源代码。 .)

hayatoiwashita/express-graphql的中文意思是什么？

操作步骤

1. 创建项目的草稿

使用express-generator。
–git选项用于添加.gitignore文件的选项。

$ express --view=pug --git express-graphql

请参考Express的应用程序生成程序。

2. 安装图书馆

只需要以下最低限度的GraphQL相关库就可以了。

$ yarn add graphql
$ yarn add express-graphql

在样例中，还添加了以下内容（省略以免偏离主题）。

# ホットリロード
$ yarn add --dev nodemon
# コード整形
$ yarn add prettier --dev --exact
$ yarn add eslint --dev
$ yarn add --dev eslint-config-prettier
$ yarn add --dev eslint-plugin-prettier
# commit時にコード整形を実行
$ yarn add --dev lint-staged
$ yarn add --dev husky

3. 准备样本数据

我加入了/data/users.js文件，用它代替了数据库。
（具体内容请参考示例源代码中的users.js文件）

4. 定义schema

创建/schema/schema.graphql并定义架构。
仅实现了参考查询。
数据结构是用户及其关联的发布等形式。

const { buildSchema } = require("graphql");

const schema = buildSchema(`
    type Query {
        users: [User!]!,
        user(id: Int!): User!
    }

    type User {
        id: ID!
        name: String!
        email: String
        posts: [Post!]
    }

    type Post {
        id: ID!
        title: String!
        published: Boolean!
        link: String
        author: User!
    }
`);

module.exports = schema;

创建解析器。

创建/src/resolvers.js来进行数据操作。
如前所述，本次只涉及查询操作。

const { Users } = require('../data/users');

const resolvers = {
  users: async (_) => {
    console.log('come here');
    return Users;
  },
  user: async ({ id }, context) => {
    return Users.find((user) => user.id == id);
  },
};

module.exports = resolvers;

6. 修改app.js文件

定义了一个端点/graphql。

// var createError = require('http-errors');
var express = require('express');
var { graphqlHTTP } = require('express-graphql');
var resolvers = require('./src/resolvers');
var schema = require('./schema/schema.graphql');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

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

module.exports = app;

7. [参考] 容器化

添加Dockerfile和docker-compose.yml。

FROM node:14.15.4-slim

WORKDIR /usr/local/src/express-graphql
ADD . .
RUN yarn install
CMD [ "yarn", "start" ]

version: '3'

services:
  graphql:
    build: .
    container_name: graphql-container
    ports:
      - "3000:3000"

8. 启动Express

执行启动命令。

# コンテナで実行
$ docker-compose up

# コンテナを使用せず実行
$ yarn start

9. 运行查询

【样例查询】
目标是获取用户ID=1的用户的姓名以及该用户的帖子(post)的ID和标题。

{
  user(id:1) {
    name
    posts {
      id
      title
    }
  }
}

执行结果

{
  "data": {
    "user": {
      "name": "Fikayo Adepoju",
      "posts": [
        {
          "id": "1",
          "title": "Debugging an Ionic Android App Using Chrome Dev Tools"
        },
        {
          "id": "2",
          "title": "Hosting a Laravel Application on Azure Web App"
        }
      ]
    }
  }
}

请参考

GraphQLをNode.jsとexpressでためしてみる