LoginSignup
82
76

More than 3 years have passed since last update.

@yasuhiro-yamada(Yasuhiro Yamada)

Prismaを使ってMySQLに接続するGraphQL APIサーバーを構築

Last updated at Posted at 2019-01-06

はじめに

基本的にPrismaの公式チュートリアル Build a GraphQL server from Scratch に倣って、Prisma、graphql-yogaを使ってGraphQLサーバーを書いていきます。

本記事では上記チュートリアルとは少し異なるアプローチ

  • 言語：TypeScript
  • DB：ローカルに立てるDocker上のMySQL

でご紹介します。

チュートリアルを進める前に、Prismaって何？という方は、

辺りを一読してPrismaをざっくりと理解し、公式の

を確認してみるのがオススメです。

対象読者

  • GraphQLに関する知識をある程度有している方
  • GraphQL APIを提供するサーバーを簡単に素早く作りたい方
  • データベースは自前のMySQLを使いたい方
  • 言語はTypeScriptで書きたい方

実行環境

  • Mac OS Mojave: v10.14.2
  • node: v11.2.0
  • npm: v6.5.0
  • yarn: v1.12.3
  • docker: v17.09.1-ce
  • prisma: v1.23.4
  • graphql: v3.0.4

GraphQL APIサーバー（Backends For Frontends）構築

はじめに、外部に向けてGraphQL APIを提供するためのBFFを構築していきます。
後に、外部には公開しない内部向けのPrismaサーバーをラップするように構築します。

NPMプロジェクト用ディレクトリ作成〜初期化

mkdir prisma-yoga-mysql-typescript-sample
cd prisma-yoga-mysql-typescript-sample
npm init -y

src/index.tsの作成

mkdir src
touch src/index.ts

graphql-yogaのインストール

yarn add graphql-yoga

nodemon、ts-nodeおよびTypeScriptのインストール

ここでチュートリアルではsrc/index.jsにコードを書き込んで実行しますが、TypeScriptで同じことを実行するために、コンパイル無しでNode.js上で直接TSファイルを実行できるライブラリts-nodeと、ファイルを監視し、変更があればNodeのプロセスを再起動してくれるnodemonをインストールします。

yarn add -D nodemon ts-node typescript

package.jsonのアップデート

yarn startでスクリプトを実行できるように、package.jsonのscriptsの値を次のように書き換えます。

package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon --ext ts,yaml,graphql --exec 'ts-node' src/index.ts"
  },

（拡張子がts、yaml、graphqlのファイルを監視対象とする）

src/index.tsへの新規書込

src/index.ts
import { GraphQLServer } from 'graphql-yoga';

// GraphQL SDLに沿ってschemaを定義
const typeDefs = `
  type Query {
    description: String
  }
`;

// GraphQL APIのリクエストに応えるための実装
const resolvers = {
  Query: {
    description: () => `This is the API for a simple blogging application`,
  },
};

const server = new GraphQLServer({
  typeDefs,
  resolvers,
});

server.start(() =>
  console.log(`The server is running on http://localhost:4000`),
);

ここまで保存した時点で、yarn startをコマンドラインで実行すると、http://localhost:4000でサーバーが立ち上がるはずです。

http://localhost:4000 にアクセスして、次のクエリを実行して結果が返ってくれば成功です。

{
  description
}

スクリーンショット 2019-01-07 3.44.41.png

src/schema.graphqlの作成

続けて、src/index.tsのtypeDefsに代入したものとは別に、GraphQLスキーマをあらためて定義するために、次のようにschema.graphqlを作成します。

touch src/schema.graphql
src/schema.graphql
type Query {
  posts: [Post!]!
  post(id: ID!): Post
  description: String!
}

type Mutation {
  createDraft(title: String!, content: String): Post
  deletePost(id: ID!): Post
  publish(id: ID!): Post
}

type Post {
  id: ID!
  title: String!
  content: String!
  published: Boolean!
}

src/index.tsのアップデート

上記で作成したスキーマを読み込むために、src/index.tsを次のように書き換えます。

src/index.ts
import { GraphQLServer } from 'graphql-yoga';

// GraphQL SDLに沿ってschemaを定義
// const typeDefs = `
//   type Query {
//     description: String
//   }
// `;

// GraphQL APIのリクエストに応えるための実装
const resolvers = {
  Query: {
    description: () => `This is the API for a simple blogging application`,
  },
};

