NestJS에 GraphiQL 서버 설치

개시하다

지금은 참여한 프로젝트에GraphQL를 사용했기 때문에 학습과 함께 GraphiQL 서버를 만들어 보려고 합니다.프런트엔드 엔지니어이기 때문에 실제 업무에서는 서버를 구현할 수 없지만, BFF 서버가 스스로 이뤄졌으면 좋겠다는 마음으로 노력하겠습니다.
서버 측 프레임워크 사용NestJS!Type Script는 문서를 잘 참고하여 구현하면 코드가 자연스럽게 이해하기 쉬우므로 추천합니다!
다행히도 예전에 쓴 NestJS 기사. 많은 사람들이 읽은 것 같아서 필요할 거라고 믿고 썼어요.

독자 대상

NestJS를 사용하고 싶은 사람

GraphiQL 서버를 만들고 싶은 사람

NestJS에서GraphiQL 서버를 만들고 싶은 사람

환경을 실현하다

Node.js: v16.1.0

@nestjs/core: v8.0.0

graphql: v15.8.0

apollo-server-express: v3.5.0

실제 코드

기사 속 인코딩이 전부 GiitHub에 공개됐기 때문에 마음에 드시는 분들은 여기를 보세요.
프론트에도 설치되어 있어 잠시 이동할 수 있다.(분명히 엔지니어인데 프론트 데스크에 설치할 때 재료를 줄여서 저도 이래도 된다고 생각합니다. 용서해 주세요.)
https://github.com/hakushun/dm_graphql-apollo

설치 시작

프로젝트 설정

그럼, 어서 시작합시다!
튜토리얼에 익숙한 토도 리스트를 소재Code First로 방법대로 시행한다.
NestJS 프로젝트를 먼저 만듭니다.
이쪽는 다음 명령을 참조합니다.

# すでにインストール済みの方は不要
npm i -g @nestjs/cli
# プロジェクト名はご自由に
nest new project-name
# プロジェクトのディレクトリに移動
cd project-name
# 動作確認
npm run start:dev

GraphiQL과 Apollo의 준비

그리고 GraphiQL과 Apollo의 의존 관계를 설치합니다.
이쪽는 다음 명령을 참조합니다.

npm i @nestjs/graphql graphql@^15 apollo-server-express

설치가 완료되면 서버에 연결합니다.src/schema.gql는 잠시 후 작성된 문서이기 때문에 지금이 아니어도 계속된다.

