GraphQL 로 영화 API 만들기(1)

graphql-yoga 는 create-react-app 명령어랑 비슷한데 GraphQL 프로젝트를 빠르게 시작할 수 있다.

 

 

 

graphql-yoga

Fully-featured GraphQL Server with focus on easy setup, performance & great developer experience

 

해석하면

-> 쉽게 설치하는데 중점을 둔 완전한 기능을 갖춘 GraphQL 서버

 

 

설치 명령

# yarn add graphql-yoga

 

 

 

 

 

 

내가 한 순서
1. github에 repo 생성
2. 빈 폴더 생성후 git init .
3. git remote add origin (repo addr)
4. git pull origin main
5. yarn add graphql-yoga

 

 

 

---

graphQL 로 해결할 수 있는 문제는 두 가지가 있다.

 

1. Over-fetching

2. Under-fetching

 

 

 

 

예를 들어, 모든 유저들 이름을 웹사이트에 보여주고 싶다고 하자. 

그럼 GET 을 쓸 것이다.

 

 

 

 

 

그런데 users 에서 사용자명만 주는 것이 아니라, 모든 유저들의 성이나 프로필 사진 같은 것들도 줄 것이다...!

 

 

 

하지만 나는 처음에는 그냥 사용자명만 보여주고 싶을 수 있다.

그 이후 프로필 사진 보여주기.... 를 계획했다고 치자!

 

 

 

 

 

 

그런데 그렇게 되면 해당 url 을 두번 호출해야 된다. 그리고 이 URL 은 각각 사용자명, 성, 이메일, 성별 등 이것저것들이 있는 큰 패키지들을 보내게 될 것이다.

 

 

 

 

 

 

 

Database 에 내가 사용하지 않을 영역을 요청하는 방식은 효율적이지 않다.

만약 처음에 get 요청을 users 에 보내면 프로필 사진, 이름, 성, 이메일 영역은 사용하지 않을 것이다. 

 

 

 

 

 

이것을 over-fetching 이라고 한다.

내가 요청한 영역의 정보보다, 많은 정보를 서버에서 받는 것을 말한다. 

 

 

 

 

 

 

 

 

under-fetching 에 대해서도 알아보자...!

여기서는 인스타그램을 예시로 든다...

 

 

EX)

인스타그램 페이지의 피드를 받고, 알림도 받고, 사용자 프로필도 받는다.

 

/feed

/notifications/

/user/1/

 

 

 

앱을 처음 시작하려면 이 세가지 요청을 해야한다.

즉, 3가지 요청이 3번 오고가야 앱이 시작되는 것이다. 

 

이것이 Under-fetching 이다.

REST 에서 하나를 완성하려고 많은 소스를 요청하는 것이다. 

 

 

 

 

 

이것이 GraphQL 이 해결할 수 있는 문제이다.

Over-fetching, Under-fetching 을 겪을 필요가 없다. 

 

 

 

즉, 한 쿼리에 내가 정확하게 원하는 정보만을 받을 수 있다. 

 

 

 

/feed

/notifications/

/user/1/

 

GraphQL 이란 것은 이 모든 것들을 한 URL 에서 받는다...로 생각하면 쉽다. 

 

 

 

 

 

 

Query 의 정의

Query 는 Database 에서 무언가를 요청하는 것이다.

 

예를 들어, 피드를 원하는데 모든 사진 피드 중에 댓글이랑 좋아요 수를 원하고 알림을 원하고 그 알림을 확인했는지 대한 정보를 원한다. 

그리고 유저 프로필을 원하는데 사용자명과 프로필 사진을 원한다고 하자

 

{
	feed {
    	comments
        likeNumber
    }
    notifications {
    	isRead
    }
    user {
    	username
        profilePic
    }
}

 

이것이 Query 이다. 

이걸 GraphQL 의 백엔드에 보내면 이와 같은 요청 정보를 담은 Object 가 올 것이다.

 

 

 

 

 

위의 코드는 GraphQL 에 보낼 거고 아래 코드는 GraphQL 에서 보낸 Javascirpt Object 이다.

 

{
	feed: [
    		{
    			comments: 1, 
        		likeNumber: 20
    		}
         ],
    notifications: [ 
    {
    	isRead: true
    },
    {	
    	isRead: false
     }
   ],
    user: {
    	username: "jihyun",
        profilePic: "url"
    }
}

 

위와 같이 내가 요청한 것만 정확하게 보내준다. 

참고로 피드는 여러 개일 수 있으므로 배열 형태? 로 올 수 있다.

 

 

 

 

 

이번 시간에 배운 것은 Query, Under-fetching, Over-fetching 에 대해 배우고 GraphQL 이 이런 문제들을 어떻게 해결하는지에 대해 알아봤다. 

다음 시간에는 GraphQL Yoga 로 GraphQL 서버를 만들어 보겠다.