GraphQLの設定方法(Nest.jsで解説)

GraphQLとは

WebAPIのクエリ言語です。

GraphQLの公式ドキュメント

APIとは

以下の動画を見てみてください。

APIとは？仕組みや種類などを初心者向けに解説【APIプログラミング入門】

どういう現場で使われているか？

有名な企業で言うとメルカリさんなどです。

GraphQL | メルカリエンジニアリングブログ

あとはGo、Next.js、GraphQL、MicroService、k8sを使っているようなモダンな最先端の技術を使っている会社でもよく使われています。

クエリとは

問い合わせをするための言語です。つまりAPIへの問い合わせ言語です。
APIにこういうふうに動けーというように指示するよう言語のイメージです。

RESTAPIとGraphQLの違い

RESTAPIの問題点

1.システムが大きくなってくるとエンドポイントが大量に作成されてしまう。

Swaggerとかを用意したりしないとAPIの仕様がわからなくなりなってしまったりします。💦

2.特定のデータを取ってくることができない(不要なデータの取得)

GraphQLのメリット

1.GraphQL
/graphqlというエンドポイント1つだけでいろんな情報を取ってくることができる

2.余計なデータを取ってくる必要がない

3.型指定でデータがわかりやすくなる

GraphQLの課題(デメリット)

1.まだメジャーではないので、情報が少ないので学習コストが高く、採用コストも高い

2.サーバー側の不可予測が難しい

3.キャッシュが複雑になる

GraphQLスキーマ

GraphQLのAPIの仕様書です。GraphQL Schema Languageという独自言語を使用します。
データを使うにはリゾルバーを実装する必要があります。

オブジェクト型

メインの型です。

type User {
  id: ID!
  name: String!
  age: Int
  email: String
}

他にもスカラー型、リスト型、Query型、Mutation型列挙型、ユニオン型などもあります。それぞれ調べてみてください。

Nest.jsでGraphQLを扱うには

以下の2点があります。

• スキーマファースト
  GraphQLスキーマファイルを先に定義し、スキーマからコードを書いて開発していきます。大規模なバック、フロントを分けて開発する時に向いています。あとGraphQL Schema Languageはキャッチアップが難しくデメリットがあります。

• コードファースト
  GraphQLスキーマファイルを先に定義しないです。フロント側は、バックエンドによって作られたスキーマを参考に開発していきます。コードとスキーマをいつも一致させる必要ないです。
  小規模なスピード感がある開発向きです。GraphQL初学者はこっちが良さそうです。

GraphQLの導入(Nest.js)

まずはNest.jsの新規作成からです。

nest new graphql-sample
cd graphql-sample

インストール

公式ドキュメントからnest.jsのディレクトリでインストールしてください。

公式ドキュメントとは少し違いますが、以下のコマンドを今回は使用します。

npm install @nestjs/graphql @nestjs/apollo apollo-server-express graphql

まずは以下を実装します。

src/app.module.ts

import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';
import { join } from 'path';
import { UserModule } from './user/user.module'; // UserModuleをインポート

@Module({
  imports: [
    GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'), // スキーマファイルを自動生成
      playground: true, // GraphQL Playgroundを有効にする
    }),
    UserModule, // UserModuleをインポート
  ],
})
export class AppModule {}

⚫︎補足
autoSchemaFileはtrueにすると自動生成されたスキーマがメモリに保存されます。

リゾルバーとデータモデルを作成

GraphQLの型定義(DTO)を作成します。

src/user/user.model.ts

import { Field, ObjectType, Int } from '@nestjs/graphql';

@ObjectType()
export class User {
  @Field(() => Int)
  id: number;

  @Field()
  name: string;

  @Field()
  email: string;
}

GraphQLのクエリやミューテーションを処理するためのリゾルバーを定義します。

src/user/user.resolver.ts

import { Resolver, Query } from '@nestjs/graphql';
import { User } from './user.model';

@Resolver(() => User)
export class UserResolver {
  @Query(() => [User])
  getUsers(): User[] {
    return [
      { id: 1, name: 'Messi', email: '[e-mail]' },
      { id: 2, name: '大谷', email: '[e-mail]' },
    ];
  }
}

モジュールに登録

リゾルバーとデータモデルをモジュールに登録します。

src/user/user.module.ts

import { Module } from '@nestjs/common';
import { UserResolver } from './user.resolver';

@Module({
  providers: [UserResolver],
})
export class UserModule {}

AppModuleにモジュールをインポート

src/app.module.ts

import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';
import { join } from 'path';
import { UserModule } from './user/user.module';

@Module({
  imports: [
    GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
    }),
    UserModule,
  ],
})
export class AppModule {}

サーバーを起動してplaygroundを確認する

以下のコマンドでサーバーを起動します。

npm run start:dev

• http://localhost:3000/graphql
  でplaygroundを使えるようになります。(もうすでに自分は他のデータを取得したりしているのでごちゃごちゃして申し訳ないです🙇‍♂️)

playgroundの使用方法

playgroundを開いたら下のクエリを実行します。

query {
  getUsers {
    id
    name
    email
  }
}

すると以下のデータが取得できます。

{
  "data": {
    "getUsers": [
      {
        "id": 1,
        "name": "Messi",
        "email": "[e-mail]"
      },
      {
        "id": 2,
        "name": "大谷",
        "email": "[e-mail]"
      }
    ]
  }
}

Diniiが使っている構成

どういう現場で使われているか以下の動画で確認してください。

参考資料

誰でも理解できるGraphQL入門！REST APIとの違いを分かりやすく解説【ハンズオン形式】