てらブログ

てらブログ

日々の学習の備忘録

NestJS・React環境でGraphQLを学習してみた①

まずGraphQLとNestJSについて基本的なことをまとめてみた。

 

 

GraphQL

GraphQL 特徴

  • Facebookによって開発
  • スキーマ
  • クエリ操作
    • Query → データの問い合わせ
    • Mutation → データの書き換え
    • Subscription → データの購読(?)
  • APIエンドポイントが1つ(/graphql)
  • リソースの取得に柔軟性がある → オーバーフェッチを防げる・アンダーフェッチを防げる
  • 型情報がある
  • キャッシュが複雑になりやすい(?)

 

スキーマについて

  • スキーマ言語で、クライアントから取得可能なデータ構造を、型と合わせて定義する → リゾルバーで実装
  • オブジェクト型で定義
    • スカラー
      • Int, Float, String, Boolean, ID
    • リスト型
    • ユニオン型、列挙型(enum)
    • Query型
    • Mutaion型

 

NestJS

NestJS 特徴

  • Node.js上で動作するバックエンドのフレームワーク
  • TypeScriptで作成されている
  • Expressをコアにして作成されている(上位互換、機能やライブラリ引き継がれている)
  • 拡張性が高い
    • DB(RDB, NoSQL)
    • セキュリティ(?)
    • GraphQL可
    • WdbSocket(?)
  • NestJS CLIを使える
  • Module, Controller(Resolver), Serviceの3つがコア要素

 

Moduleについて

  • ルートモジュールとFeatureモジュール
  • ResolverとServiceをまとめて、NestJSに登録
  • 外部モジュールのインポート、内部モジュールのエクスポート
  • 定義
    • classに@Module()デコレーターをつける
    • プロパティ: imports, proviers(Resolver, Service), exports
@Module({
imports: [PrismaModule],
Providers: [TaskResolver, TaskService],
})
export class TaskModule {}

 

Resolverについて

  • APIの処理を定義(Query, Mutation)
  • GraphQLスキーマに定義されたデータを返却
  • REST APIのControllerみたいな感じ
  • 定義
    • classに@Resolver()デコレーターをつける
    • 処理の内容をメソッドとして定義
@Resolver()
export class TaskResolver {
@Query(() => [Task])
getTasks() {
// タスク取得処理
}

@Mutation(() => Task)
createTask() {
// タスク作成処理
}
}

 

Serviceについて

 

 

Dependency Injection

  • 依存関係のあるオブジェクトを外部から渡す
  • 使用例
    • 本番用とテスト用でインスタンスを切り替え
    • ログ出力先の切り替え
  • DIコンテナ
    • 使用法
      • Moduleのprovidersに依存される側のクラスを登録
      • 依存する側のconstructorで注入される側のクラスを引数として受け取る

 

GraphQLを扱う方法

  • スキーマファースト
    • スキーマファイルを定義 → コードを生成する
    • フロントとバックに分かれて大規模開発するのに向いているが、バージョン管理が大変
  • コードファースト
    • コードにデコレーターを付与 → GraphQLスキーマを自動生成(コードとスキーマが常に一致)
    • フロントは生成されたスキーマを参照、小規模開発に向いている