GraphQl 따라잡기 1탄 - GraphQL 개념에 대해 알아보자.

ㅎGraphQL.. 도대체 너 뭐니 ??~~

 

Apllo를 배워보기전에 GraphQL부터 마스터 해보자~~

 

그전에...

 

gql은 database 기술 인가??

 

No..!! API에 접목시킬수 있는 query형 언어다.

 

gql은 React나 js 개발시에만 가능한가??

 

그렇지 않다. API기술이기 때문에 어느 한정으로 사용하지 않는다.

 

에러 핸들링 (try & catch) 는 어떻게하는가 ??

 

root filed 바로 밑에 두번째 root field로 erros를 추가한다.

 

★ GraphQL이란?

•   facebook에서 만든 새로운 API 표준언어
•   필요한 데이터 구조조정 || 데이터 주고 받기 가능
•   Graph + Query Language 

GraphQL을 페이스북이 2012년도에 개발했고 총 3년 에 시간이 지난 후에 2015년 공개적으로 발표한 언어이다.

GraphQL은 React말고도 여러가지 언어로 구성되어있는데 대표적으로 Javascript, Pythone, Java, Go, PHP 등이 

GraphQL언어로 구현되어있다고 한다. 

gql에게는 REST API + Redux 와 같이 GraphQL + APOLLO 와 짝을 지어서 사용하고 있다.  Apollo와 다른 페북이 개발한 Relay라는 언어도 있다.

 

※ 그래서 GraphQL이 좋은 이유는 ?? 

• endpoint가 1개 모바일 기기 사용이 증대하는 요즘 효과적인 데이터 로딩이 가능하다.
• 한번의 요청으로 원하는 모든 데이터를 서버로부터 요청해서 가져오기 때문에 기존에 Rest API만을 사용할때 
  Overfeching 이나 Underfeching 등의 문제가 발생하지 않는다.
• 기종에 상관없는 API기 때문에 특정기종을 차별하지않는 언어

Overfaching

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

 

UnOverfaching
원하는 data의 정보를 요청하기 위해 여러번 요청을 보내는 것. 네트워크를 통해 여러번 접근해서 리소스를 낭비 발생

 

이렇게 적어놓으면 감이 안잡힐텐데 쓰는 과정을 직접 살펴볼까??

 

REST API의 경우

 user가 블로그에 글을 쓰면 3가지 endpoint가 필요하다.

/users/id
/users/id/posts
/users/id/followers

먼저 user에 대한 id 가 기본적으로 필요하고 그다음 id를 넘겨서 id 안에 있는 posts에 id를 입력하고, 그 posts에 있는 followers에 접근할 수 있다.

 

이것을 GQL로 바꾸면....

 

• endpoint가 하나기 때문에 한번의 요청으로 모든것을 보낼수 있다!!
  --> id 값만 바꿔 끼우면 한번만 호출할 수 있다.

query {
  User (id : "22doori22dori2dr") {
    name
    posts {
      title
      likes
    }
    followers(last: 3) {
      name
    }
  }
}

• 더이상 Overfacting과 Underfeching을 겪을 필요가 없다는 것.

  Overfetching: 불필요한 데이터까지 받아오는 것 
  Underfetching: endpoint 가 데이터를 덜 받아와서 요청을 여러번 날리는 것

• 강력한 Custom Type을 지님 
   --> BackEnd 에서 스키마 타입을 정할때 묶어서 정의할 수 있다고 한다. 
• 프론트에서 Data구조를 손쉽게 볼 수있다.
  --> REST에서는 하나 수정하려면 API의 주소를 바꾸고 데이터도 그때마다 바꿔줘야 연결이 가능한데 
  GQL에서는 말 그대로 그래프처럼 데이터를이 얽히고 설켜서 내가 하나하나 까보면서 볼 필요가 없다는 것 
  데이터 구조도 고정적이 아닌 수정후 삽입 가능
  
  

쿼리 날리는 법 

 자세한 설명은 2편에서 다뤄보자..

 

 

쿼리가 뭐야??

- graphQL에서 경로를 의미한다.

  백앤드 구조상, 모든 쿼리 Field를 resolver 함수로 연결 되고, 이 함수는 쿼리를 날릴때의 값을 Return 해준다.

 

 

이렇게 생긴 graphQL데이터 구조가 있다고 치면 
여기서 사람 이름에 대한 데이터를 빼내기 위해

 

{
  allPerson {
     name
  }
}

이곳에서 allPerson 필드는 query에 root filed 인데 이렇게 루드 영역에서 괄호를 열고 불러오고 싶은 값을 불러주면 된다.

name과 age같이 Root영역에 속해있고 , 우리가 불러오는 값들은 payload라고 한다. 

 

payload라는 뜻이 쉽게말해 사용할때에 전송되는 데이터라는 뜻을 가졌다. 이 뜻과 같이 사용하려는 데이터를 전송한다 라는 뜻과 같다.

 

{
  "data": {
    "allPersons": [
      {
        "name": "Johnny"
      },
      {
        "name": "Sarah"
      },
      {
        "name": "Alice"
      }
    ]
  }
}

• last parameter

{
  allPersons(last: 2) {
    name
  }
}

last parameter를  써주면 끝에서부터 해당하는 숫자만큼 데이터만 불러올 수 있다.

시작과 끝이 정해지면 좋겠다만.. 아직 last를 활용하지 못해서 장점을 모르겠다....

 

 

• mutaion

REST에서 CRUD가 있는거처럼 mutaion을 통해 CUD를 할 수 있다.

 

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

 

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

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

이렇게 mutation에 괄호를 열고 사람정보를 추가하면 

 

 

이렇게 자신을 추가할 수 있다.

 

여기서 기억해야 할점 mutation 또한 root filed를 가진다는 것!

위를 예시로 보면 createPerson이 root field이고, arguments로는 name과 age 값을 가지고 있다.

 

---

참고 사이트

지락문화예술공작단

 

그래프큐엘 따라잡기 1탄 - GraphQL 개념에 대해 간단히 살펴보자