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..

저번주 토요일? 부터 지금까지 아폴로 클라이언트 웹 소켓(using GraphQL) 문제가 풀리지 않고 있다. github 커뮤니티나 stackoverflow 에서는 Nextjs SSR 과정에서 발생하는 문제라고 하는 등 다양한 의견이 나오고 있는데, 무슨 짓을 해도 문제가 풀리지 않고 있다. 일단 다음단계로 넘어가고 차근차근 문제를 알아봐야겠다. Error: Unable to find native implementation, or alternative implementation for WebSocket! 문제

먼저, 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에 필요..