백엔드/Prisma + GraphQL (19) 썸네일형 리스트형 [인스타그램 클론코딩] 채팅기능 데이터 모델링 이번에 구현한 실시간 채팅에 포함하고 싶었던 기능은 다음과 같았습니다. 특정 사용자를 선택해서 채팅방을 만들 수 있습니다. 특정 채팅방의 알람을 끄거나 켤 수 있습니다. 위의 기능을 구현하기 위한 데이터 모델입니다. Room은 채팅방에 대한 정보를 저장하는 테이블입니다. 특정 채팅방에서 전송된 모든 Message는 해당 채팅방의 Room.messages에 연결됩니다. 특정 채팅방에 참가한 모든 사용자(User)는 해당 채팅방의 Room.participants에 연결됩니다. 특정 채팅방에 전송된 메세지의 알림을 켠 사용자(User)는 해당 채팅방의 Room.subscribers에 연결됩니다. Message는 사용자가 보낸 메세지에 대한 정보를 저장하는 테이블입니다. 사용자가 채팅방에서 메세지를 전송하면, .. [인스타그램 클론코딩] upload GraphQL을 아직 잘 모르겠다면? 나의 첫번째 GraphQL서버 만들기 upload Resolver는 AWS S3 서비스와 연계되어 사용됩니다. S3에 관한 내용은 사진 업로드 구현 포스트에서 설명하겠습니다. 다음은 업로드 영상입니다. upload.graphql caption(내용) 문자열과 files 문자열 배열을 필수로 받아서 포스트를 생성하고, 생성된 포스트의 정보를 반환하는 Resolver입니다. files 배열의 요소는 사진 웹 경로입니다. type Mutation { upload(caption: String!, files:[String!]!, location: String): Post! } Mutation은 데이터베이스를 변형시킨다는 것을 의미합니다. 클라이언트 (리액트 네이티브, 리액트 .. [인스타그램 클론코딩] toggleFollow ※ prisma의 upsert를 사용하면 더 간단히 구현할 수 있습니다. GraphQL을 아직 잘 모르겠다면? 나의 첫번째 GraphQL서버 만들기 팔로우 버튼은 특정 사용자와의 팔로우 상태를 반전시키는 버튼입니다. 그리고 toggleFollow는 클라이언트에서 팔로우 버튼을 눌렀을 때 백앤드에서 실행되는 Resolver입니다. 클라이언트에서 피드를 요청하면 백앤드는 요청자와 팔로우 상태인 사용자의 포스트만 백앤드에 요청합니다. 위의 동영상에서 팔로우가 해제됨에 따라 용 그림의 포스트가 사라지는 것을 확인할 수 있습니다. toggleFollow.graphql 팔로우되거나 언팔로우될 다른 사용자의 ID를 필수로 받아서 해당 사용자의 정보를 반환하는 Resolver입니다. Boolean 타입을 반환하도록 해.. [인스타그램 클론코딩] toggleLike GraphQL을 아직 잘 모르겠다면? 나의 첫번째 GraphQL서버 만들기 좋아요 버튼은 각각의 포스트에 포함된 하트(♥) 모양의 버튼입니다. 그리고 toggleLike는 포스트의 좋아요 버튼을 눌렀을 때, 백앤드에서 실행되는 Resolver입니다. toggleLike.graphql 요청자의 Like 레코드가 연결(등록)되거나 해제될 포스트의 ID를 필수로 받아서 해당 포스트의 정보를 반환하는 Resolver입니다. Boolean 타입을 반환하도록 해도 상관없습니다. 저는 ApolloClient의 캐시에 영향을 미치는지 테스트하기 위해서 Post 타입을 반환하도록 설정했습니다. type Mutation { toggleLike(postId: Int!): Post! } Mutation은 데이터베이스를 변형시.. [인스타그램 클론코딩] createAccount GraphQL을 아직 잘 모르겠다면? 나의 첫번째 GraphQL서버 만들기 createAccount는 클라이언트에서 직접 호출하지 않고, 사용자가 Cognito에 가입하면 Cognito의 Pre-SignUp 트리거에서 호출됩니다. 참조: [인스타그램 클론코딩] Cognito Pre-SignUp 람다 함수 createAccount.graphql userName과 email을 필수 매개값으로 받아서 문자열을 반환하는 Resolver입니다. type Mutation { createAccount( userName: String!, email: String!, firstName: String, lastName: String, name: String, bio: String, picture: String ): Str.. [인스타그램 클론코딩] Prisma2를 활용한 GraphQL Resolvers src/api 폴더에 카테고리 및 API별로 폴더를 만들어서 각 폴더에 graphql 파일(타입 및 Resolver 정의)과 js 파일(Resolver 구현)을 짝지어 위치시켰습니다. 그리고 src/api 폴더에 있는 모든 graphql 파일과 js 파일은 한 개씩의 타입 객체와 Resolvers 객체로 변환됩니다. 참조: GraphQL 데이터 모델링 도구 (@graphql-tools, nexus-prisma) 여러가지 API 중에서 createAccount, toggleLike, toggleFollow, upload 4개의 API만 알아보겠습니다. 각 타입 폴더의 compued.js 파일에서 해당 타입의 Computed 필드의 Resolvers를 구현했습니다. GraphQL 데이터 모델링 도구 (@graphql-tools, nexus-prisma) 제가 알고 있는 GraphQL 모델 정의 방법은 2가지가 있습니다. 1. @graphql-tools/merge, @graphql-tools/load-files 제가 사용한 방법입니다. 특정 경로에 있는 모든 graphql 파일과 js 파일별로 통합해서 타입 객체와 Resolvers 객체를 만들 수 있습니다. 노마드 코더님의 인스타그램 클론 강의에선 merge-graphql-schemas 모듈을 사용했는데요. 최근에 GraphQL Tools로 통합되면서 @graphql-tools/merge 모듈과 @graphql-tools/load-files 모듈로 분리이전되었습니다. src/schema.js const path = require("path"); const { makeExecutableSchema } = .. [인스타그램 클론코딩] GraphQL 데이터 모델링 GraphQL을 아직 잘 모르겠다면? 나의 첫번째 GraphQL서버 만들기 model.graphql 인스타그램 클론코딩에 사용된 GraphQL 모델입니다. 참조1: [인스타그램 클론코딩] Prisma2 데이터 모델링 참조2: GraphQL with Prisma2 설계 구조 Prisma2부터는 id 타입이 Int입니다. 그래서 GraphQL에서도 ID(String) 타입이 아닌 Int 타입을 반환합니다. scalar DateTime type User { id: Int! userName: String! avatar: String email: String! firstName: String lastName: String bio: String posts: [Post!] followers: [User!] follo.. 이전 1 2 3 다음