const server = new GraphQLServer({
  typeDefs: './src/schema.graphql',
  resolvers,
});

server.start(() =>
  console.log(`The server is running on http://localhost:4000`),
);

それぞれ保存した後、nodemonによってプロセスが再起動された場合はそのまま http://localhost:4000 にアクセスして、schemaが次のように反映されていればOKです。

スクリーンショット 2019-01-07 4.13.42.png

Prismaサーバー（内部向け）構築

ここからPrismaを使って、内部向けにサーバーを構築していきます。
これから作る内部向けGraphQL APIサーバーは、DBに対して直接クエリを実行します。

Prisma CLIのグローバルインストール

prismaコマンドが未だ使えない場合は、グローバルインストールしてください。
（追記： 本記事はPrismaのバージョンが1.23.4であることを前提にしてありますので、CLIも1.23.4をインストールしないとうまく動きません）

npm install -g prisma@1.23.4

databaseディレクトリの作成

次のprismaコマンドをプロジェクトのルートで実行すると

prisma init database

REPLで実装を選ぶことになりますので、Create new database、MySQL、Prisma TypeScript Clientをそれぞれ選択します。
（本家のチュートリアル Step 13とは別の選択を取っていますので、ご注意ください）

 % prisma init database
? Set up a new Prisma server or deploy to an existing server? 

  Set up a new Prisma server for local development (based on docker-compose):
  Use existing database      Connect to existing database 
❯ Create new database        Set up a local database using Docker 

  Or deploy to an existing Prisma server:
  Demo server                Hosted demo environment incl. database (requires login) 
  Use other server           Manually provide endpoint of a running Prisma server

? What kind of database do you want to deploy to? (Use arrow keys)
❯ MySQL             MySQL compliant databases like MySQL or MariaDB 
  PostgreSQL        PostgreSQL database 
  MongoDB           Mongo Database 

? Select the programming language for the generated Prisma client 
❯ Prisma TypeScript Client 
  Prisma Flow Client 
  Prisma JavaScript Client 
  Prisma Go Client 
  Don't generate

コマンド実行後は、databaseディレクトリが作成され、次のような構成になっているはずです。
（本家チュートリアルではdatabase/datamodel.graphqlが作成されていることになっていますが、prisimaのバージョン1.23.4で実行すると、代わりにdatabase/datamodel.prismaが作成されます）

├── database
│   ├── datamodel.prisma // DBのテーブル構造元となる型定義
│   ├── docker-compose.yml
│   ├── generated
│   │   └── prisma-client
│   │       ├── index.ts
│   │       └── prisma-schema.ts
│   └── prisma.yml // Prismaサーバーの設定ファイル
├── package.json
├── src
    ├── index.ts
    └── schema.graphql

datamodel.prismaのアップデート

本家チュートリアルに沿って、次の内容でdatamodel.prismaを書き換えてください。

database/datamodel.prisma
type Post {
  id: ID! @unique
  title: String!
  content: String!
  published: Boolean! @default(value: "false")
}

上記ではどんな定義になっているか、大体想像がつくかと思いますが、デプロイされるとPostテーブルにマッピングされ、id〜publishedまでのフィールドと呼ばれる部分は各カラムにマッピングされます。
!はNot nullを指し、@uniqueは値がテーブルの中で一意なフィールドとなるよう指定しています。
@defaultは、レコードをインサートする際、publishedの値指定が無い場合はfalseが自動的に割り当てられる指定となっています。

ここで登場する@uniqueや@defaultなどのディレクティブと呼ばれるものについて詳しく知りたい方は、GraphQLの公式などをご参照ください。

DB接続用ポートの設定

こちらの設定は任意ですが、DBに直接、接続したい場合は database/docker-compose.ymlのservices.mysql.portsの値が次のようになるよう、追記してください。

  mysql:
    image: mysql:5.7
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: prisma
    volumes:
      - mysql:/var/lib/mysql
    ports:
      - "3333:3306"

Dockerコンテナの起動

Prismaをデプロイさせるには、DBに接続できる状態にする必要があります。
コマンドラインで、docker-compose.ymlが存在するdatabaseディレクトリに移動し、docker-compose upを実行し、Dockerコンテナを起動してください。

cd database 
docker-compose up

Prismaのデプロイ

上記でDockerコンテナを起動した後、別のコマンドラインで再度databaseディレクトリに移動し、prisma deployコマンドを実行して、database/prisma.ymlに記載されているendpoint: http://localhost:4466 に対してデプロイさせます。