// src/app.module.ts
import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { join } from 'path';
import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [
    GraphQLModule.forRoot({
      // schemaファイルのパスを指定
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
      // 生成されたschemaを自動でsortされるためのオプションをオンにする
      sortSchema: true,
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})

Todo List의 준비.

GraphiQL이 준비되면 Todo List가 준비됩니다.@nest/cli의 generate 명령을 사용하여 관련 파일을 만듭니다.

# g は generate のエイリアス
# src/todo/todo.module.tsの作成
nest g module todo
# src/todo/todo.service.tsの作成
nest g service todo
# src/todo/todo.resolver.tsの作成
nest g resolver todo

는 상기 명령src/app.module.ts에 따라 TodoModule의 도입을 추가했다.generate 사용 지령을 통해 귀하께 서비스를 제공할 수 있습니다.
다음은 Todo의 모델입니다.
여기에는 최소한의 내용이 정의되어 있다.

// src/todo/models/todo.models.ts
import { Field, ID, ObjectType, registerEnumType } from '@nestjs/graphql';

export enum TodoStatus {
  NEW,
  IN_PROGRESS,
  COMPLETE,
}
// enumを使用する際は registerEnumType でenumを登録しなくてはならない
// https://docs.nestjs.com/graphql/unions-and-enums#enums
registerEnumType(TodoStatus, {
  name: 'TodoStatus',
});

// ObjectTypeデコレータを使用することで、定義したmodelを元にschemaが自動生成される
@ObjectType()
export class Todo {
  // schame上、ID型にしたいため、ReturnTypeFuncを引数に与える
  // ReturnTypeFuncを引数に与えない場合、idの型はString型になる
  @Field((type) => ID)
  id: string;

  // ここはString型で良いのでReturnTypeFuncを引数に与えない
  @Field()
  title: string;

  // nullを許容するためオプションを指定
  // オプションを指定しない限り、nullは許容されない（String!型になる）
  @Field({ nullable: true })
  description: string;

  // GraphQLに存在しない型(TodoStatus)を指定する場合は、ReturnTypeFuncを引数に与える
  @Field((type) => TodoStatus)
  status: TodoStatus;

  @Field()
  createdAt: Date;

  @Field()
  updatedAt: Date;
}

내가 처음에 코드 퍼스트 방법으로 실현해야 한다고 말했지만 이 부분은 확실히 옳았다.
설령 자신이 schema를 정의하지 않더라도class가 정의한 상기 코드에 따라 schema를 생성할 것이다.평소 타입 스크립트를 쓰는 사람에게 shema는 쉽게 만들 수 있지 않나.
schema를 자동으로 생성하기 위해 서비스와 Resolver의 실현도 끝냅시다.

// src/todo/todo.service.ts
import { Injectable, NotFoundException } from '@nestjs/common';
import { Todo } from './models/todo.models';

@Injectable()
export class TodoService {
  // 今回はDBと接続しないのでメモリ上にTodoを保存します。
  private todos: Todo[] = [];

  // 全件取得のメソッド
  findAll(): Todo[] {
    return this.todos;
  }
  // idを元に一件取得のメソッド
  findOneById(id: string): Todo {
    const result = this.todos.find((todo) => id === todo.id);
    if (!result) {
      // なかったら404エラーを返す。ビルトインのエラーも豊富にあってエラー処理も結構楽
      // https://docs.nestjs.com/exception-filters#built-in-http-exceptions
      throw new NotFoundException();
    }
    return result;
  }
}

// src/todo/todo.resolver.ts
import { Args, ID, Query, Resolver } from '@nestjs/graphql';
import { Todo } from './models/todo.models';
import { TodoService } from './todo.service';

// Resolverデコレータでresolverを定義
// https://docs.nestjs.com/graphql/resolvers#code-first-resolver
@Resolver()
export class TodoResolver {
  constructor(private todoService: TodoService) {}
  // QueryデコレータでQueryを定義
  // 第一引数にReturnTypeFuncを指定し、型を定義。ここではTodoの配列を指定。
  // 第二引数にオプションとして{ nullable: 'items' }を与えることでから配列を許容する。[Todo]!と同義。
  // デフォルトでは [Todo!]! になる。
  @Query(() => [Todo], { nullable: 'items' })
  findAll() {
    return this.todoService.findAll();
  }

  @Query(() => Todo)
  // Queryに引数がある場合はArgsデコレータで定義。
  // 第一引数に引数の名前、第二引数に型を指定。
  // schema上の型定義は findOneById(id: ID!): Todo! となる
  findOneById(@Args('id', { type: () => ID }) id: string) {
    return this.todoService.findOneById(id);
  }
}

에서 상술한 서류를 제작하고 보존할 때 정말 불가사의하다.자동 생성src/schema.gql이 없습니까?(시작되지 않은 사용자는 로컬 서버가 시작되었는지 확인하고 다시 저장하십시오.)
여기에 src/app.module.ts의 다음 부분을 생각해 주세요.

// src/app.module.ts 抜粋
    GraphQLModule.forRoot({
      // schemaファイルのパスを指定
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
      // 生成されたschemaを自動でsortされるためのオプションをオンにする
      sortSchema: true,
    }),

autoShcemaFile에서 지정한 것은 자동으로 생성된 schema의 경로입니다.
여기까지 하면 방문해 보세요http://localhost:3000/graphql.나는 GraphiQL의 Playground가 일어날 것이라고 생각한다.

적절한 Query를 실행하여 값을 반환할지 확인하십시오.

# Playground左側に記入し、真ん中の三角ボタンをクリック
{
  findAll{
    id
  }
}

{
  "data": {
    "findAll": []
  }
}

빈 배열로 돌아왔나요?src/todo/todo.service.ts의 private todos: Todo[] = [];에 설치된 부분은 비어 있습니다.이 배열을 변경하고 Query를 다시 실행하면 결과도 변경됩니다.한번 해보세요.

이후 설치

만약 이 정도까지 할 수 있다면 남은 것은 확대할 수밖에 없다!Mutaaion을 정의하고, Todo를 만들고, Status를 업데이트하고, 삭제하고, 다양한 설치를 시도하세요!
GiitHub로 향상된 코드는 상술한 내용으로 만들 수 있으며 진행이 순조롭지 못하면 참고하시기 바랍니다.
개인적으로 Prism을 사용하는 것은 서버 메모리가 아니라 DB에 저장할 수 있다고 생각합니다.여러분도 다양한 게임을 꼭 해보세요!

끝말

끝까지 읽어주셔서 감사합니다.
다들 어떠세요?NestJS에GraphiQL 서버를 만들 수 있다면 다행입니다.
그리고 네스트JS의 장점과 그래픽QL의 즐거움을 전할 수 있다면 이 기사를 쓰는 데 의미가 있겠죠.
마이크로서비스 아키텍처가 늘고 BFF의 필요성이 증가하면 앞으로 그래피QL의 수요가 점점 높아지지 않을까.그때는 엔지니어라도 그 실시에 기여할 수 있을 것 같았다.
새해 복 많이 받으세요!