GraphQL

페이스북에서 만든 API를 위한 쿼리 언어
모든 데이터가 그래프 형태로 연결되어있다고 전제하는
Graph Query Language이다.

GraphQL VS REST API

REST API가 있음에도 GraphQL이 탄생한 배경

- Overfetch: 필요없는 데이터 제공
REST API의 경우에는 응답 데이터에는 클라이언트에 필요없는 정보가 포함될 수 있음
- Underfetch: endpoint가 필요한 정보를 충분히 제공하지 못함
REST API는 클라이언트에 필요한 데이터를 모두 확보하기 위해 여러 엔드포인트에
요청을 여러번 보내야하는 경우가 있을 수 있음
- 클라이언트 구조 변경 시 엔드포인트 변경 또는 데이터 수정 필요
REST API에서는 자원의 크기와 형태를 서버에서 결정하기 때문에 클라이언트가 직접 데이터의 형태를 결정할 수 없습니다. 이로 인해 만약 클라이언트에서 필요한 데이터의 내용이 변할 경우 다른 endpoint를 통해 변경된 데이터를 가져오거나 수정을 해야합니다.

GraphQL kewords

• Query: 저장된 데이터 가져오기 (REST의 GET과 비슷합니다.)
• Mutation: 저장된 데이터 수정하기
  • Create: 새로운 데이터 생성
  • Update: 기존의 데이터 수정
  • Delete: 기존의 데이터 삭제
• Subscription: 특정 이벤트가 발생 시 서버가 대응하는 데이터를 실시간으로 클라이언트에게 전송

query 데이터 조회

- 필드(field)
간단한 쿼리문

{
  hero {
    name
  }
}

- 전달인자
전달인자를 줘서 원하는 데이터만 가져올 수 있음

{
  human(id: "1000") {
    name
    height
  }
}

• 별명 (Aliases)
  필드 이름 중복 사용 불가 이런 경우에는 꼭 엘리어스 지정 필요함

{
  empireHero: hero(episode: EMPIRE) {
    name
  }
  jediHero: hero(episode: JEDI) {
    name
  }
}

• 변수
  실제 앱을 사용하면 고정된 이수를 사용하는 경우보다는 동적으로 인수를 받는 경우가 많다
  오퍼레이션 네임 옆에 변수를 $변수 이름: 타입 형태 로 정의.
  예시처럼 $ep: Episode 일 때, 뒤에 !가 붙는다면 ep는 반드시 Episode여야 한다는 뜻입니다. !는 옵셔널한 사항입니다.

query HeroNameAndFriends($episode: Episode) {
  hero(episode: $episode) {
    name
    friends {
      name
    }
  }
}

뮤테이션 (mutation) 데이터 수정

REST API에서 POST,PUT요청에 해당

mutation CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) {
  createReview(episode: $ep, review: $review) {
    stars
    commentary
  }
}

스키마/타입

스키마의 가장 기본 구성 요소는 서비스에서 가져올 수 있는 객체의 종류
포함하는 필드를 나타내느 객체 유형

리졸버(Resolver)

요청에 대한 응답을 결정해주는 함수
Query, Mutation, Subscription과 같은 타입의 실제 일하는 방식 즉 로직을 작성

const db = require("./../db")
const resolvers = {
  Query: { // **Query :** 저장된 데이터 가져오기 (REST 에 GET 과 비슷합니다.)
		getUser: async (_, { email, pw }) => {
			db.findOne({
				where: { email, pw }
			}) ... // 실제 디비에서 데이터를 가져오는 로직을 작성합니다. 
			...
		}
  },
  Mutation: { // **Mutation :** 저장된 데이터 수정하기 ( Create , Update , Delete )
		createUser: async (_, { email, pw, name }) => {
			...
		}
  }
  Subscription: { // **Subscription :** 실시간 업데이트
    newUser: async () => {
      ...
		}
  }
};

APOLLO