cd database
prisma deploy

デプロイと同時に、DBに対してmigrationが実行されます。
デプロイ完了後、http://localhost:4466 にアクセスし、DOCSを開くと、Postテーブルに対するCRUDが実装されているのが分かります。

スクリーンショット 2019-01-07 5.53.19.png

また、上記でDB接続用ポートの設定を行なっていた場合は、Sequer ProなどのDBクライアントツールで次のような設定でDBにアクセスできます。
（ユーザ名やパスワード、ポートはdocker-compose.ymlで変更可能）

スクリーンショット 2019-11-07 12.58.35.png

PrismaサーバーとBFFとの紐付け

最後に、DBを直接操作するPrismaサーバーと、BFF（外部向けに公開するGraphQL APIサーバー）との紐付けを行い、公開するGraphQL APIを通じてPrismaサーバーのGraphQL APIを実行し、DBに対して操作できるようにします。

Prismaサーバーとの紐付け用設定ファイルの作成

プロジェクトのルートに移動し、.graphqlconfig.ymlを次のように作成します。

touch .graphqlconfig.yml
graphqlconfig.yml
projects:
  database:
    schemaPath: src/generated/prisma.graphql
    extensions:
      prisma: database/prisma.yml
  app:
    schemaPath: src/schema.graphql
    extensions:
      endpoints:
        default: http://localhost:4000

Prismaのスキーマファイルの作成

次のコマンドを実行して、上記Yamlのprojects.database.schemaPathで指定されているパスに、スキーマファイルを生成します。

graphql get-schema

prisma-bindingのインストール

紐付けに必要なライブラリprisma-bindingをインストールします。

yarn add prisma-binding

src/index.tsのアップデート

インストールしたprisma-bindingのPrismaクラスを使って、上記で作成したsrc/generated/prisma.graphqlを利用するように、src/index.tsを書き換えます。

src/index.ts
import { GraphQLServer } from 'graphql-yoga';
import { Prisma } from 'prisma-binding';
import { IResolvers } from 'graphql-middleware/dist/types';

const resolvers: IResolvers = {
  Query: {
    posts(parent, args, ctx, info) {
      return ctx.db.query.posts({}, info);
    },
    post(parent, args, ctx, info) {
      return ctx.db.query.post({ where: { id: args.id } }, info);
    },
  },
  Mutation: {
    createDraft(parent, { title, content }, ctx, info) {
      return ctx.db.mutation.createPost(
        {
          data: {
            title,
            content,
          },
        },
        info,
      );
    },
    deletePost(parent, { id }, ctx, info) {
      return ctx.db.mutation.deletePost({ where: { id } }, info);
    },
    publish(parent, { id }, ctx, info) {
      return ctx.db.mutation.updatePost(
        {
          where: { id },
          data: { published: true },
        },
        info,
      );
    },
  },
};

const server = new GraphQLServer({
  typeDefs: './src/schema.graphql',
  resolvers,
  context: req => ({
    ...req,
    db: new Prisma({
      typeDefs: 'src/generated/prisma.graphql', // the generated Prisma DB schema
      endpoint: 'http://localhost:4466', // the endpoint of the Prisma DB service
      // secret: "mysecret123", // specified in database/prisma.yml
      debug: true, // log all GraphQL queries & mutations
    }),
  }),
});

server.start(() => console.log('Server is running on http://localhost:4000'));

src/schema.graphqlのアップデート

src/schema.graphqlについても、src/generated/prisma.graphqlで定義されているPostの型を利用できるよう、次のように書き換えます。

src/schema.graphql
# import Post from "./generated/prisma.graphql"

type Query {
  posts: [Post!]!
  post(id: ID!): Post
  description: String!
}

type Mutation {
  createDraft(title: String!, content: String): Post
  deletePost(id: ID!): Post
  publish(id: ID!): Post
}

さいごに

結構なボリュームのチュートリアルでしたが、手を動かして使ってみると慣れてきて、Prismaの有り難さが分かります。
下記の記事によると、Prismaを使えばN+1問題も解決してくれるそうなので、実戦でも使えるようにしていきたいです。
Do Prisma resolve N+1 problem?

ソースコード

今回作成したサンプルは下記のGitHubから手に入ります。
https://github.com/galoi/prisma-yoga-mysql-typescript-sample

その他、参考にさせていただいた記事

82
76
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
82
76