GraphQL은 API를 위한 쿼리 언어(query language) 죠. 데이터베이스를 다뤄 본 분들이라면 SQL이라는 말을 들어 보았을 텐데요. SQL은 Structured Query Language의 약어이며 데이터베이스를 조작하기 위한 쿼리 언어죠. 마찬가지로 GraphQL은 서버 단의 API 호출을 위한 쿼리 언어입니다. GraphQL을 이용하면 복잡한 조건의 API 호출도 하나의 쿼리로 간편하게 호출할 수 있어 편리하죠.
워드프레스 API
워드프레스도 API를 공개하고 있다는 건 모두들 아시죠? 워드프레스는 기본적으로 다음 2가지의 API 호출 방식을 지원하고 있습니다.
사실 API를 통해 워드프레스를 액세스하는 용도라면 위 둘 중 하나면 대부분 충분합니다. 특히 REST API는 체계가 잘 갖춰져 있고 확장성도 높아 사용하기 아주 편리하죠.
하지만 REST API는 다음과 같은 단점이 있습니다:
- 모든 접속 주소의 URL을 알고 있어야 한다.
- 호출 시 불필요한 데이터까지 가져오게 된다.
- 여러 종류의 값을 가져 오려면 여러 번 API를 호출해야 한다.
GraphQL은 이런 REST API의 불편한 점들을 해결해 줍니다. GraphQL을 사용하면 하나의 연결점(endpoint)를 지정해 그곳에서 한번의 쿼리 호출로 꼭 필요한 데이터만 받아 올 수가 있다는 장점이 있습니다.
하지만 아쉽게도 워드프레스 코어에는 현재 GraphQL이 지원되지 않습니다. 그렇지만 걱정할 건 없죠? 늘 그렇듯 우리에겐 플러그인이 있으니까요!
WPGraphQL 플러그인
WPGraphQL 플러그인을 설치하면 워드프레스를 GraphQL 서버로 변신시킬 수가 있습니다.
설치 방법은 통상적인 워드프레스 플러그인 설치 방법과 같습니다. 워드프레스 플러그인 디렉터리에서 플러그인을 검색해 내려받아 설치하고 활성화하면 되죠.
설치가 완료되면 워드프레스 관리자 대시보드에 다음과 같이 “GraphQL” 메뉴가 추가됩니다.
상단에 “GraphQL Endpoint” 입력 박스가 보이시나요? 그 URL이 모든 GraphQL API 호출의 진입점입니다. 제 경우는 “http://wptest.local/graqhql” 이지만, 여러분의 각자의 환경에 따라 조금 다를 겁니다. 암튼!
브라우저에서 한번 접속해 보세요! 뭐가 보이나요? 아래와 같이 뭔가 오류가 발생했다는 메시지가 뜨면 정상입니다.
{"errors":[{"message":"GraphQL Request must include at least one of those two parameters: \"query\" or \"queryId\"","extensions":{"category":"request"}}],"extensions":{"debug":[{"type":"DEBUG_LOGS_INACTIVE","message":"GraphQL Debug logging is not active. To see debug logs, GRAPHQL_DEBUG must be enabled."}]}}
그러면 여기서 테스트 겸 포스트 목록을 한번 가져와 볼까요?
관리자 대시보드 상단에 보면 “GraphiQL IDE”라는 메뉴가 추가된 것을 확인할 수 있을 것입니다. 이 메뉴를 클릭해 보면 GraphiQL 편집기가 뜨는데요. 이 편집기를 통해 GraphQL API 호출에 필요한 쿼리문을 작성할 수 있습니다.
GraphiQL IDE를 보면 맨 좌측엔 익스플로러(Explorer)라고 해서 워드프레스에서 가져올 수 있는 데이터 모델(‘스키마’라고 부릅니다)이 보이고, 맨 우측 가장 자리에는 도움말 문서를 볼 수 있습니다. 그리고 그 중앙에 쿼리문을 입력할 수 있는 입력 폼이 있습니다.
해당 입력 폼에 다음과 같은 쿼리문을 입력하고 상단의 Play 버튼을 누르면,
{
posts {
nodes {
id
title
uri
}
}
}
아래와 같이 쿼리 호출의 결과가 입력 폼 우측에 표시되는 것을 확인할 수 있습니다.
이런 식으로 쿼리를 작성하여 GraphQL 엔드포인트에 쿼리문을 제출하면 그 결과로 쿼리 결과가 JSON 형식으로 반환되는 게 GraphQL의 작동 방식입니다.
쿼리문 작성 시에 GraphiQL IDE 좌측의 스키마 익스플로러를 통해 호출할 데이터의 스키마를 확인하고 선택하면 좀더 쉽게 쿼리를 작성할 수 있겠죠?
WPGraphQL 확장
WPGraphQL은 워드프레스 기본 데이터 구조만을 반영합니다. 하지만 워드프레스로 웹사이트를 만들 경우 각종 플러그인을 설치하게 되고, 경우에 따라서는 이들 플러그인에서 제공하는 데이터들도 GraphQL API를 통해 액세스해야 할 경우가 있습니다.
그래서 WPGraphQL을 위한 여러 확장 플러그인들이 제공되고 있습니다. 예를 들어, 워드프레스 필수 플러그인 중 하나인 ACF 플러그인 같은 경우가 그렇죠. 이럴 땐 ACF를 위한 GraphQL 확장 플러그인을 설치해서 사용하면 됩니다.
같은 원리도 WPGraphQL 확장이 필요한 경우, 워드프레스 플러그인 디렉터리를 통해 다양한 확장 플러그인을 찾아 사용할 수가 있답니다.
- WPGraphQL Gutenberg 구텐베르크 블록을 위한 WPGraphQL 확장
- WPGraphQL Yoast SEO Addon Yoast SEO 플러그인을 위한 WPGraphQL 확장
GraphQL API 사용하기
앞서 소개한 것처럼 워드프레스를 GraphQL 서버로 만드는 것은 플러그인 하나 뚝딱 설치만 하면 끝나는 간단한 일입니다. 진짜 할 일은 이 GraphQL API를 사용하여 프론트엔드를 만드는 일이겠죠?
알다시피 시중에는 많은 자바스크립트 UI 라이브러리들이 나와 있습니다. 리액트(React), Vue, Ember, Angular, Nuxt 등등. 이들 모두 GraphQL을 호출할 수 있는 기능들을 플러그인이나 확장 모듈로 제공하고 있습니다.
예를 들어, 요즘 많이들 사용하는 프론트엔드 웹사이트 도구 중 하나인 개츠비(Gatsby) 같은 경우는 아예 백엔드를 GraphQL로만 사용할 수 있게 되어 있습니다.
또한 Gatsby의 경우, WPGraphQL 플러그인의 결과 데이터 값을 조금 비틀어 좀더 Gatsby에 맞게끔 변형하게끔 해주는 별도 플러그인도 제공하죠.
GraphQL API로 워드프레스 데이터를 받아 Gatsby에서 사용하는 방법에 대해서는 아래 글을 참고하세요!
Gatsby로 워드프레스 테마 만들기
0 thoughts on “워드프레스로 GraphQL 서버 만들기”