GraphQL의 개념을 이해하고, 과제를 통해 GraphQL 쿼리를 직접 쳐보며 문법 및 활용법을 익히는 시간을 갖도록 하겠습니다.

GraphQL

Server API 를 통해 정보를 주고받기 위해 사용하는 Query Language

ex) 도서 검색 서버에 요청

필드에 인수를 전달하는 부분을 추가하게 되면 쿼리의 필드 및 중첩된 객체들에 전달하여 원하는 데이터만 받아올 수 있습니다.

query {
	책(ISBN: "8679563349995") {
		책 이름
		저자 {
			이름
		}
	}
}

도서 검색 서버 응답

{
	책 : {
		책 이름 : "GraphQL은 어렵지 않다",
		저자 : [
			{ 이름 : "김진짜"},
			{ 이름 : "박구라"},
		]
	}
}

GraphQL의 특징

  • GraphQL은 HTTP를 통해 API 서버로 요청을 보내고 응답을 받습니다.
  • 응답을 받을 시, 데이터 결과를 JSON 형식으로 받습니다.
  • GraphQL은 서버 개발자가 작성한 각 필드에 대응하는 resolver 함수로 각 필드의 데이터를 조회할 수 있습니다.
  • GraphQL은 GraphQL 라이브러리가 조회 대상 schema가 유효한지 검사합니다.

REST API와 GraphQL의 차이

  • REST API는 Resource에 대한 형태 정의와 데이터 요청 방법이 연결되어 있지만, GraphQL에서는 Resource에 대한 형태 정의와 데이터 요청이 완전히 분리되어 있습니다.
  • REST API는 여러 Resource에 접근하고자 할 때 여러 번의 요청이 필요하지만, GraphQL에서는 한번의 요청에서 여러 Resource에 접근할 수 있습니다.
  • REST API에서 각 요청은 해당 엔드포인트에 정의된 핸들링 함수를 호출하여 작업을 처리하지만, GraphQL에서는 요청 받은 각 필드에 대한 resolver를 호출하여 작업을 처리합니다.

REST API의 단점인 Overfetching, Underfetching 문제를 해결할 수 있다.


[과제] github GraphQL API로 Live Data 받아오기

useEffect에서 쿼리를 fetching하여 데이터를 조회했다.

...

  async function agora(){
  const { repository } = await graphql(
    `
    {
      repository(owner: "codestates-seb", name: "agora-states-fe") {
        discussions(first: 10) {
          edges {
            node {
              title
              url
              createdAt
              author {
                resourcePath
              }
            }
          }
        }
      }
    }
    `,
    {
      headers: {
        authorization: `token secret token`,
      },
    }
  );
  return repository;
}

useEffect(() => {
  agora()
  .then((res) => {
    setData(res.discussions.edges)
  })
},[])

...