전체 글 (138) 썸네일형 리스트형 [인스타그램 클론코딩] 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.. Prisma1과 Prisma2 데이터 모델링 비교 [인스타그램 클론코딩] Prisma2 데이터 모델링 포스트의 Prisma2 데이터 모델과 다음의 Prisma1 데이터 모델을 비교하면, Prisma1이 사용된 백앤드에 Prisma2를 적용하기 쉬울겁니다. Prisma1 Prisma2 데이터 모델과 동일한 구조입니다. type User { id: ID! @id userName: String! @unique avatar: String @default(value: "https://3.bp.blogspot.com/-qtEejOg1NHA/Xobmg2y_QeI/AAAAAAAAIVE/UFKPvpeHjKUqCEFOX8lT4MsKz-PwpEGJgCLcBGAsYHQ/s1600/default_user.png") email: String! @unique firstName: .. Prisma2 클라이언트 생성 Prisma2 CLI를 사용하여 데이터베이스 테이블 생성 포스트에서 데이터베이스에 테이블을 생성했지만, 코드상에서는 Prisma 클라이언트를 사용해서 데이터베이스에 접속하기 때문에, Prisma 모델 구조를 알고 있는 Prisma 클라이언트도 생성해 주어야 합니다. 참조 Prisma2 데이터 모델링1 - 1:1 Relation Prisma2 데이터 모델링1 - 1:N Relation Prisma2 데이터 모델링1 - Self Relation Prisma 클라이언트 생성 콘솔창에 다음 명령어를 입력하면, Prisma CLI가 Prisma 모델(schema.prisma)로 부터 Prisma 클라이언트를 생성합니다. npx prisma generate 참조: Prisma2 설치 (CLI, 클라이언트) 하지만 .. 이전 1 2 3 4 5 6 7 ··· 18 다음
