GraphQL API란?

웹 사이트들을 확인하다보면, html 데이터 속 <script> 태그에 window.__STATE__=[] {} 와 같은 형식이 들어있고, JSON 데이터가 들어있는 경우가 종종 있는데 이게 뭔지 궁금해서 찾아보게 되었다. 

이는 서버 측 렌더링 및 클라이언트 측 SPA (Single Page Application)에서 사용되는 Apollo Client에 대한 상태 정보를 초기 설정하기 위한 JSON 데이터라고 한다.

GraphQL API에서 데이터를 가져와서 애플리케이션에 사용한다. 이 상태 정보는 Apollo Client가 애플리케이션을 처음으로 렌더링 할 때 사용되며 초기 데이터를 가져온다. 이를 통해 초기 렌더링이 더 빠르게 이루어지고 필요한 데이터를 서버에서 가져온 다음 페이지가 로드 될 때 적절한 데이터로 업데이트된다.

이 데이터는 __STATE__객체 내부에 포함되며, 객체는 요청 된 쿼리와 연결된 고유 ID 값을 갖게 된다. 이것은 사용자가 이전에 본 페이지 데이터를 캐시하고 재사용하도록 허용하기 위해서다. 따라서 다음 페이지를 더 빠르고 부드럽게 로드 할 수 있다.

 

GraphQL API

GraphQL API는 쿼리를 이용하여 데이터를 요청하고 응답을 받을 수 있는 API 이다.
RESTful API와는 다르게 URL 패턴마다 리소스를 지정하고, HTTP 메소드를 이용하여 해당 리소스에 대한 CRUD(Create, Read, Update, Delete) 연산을 수행하는 방식이 아니라, 하나의 엔드포인트를 가지고 있다.
GraphQL은 이 엔드포인트에서 정의한 스키마를 기반으로 클라이언트가 필요한 데이터를 쿼리로 요청하고, 서버는 해당 쿼리를 해석하여 필요한 데이터를 응답한다. 이러한 방식을 통해 클라이언트는 필요한 데이터만을 선택적으로 요청할 수 있으며, 불필요한 데이터의 전송을 제한하여 더욱 효율적으로 데이터를 관리할 수 있다.
또한, GraphQL API는 다양한 데이터 소스에서 데이터를 가져와 응답하도록 구현될 수 있기 때문에 여러 시스템 간 데이터 통합에 유용한 기술이다. 또한, 특정 데이터 소스와의 종속성을 줄일 수 있으며, 다양한 클라이언트 애플리케이션, 모바일 앱, 데스크톱 앱, 웹 애플리케이션 등에서 사용할 수 있다.

 

GraphQL API는 여러 언어로 구현할 수 있으며 다양한 언어에서 구현된 GraphQL 라이브러리를 사용하여 GraphQL API를 개발할 수 있다.

가장 대표적인 GraphQL 라이브러리로는 Apollo Server, Graphene, graphql-yoga 등이 있다. 이들 라이브러리는 간단한 설정과 스키마 타입 정의로 GraphQL API를 구현할 수 있다.

GraphQL API를 구현하는 기본적인 과정

1. GraphQL 스키마 정의: 쿼리, 뮤테이션, 타입 등 필요한 스키마 요소를 정의
2. 데이터베이스 연결: 데이터 소스와 GraphQL 스키마를 연결
3. 리졸버 구현: 스키마에서 정의한 요소들의 필드를 해석하는 로직을 구현하는 리졸버 함수를 작성
4. 서버 개발: GraphQL API를 위한 서버를 개발하고, 라이브러리를 사용하여 데이터를 요청하고 응답할 수 있도록 구현

GraphQL API는 RESTful API와는 다르게 하나의 엔드포인트를 가지기 때문에 쿼리, 뮤테이션, 서브스크립션 등 다양한 요청 방식을 지원할 수 있다. 또한 GraphQL Playground와 같은 도구를 사용하여 쿼리 실행 및 테스팅이 가능하기 때문에 개발과 디버깅도 용이하다.

 

대표적인 GraphQL 방식은 인스타그램이 있는 것 같다. 인스타그램은 RESTful API와 함께 GraphQL API를 제공한다.