[GraphQL]그래프 큐엘 기본 개념 알아가기 - 1탄 | 그래프 큐엘과 리액트?

📈 그래프 큐엘이란 뭘까? 📉

처음에 SQL과 비슷한 이름이라 백엔드에서 쓰는 쿼리언어 일까 생각했다..!

• 그래프 큐엘은 페이스북에서 만든 새로운 쿼리 언어다.
• 데이터 주고 받기가 가능하며
• 그래프+쿼리 언어라고 보면된다.

즉, API에 접목 시킬 수 있는 쿼리 언어이다.

그래프 큐엘을 기반으로 하는 Apollo라는 상태관리 라이브러리가 있다.

🔍 여기서 잠깐, Apollo는  GraphQL을 편하게 사용할 수 있도록 도와주는 라이브러리이다.
- Apollo는 client와 server 에서 모두 사용이 가능하다.
- 공식 홈페이지에서 Apollo client는 react redux를, Apollo server는 REST API를 대체할 수 있을 것이라고 한다.

 

📈 GraphQL이 왜 좋은가?

• endpoint가 1개라서 효과적인 데이터 로딩이 가능하다!
• 프런트 단에서 필요한 데이터에 쉽고 정확하게 접근이 가능하다.
• 한번의 요청으로 원하는 모든 데이터를 서버로부터 요청해서 가져오기 때문에 기존에 Rest API만을 사용할 때 발생하는 Overfeching 이나 Underfeching 등의 문제가 발생하지 않는다.
  
• client와 server의 커뮤니케이션에 효과적이다.

 

Overfaching
원하는 데이터 이상의 정보를 요청하는 것. data 리소스 낭비 발생

Underfaching
endpoint가 원하는 데이터를 덜 받아와서 요청을 여러번 날리는 것. 네트워크를 통해 여러번 접근해서 리소스를 낭비 발생

---

REST API의 경우

원하는 작업을 할 때마다 endpoint가 필요하기 때문에 endpoint가 여러 개 존재한다.
예를 들어, 블로그에 포스트를 올리려고 할 때 다음과 같이 여러 개의 endpoint가 필요하다.

api/:userid
api/:userid/:postid
api/:userid/:follows

 

GraphQL을 사용하면 그럴 필요가 없다..!

query {
  User (id : "1234") {
    name
    posts {
      title
      likes
    }
    followers(last: 2) {
      name
    }
  }
}

위와 같이 하나의 endpoint로 필요한 User의 id만 갈아끼우면 한번의 요청으로 원하는 데이터를 계속 받아올 수 있다!

🔗 장점

• 프론트에서 데이터구조를 쉽게 볼 수 있다

→ REST에서는 뭐 하나 수정하면 api 주소 바뀌고,,
데이터도 그때 그때 바뀌는 주소를 통해야지 받아볼 수 있어서 전체적으로 확인하기가 어려웠다.
GQL은 말 그대로 그래프처럼 데이터들이 얽힌 것이기 때문에 하나하나 다 까보면서 정보를 확인할 수 있다.
데이터 구조도 고정적이 아니라 수정도 가능하다.

 

🕶 last parameter 는 뭐예요?

: 위의 followers에 보면 last: 2와 같이 파라미터가 들어있다.
끝에서부터 해당하는 숫자만큼의 데이터만 불러올 수 있다는 뜻이다.

---

⛓ Mutation

REST에서의 CRUD 처럼 mutation을 통해 CUD를 할 수 있다.

크게 3가지로 생각해볼 수 있다.

• Create --> 새로운 데이터 만들기
• Update --> 기존 데이터 업데이트
• Delete --> 기존 데이터 삭제

다음과 같이 mutation에 인자를 넣어 호출하면 새로운 유저가 생성된다.

mutation {
  createPerson(name: "Doori", age: 29) {
    name
    age
  }
}

다음과 같이 뮤테이션을 정의할 수 있다.

type Mutation {
  createUser(id: ID!, name: String!, email: String!, age: Int): User!
  updateUser(id: ID!, name: String, email: String, age: Int): User!
  deleteUser(id: ID!): User!
}

 

느낌표(!) 는 null값이 될 수 없다는 뜻이다.
즉, 필수 값이다 !

정리해보면,

• createUser: 새로운 유저 등록하는 뮤테이션
• updateUser: 기존 유저 업데이트하는 뮤테이션
• deleteUser: ID를 넘겨받고 해당 유저를 삭제하는 뮤테이션

 

😎 이정도로 1탄을 마무리하려고 한다. 
다음 2탄에서는 직접 쿼리문을 날려보고 실습하는 포스트로 돌아오겠다~