[인스타그램 클론코딩] #3.16 ~ 3.18 isSelf, isFollowing, isLiked with Computed.js

안녕하세요 강정호입니다

 

오늘은 isSelf, isFollowing, isLiked를 Boolean으로 여부를 판단하는 API를 개발해보겠습니다.

 

model.graphql

type User {
  id: ID!
  userName: String!
  email: String!
  firstName: String
  lastName: String
  fullName: String
  isFollowing: Boolean!
  isSelf: Boolean!
  bio: String
  following: [User!]!
  followers: [User!]!
  posts: [Post!]!
  likes: [Like!]!
  comments: [Comment!]!
  rooms: [Room!]!
}

model.graphql의 User 타입에 isFollowing, isSelf 변수를 Boolean 타입으로 선언해줍니다.

** model.graphql의 역할

객체의 정보전달을 위한 틀입니다. SpringFramework에서 DTO를 만들어서 서버에서 조회한 데이터를 전송하는 용도로 사용하듯이 model.graphql에 선언된 객체 타입으로 서버에서 조회한 데이터를 클라이언트로 전송하기 위해 사용됩니다. 따라서 이는 schema를 선언한 datamodel.prisma와는 다릅니다.

 

computed.js ( isFollowing )

import { prisma } from "../../../generated/prisma-client";

export default {

    User: {

        fullName: async (parent) => {
            return `${parent.firstName} ${parent.lastName}`
        },
        isFollowing: async (parent, _, { request }) => {

            // 현재 인증된 사용자의 user 객체 할당
            const { user } = request;

            // 상위 Resolver의 데이터(seeUser.js에서 조회할 user id로 반환받은 user 데이터)
            const { id: parentId } = parent;

            try {
                return prisma.$exists.user({
                    AND: [
                        {
                            // 현재 나 자신
                            id: user.id
                        },
                        {
                            //내가 following 하고 있는 상대 user
                            following_some: {
                                id: parentId
                            }
                        }
                    ]
                });
            }catch(error){
                return false;
            }
        }

    }


}

User 타입 데이터를 생성시 위와 같이 isFollowing 여부를 판단하여 조립합니다.

 

** computed.js는 언제 호출 되는가?

 

 

** Resolvers arguments의 역할은 무엇인가? (parent, args, context, info)

Resolver는 아래의 총 4개의 인자를 필수적으로 받습니다.

 

- parent : 상위 Resolver의 리턴 결과값이 parent 변수에 담겨 있다.

 

- args : Graphql Resolver를 호출할떄 입력한 변수들이 입력되어있다.

예) Query{ user(id: "4") }  resolver user 호출시, 입력된 id: "4" 가 args이다.

 

- context : 리졸버 체인 상의 모든 리졸버가 읽기/쓰기를 할 수 있는 자바스크립트 객체를 말합니다. 즉, 리졸버 간에 정보를 교환할 수 있도록 해주는 수단입니다. 나중에 보시겠지만, GraphQL 서버가 초기화되는 시점에 context 객체에 값을 쓰는 것도 가능합니다. 따라서, context를 사용하면 임의의 데이터나 함수를 리졸버에 전달할 수도 있습니다.예를 들면 인증정보, 데이터베이스 커넥션 정보, 커스텀 fetch 함수 등이 있습니다. Resolver는 Context 아규먼트를 함부로 변경할 수 없기 때문에 일관성을 유지할 수 있습니다. 

 

- info : 

 

 

 

카카오 테크 블로그에서 참조한 글

• 첫번째 인자는 parent로 연쇄적 리졸버 호출에서 부모 리졸버가 리턴한 객체입니다. 이 객체를 활용해서 현재 리졸버가 내보낼 값을 조절 할 수 있습니다.
• 두번째 인자는 args로 쿼리에서 입력으로 넣은 인자입니다.
• 세번째 인자는 context로 모든 리졸버에게 전달이 됩니다. 주로 미들웨어를 통해 입력된 값들이 들어 있습니다. 로그인 정보 혹은 권한과 같이 주요 컨텍스트 관련 정보를 가지고 있습니다.
• 네번째 인자는 info로 스키마 정보와 더불어 현재 쿼리의 특정 필드 정보를 가지고 있습니다. 잘 사용하지 않는 필드입니다.

 

참고 페이지

 - www.prisma.io/blog/graphql-server-basics-the-schema-ac5e2950214e#9d03

- velog.io/@cadenzah/graphql-node-06-connect

- www.apollographql.com/docs/apollo-server/data/resolvers/#the-context-argument

- tech.kakao.com/2019/08/01/graphql-basic/

 

computed.js ( isSelf )

import { prisma } from "../../../generated/prisma-client";

export default {

    User: {

        fullName: async (parent) => {
            return `${parent.firstName} ${parent.lastName}`
        },
        isFollowing: async (parent, _, { request }) => {

            // 현재 인증된 사용자의 user 객체 할당
            const { user } = request;

            // 상위 Resolver의 데이터(seeUser.js에서 조회할 user id로 반환받은 user 데이터)
            const { id: parentId } = parent;

            try {
                return prisma.$exists.user({
                    AND: [
                        {
                            // 현재 나 자신
                            id: user.id
                        },
                        {
                            //내가 following 하고 있는 상대 user
                            following_some: {
                                id: parentId
                            }
                        }
                    ]
                });
            }catch(error){
                return false;
            }
        },
        isSelf: async(parent, _, { request }) => {
            const { user } = request;
            const { id: parentId } = parent;

            return user.id == parentId
        }

    }


}

isSelf에서는 현재 인증된 사용자의 id와 상위 Resolver에서 조회한 사용자의 id를 비교하여 true/false를 리턴한다.

 

 

computed.js( isLiked )

import { prisma } from "../../../generated/prisma-client";

export default {

    User: {

        fullName: async (parent) => {
            return `${parent.firstName} ${parent.lastName}`
        },
        isFollowing: async (parent, _, { request }) => {

            // 현재 인증된 사용자의 user 객체 할당
            const { user } = request;

            // 상위 Resolver의 데이터(seeUser.js에서 조회할 user id로 반환받은 user 데이터)
            const { id: parentId } = parent;

            try {
                return prisma.$exists.user({
                    AND: [
                        {
                            // 현재 나 자신
                            id: user.id
                        },
                        {
                            //내가 following 하고 있는 상대 user
                            following_some: {
                                id: parentId
                            }
                        }
                    ]
                });
            }catch(error){
                return false;
            }
        },
        isSelf: async(parent, _, { request }) => {
            
            // 현재 인증된 사용자
            const { user } = request;

            // 상위 Resolver에서 조회한 user.
            const { id: parentId } = parent;

            //user id 일치여부 확인
            return user.id == parentId
        }

    },
    Post: {
        isLiked: async (parent, _, { request }) => {

            // 현재 인증된 사용자
            const { user } = request;

            // post id
            const { id } = parent;
    
            // 현재 인증된 사융자가 해당 posts에 대해서 좋아요를 했는가?
            return prisma.$exists.like({
                AND: [
                    {
                        user: {
                            id: user.id
                        }
                    },
                    {
                        post: {
                            id
                        }
                    }
                ]
            });

        }
    }


}

 

 

 

테스트 결과(isLiked)