【Day 15】ブログ一覧を取得し、表示する - GraphQLModule #GraphQL

はじめに

2023年アドベントカレンダー15日目です。

現在「ユーザーはトップページでブログの一覧を見ることができる」を進めています。

前回はBFFで使うWiremockの環境構築を行いました。
今回はGraphQLModuleの設定を進めていきます。

NestJS

NestJSは、Node.js上で動作するバックエンド開発のフレームワークです。

アーキテクチャ

このようなアーキテクチャで作成していこうと思います

今回はこの中のこの部分を作っていきます

実装

GraphQLModule

AppModuleにGraphQLModuleをimportし、schemaなどの設定をしていきます

app.module.ts

import { Module } from '@nestjs/common';
+ import { GraphQLModule } from '@nestjs/graphql';
+ import { ApolloDriver } from '@nestjs/apollo';
+ import { join } from 'path';
+ import { BlogModule } from './blog/blog.module';

@Module({
  imports: [
+   GraphQLModule.forRoot({
+     driver: ApolloDriver,
+     typePaths: [join(process.cwd(), 'src/graphql/*.graphql')],
+     path: '/',
+     definitions: {
+       path: join(process.cwd(), 'src/graphql/graphql.ts'),
+       watch: true
+     },
+   }),
    BlogModule
  ],
- controllers: [AppController],
+ controllers: [],
- providers: [AppService, BlogService, BlogResolver],
+ providers: [],
})
export class AppModule {}

definitionsに設定できる項目

プロパティ	説明
path	TypeScriptの型定義ファイルを生成する場所を指定します。このファイルは、GraphQLスキーマの各型に対応するTypeScriptの型定義を含んでいます。
watch	trueに設定されると、GraphQLスキーマが変更されたときに型定義ファイルが自動的に更新されます。これは開発中に特に便利です。
outputAs	型定義の出力形式を指定します。たとえば、classやinterfaceなど。これにより、生成されるTypeScriptの型のスタイルをカスタマイズできます。
typeFileNameSuffix	生成される型定義ファイルのファイル名のサフィックス（接尾辞）を指定します。
customScalarTypeMapping	カスタムスカラー型をTypeScriptの型にマッピングするために使用します。GraphQLのカスタムスカラー型とそれに対応するTypeScriptの型を定義できます。
additionalHeader	生成される型定義ファイルの先頭に追加する追加のヘッダーを指定します。たとえば、特定のインポート文やコメントなど。
emitTypenameField	trueに設定されると、各GraphQLオブジェクト型に__typenameフィールドの型定義が含まれます。これは、特定のGraphQLクライアントの要件に基づいて使用されることがあります。

typePathおよびに設定しているsrc/graphql/*.graphqlをWeb側でDay 7で設定したGraphQL Code Generatorで作成していきます

GraphQL Code Generator

Schema

まず、Schemaファイルを生成します

web/codegen.ts

import type { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  overwrite: true,
  schema: './schema.graphql',
  documents: 'src/graphql/*.graphql',
  generates: {
    'src/graphql/generated.tsx': {
      plugins: [
        'typescript',
        'typescript-operations',
        'typescript-react-apollo',
      ],
    },
    'mock/schema.graphql': {
      plugins: ['schema-ast'],
    },
+   '../bff/src/graphql/schema.graphql': {
+     plugins: ['schema-ast'],
+   },
  },
}

export default config

これでSchemaファイルは生成されます

Operation

Schemaファイルは↑の方法で生成できますが、operation.graphqlをまとめて、generateするようなpluginは用意されていないので、custom-pluginを作成していきます

Custom Plugin

このあたりを参考にしていきながら、custom-plugin.jsのファイルを作成していきます

custom-plugin.js

const { print } = require('graphql')
module.exports = {
  plugin: (schema, documents, config) => {
    const combinedDocuments = documents
      .map((doc) => {
        const docContent = doc.document.definitions
          .map((def) => print(def))
          .join('\n')

        return docContent
      })
      .join('\n\n')

    return combinedDocuments
  },
}

これをcodegen.tsで指定していきます

codegen.ts

import type { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  overwrite: true,
  schema: './schema.graphql',
  documents: 'src/graphql/*.graphql',
  generates: {
    'src/graphql/generated.tsx': {
      plugins: [
        'typescript',
        'typescript-operations',
        'typescript-react-apollo',
      ],
    },
    'mock/schema.graphql': {
      plugins: ['schema-ast'],
    },
    '../bff/src/graphql/schema.graphql': {
      plugins: ['schema-ast'],
    },
+   '../bff/src/graphql/operation.graphql': {
+     schema: 'src/graphql/*.graphql',
+     plugins: ['custom-plugin'],
 +  },
  },
}

export default config

これで、src/graphql/に置いたoperationのgraphqlファイルを参照して、新しくファイルを作成することができるようになりました。

実際に動かしてみます

web$ npm run codegen

> life-sync-web@0.1.0 codegen
> graphql-codegen --config codegen.ts
✔ Parse Configuration
✔ Generate outputs

無事ファイルが作成されていました！

├── bff
│   ├── src/
│   │   ├── graphql/
│   │   │   ├── operation.graphql  ・・・ オペレーションファイル
│   │   │   ├── schema.graphql     ・・・ スキーマファイル

アプリ起動

npm run start

アプリが起動し、src/graphql/graphql.tsのエンティティファイルが生成されました👍

明日はBlogModule BlogResolver BlogServiceを作成していきます