Act99 기술블로그

실시간 채팅구현을 Apollo client useQuery 를 이용해 만들 방법을 생각하다가 apollo client docs 에서 polling 과 refetch 개념을 찾았다. https://www.apollographql.com/docs/react/data/queries/ Queries Fetch data with the useQuery hook www.apollographql.com polling의 경우 타이머 설정 후 타이머 설정 시간마다 실시간으로 refetch를 해주는 기능으로, 쉽게 말해 settimeout 같은 느낌으로 데이터 refetch를 시켜준다. 코드는 다음과 같다. const { data } = useQuery(GET_CHAT, { variables: {}, pollInterva..

먼저, Graphql Query문을 만들어주었다. (localhost/xxxx/graphql 에서 쿼리상태 확인 가능) const GET_CHAT = gql` query frontChatQuery { chats { createdAt updatedAt user text } } `; 다음 query 변수의 타입들을 설정해주었다. (apollo codegen 사용하면 편리.) export interface frontChatQuery_Chat { __typename: "Chat"; createdAt: Date | undefined; updatedAt: Date | undefined; user: string; text: string; } export interface frontChatQuery { chat: fr..

결국 웹 소켓 사용하는것은 다음으로 미루기로 했다. (실제 채팅 어플은 웹소켓을 이용하지 않는다고 하고 다른 방법으로 우회할 방법을 찾았다.) 그래서 사용한 방법은 Subscription이 아닌, Query & Mutation 으로만 구현한 것이다. 먼저 Mutation 타입들을 만들어주었다. - frontChatMutation.ts export interface CreateChatDto { user: string; text: string; } export interface frontCreateChatMutation_createChat { __typename: "CreateChatDtoOutput"; ok: boolean; error: string | null; } export interface fron..

NestJS 에서 제공하는 WebSocket으로 진행을 하다, WebSocket connection 에러, Cors 에러가 계속 생기고, stackoverflow 를 계속 참조했지만 결국 일시적인 방편일 뿐 언제든지 다시 에러가 생겼다. (가령, 다시 CORS 에러가 뜬다거나 404 Not Found 에러가 갑자기 뜬다던가...) 이 에러로 반나절은 날린 것 같다.... 그래서 조금 안정적인 방향으로 채팅 백엔드를 구현하려고 하다가 다시 NestJS & TypeORM & GraphQL 을 이용하게 되었다. 먼저 Entity 칼럼들을 다 만들어준 후, Mutation 시 필요한 DTO 들을 만들어주었다. 또한, typeorm 을 사용하기 때문에 Query 와 Mutation, Subscription에 필요..

이번에는 채팅기능을 구현하려고 한다. 처음에는 Nestjs 와 Graphql 을 이용해서 CRUD를 만들고 gql 태그를 이용해 Apollo Client로 쿼리를 보내주고 Mutation 을 보내주는 형태로 채팅을 구현하려고 했다. 하지만 보통 실시간 채팅 앱 구현은 Websocket을 이용한다고 해서 채팅구현 로직을 바꾸게 되었다. 두 가지 방법을 모두 써서 괜찮은 것으로 구현하려고 하는데, 첫 번째는 NestJS 자체의 WebSocket을 이용해 실시간 채팅을 구현하는 방법 두 번째는 GraphQL 과 WebSocket을 이용해 채팅을 구현하는 방법 이렇게 두 가지 방법을 사용하려고 한다. 먼저, NestJS의 WebSoketGateway 방법을 진행했다. 이 방법은 정말 간단하게 구현이 가능한데, ..