GraphQL의 실체 // Optimistic UI

graphQL은 사실 restAPI와 같다?

rest의 실행 방식 : fetch('https://koreanjson.com/posts/1')
graphQL의 실행 방식 : https://backend03.codebootcamp.co.kr/graphql

두개의 형태가 굉장히 비슷하다.

• rest의 경우 맨뒤에 posts/1이 오고 graphQL의 경우 맨뒤에 graphql이 온다.
  ++ rest는 엔드포인트가 굉장히 많다.
  ++ graphQL의 경우 여러개의 data가 graphql안에 들어있는 것과 같다.

아! graphQL은 graphql이라는 엔드포인트가 하나인 restAPI였구나!

rest로 3개의 쿼리를 보내려면 3번 보내야하지만 graphql은 그안에 객체를 묶어서 보내기 때문에 한번만 보내면 됨

깨알상식

JSON
: Java Script Object Notation

• graphql에서 axios를 사용할때는 query든 mutation이든 data를 보내야되기 때문에 post를 사용한다.
  

optimistic UI

• 쿼리를 요청했을 때 쿼리에 성공했을때를 낙관적으로 예측하여 성공한데이터를 먼저 보여주는 방식

기존

• 좋아요 버튼 누르기
• BackEnd, DB로 +1 데이터 보내기
• refetch해서 게시물 id를 BackEnd, DB로 보내기
• 좋아요개수 불러오기

optimistic UI

• 좋아요 버튼 누르기

• BackEnd, DB로 +1 데이터 보내면서 optimistic UI가 성공했을때를 예측해서 fetch를 먼저 실행(좋아요 +1시키기)

• 만약, 데이터를 보내는데 실패했다면 다시 정정함

  optimisticResponse를 사용하면 그 쿼리가 끝나지 않았는데도 optimisticResponse안에서 설정한 데이터가 update의 data에 자동으로 들어간다.

  그럼 성공했을때를 가정한 data가 화면에 먼저 띄워지고 쿼리에 실패했다면 다시 원래data로 돌려준다.

  

RTT(Round Trip Time)