[Nestjs] 주식사이트 만들기-2 채팅 백엔드 만들기 (GraphQL & Apollo)

NestJS 에서 제공하는 WebSocket으로 진행을 하다, WebSocket connection 에러, Cors 에러가 계속 생기고, stackoverflow 를 계속 참조했지만 결국 일시적인 방편일 뿐 언제든지 다시 에러가 생겼다.

(가령, 다시 CORS 에러가 뜬다거나 404 Not Found 에러가 갑자기 뜬다던가...)

이 에러로 반나절은 날린 것 같다....

 

그래서 조금 안정적인 방향으로 채팅 백엔드를 구현하려고 하다가 다시 NestJS & TypeORM & GraphQL 을 이용하게 되었다.

 

먼저 Entity 칼럼들을 다 만들어준 후, Mutation 시 필요한 DTO 들을 만들어주었다. 또한, typeorm 을 사용하기 때문에 Query 와 Mutation, Subscription에 필요한 함수들을 Service에 구현시켜주고 Resolver에 넣어주었다.

또한 entity와 chat module을 app.module.ts에 연결시켜주었다.

 

- chat.entity.ts

import { Field, InputType, ObjectType } from '@nestjs/graphql';
import { IsNumber, IsString } from 'class-validator';
import { CoreEntity } from 'src/common/entities/core.entity';
import {
  Column,
  CreateDateColumn,
  Entity,
  PrimaryGeneratedColumn,
} from 'typeorm';

@InputType('ChatInputType', { isAbstract: true })
@ObjectType()
@Entity()
export class Chat extends CoreEntity {
  @Field((type) => String)
  @Column()
  @IsString()
  user: string;

  @Field((type) => String)
  @Column()
  @IsString()
  text: string;
}


// CoreEntity => id, createAt, updateAt 정보가 담겨있음.

 

 

- chat.service.ts

import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { CreateChatDto } from './dtos/create-chat.dto';
import { Chat } from './entities/chat.entity';

export class ChatService {
  constructor(
    @InjectRepository(Chat) private readonly chats: Repository<Chat>,
  ) {}
  getChat(): Promise<Chat[]> {
    return this.chats.find();
  }
  createChat(createChatDto: CreateChatDto): Promise<Chat> {
    const newChat = this.chats.create(createChatDto);
    return this.chats.save(newChat);
  }
}

 

- chat.resolver.ts

import { Mutation, Resolver, Query, Args } from '@nestjs/graphql';
import { ChatService } from './chat.service';
import { CreateChatDto } from './dtos/create-chat.dto';
import { Chat } from './entities/chat.entity';

@Resolver((of) => Chat)
export class ChatResolver {
  constructor(private readonly chatService: ChatService) {}
  @Query((returns) => [Chat])
  chats(): Promise<Chat[]> {
    return this.chatService.getChat();
  }
  @Mutation((returns) => Boolean)
  async createChat(
    @Args('input') createChatDto: CreateChatDto,
  ): Promise<boolean> {
    try {
      await this.chatService.createChat(createChatDto);
      return true;
    } catch (e) {
      console.log(e);
      return false;
    }
  }
    @Subscription((returns) => Chat)
  chatSubscription() {
    return pubSub.asyncIterator('chat');
  }
}

 

그 결과

 

/graphql

postgres

 

데이터의 CRUD 가 잘 되는 것을 확인 할 수 있었다.

그럼 이제 Nextjs를 이용해 프론트엔드 작업을 해야겠다.

 

https://github.com/act99/delivery-backend

GitHub - act99/delivery-backend: The backend of delivery service. It's just education.:)