WordPress에 GraphQL을 가져오는 WordExpress 프로젝트 실험

2012년 Facebook이 HTML5 기반 모바일 애플리케이션을 기본 iOS 또는 Android 앱으로 재설계하기 시작했을 때 회사는 GraphQL을 발명했습니다. 이 새로운 오픈 소스 쿼리 언어는 REST를 직접 대체할 것으로 예고되고 있습니다. GraphQL은 매일 Facebook 앱 전체에서 발생하는 상호 작용의 양을 지원하는 보다 효율적인 방법을 제공하지만 데이터베이스에 구애받지 않으며 Facebook 외부에서 사용하도록 제작되었습니다.

GraphQL은 아직 비교적 새롭지만 Intuit, Coursera, Pinterest 및 Shopify와 같은 대기업에서 프로덕션에 사용하고 있습니다. 지난달 GitHub는 REST 아키텍처의 일부 단점에 답하기 위해 GitHub API에 대한 GraphQL 지원을 발표했습니다.

GraphQL은 데이터를 보다 효율적으로 가져오는 클라이언트에서 서버로의 통신을 구조화하는 새로운 방법을 제공합니다. REST API 시대의 GraphQL 기사에서 Petr Bela는 두 가지 아키텍처 유형의 차이점을 요약했습니다.

GraphQL의 힘은 단순한 아이디어에서 나옵니다. 서버에서 응답 구조를 정의하는 대신 클라이언트에 유연성이 부여됩니다. 각 요청은 반환하려는 필드와 관계를 지정하고 GraphQL은 이 특정 요청에 맞는 응답을 구성합니다. 이점: 그렇지 않으면 여러 REST 끝점에 걸쳐 있을 수 있는 모든 복잡한 데이터를 가져오는 데 한 번의 왕복만 필요하고 동시에 실제로 필요한 데이터만 반환하고 그 이상은 반환하지 않습니다.

지난달 Facebook은 GraphQL이 "기술적 미리보기" 단계를 종료하고 현재 생산 준비가 완료되었다고 발표했습니다. 다양한 프로그래밍 언어로 구현되었으며 보다 효율적인 데이터 액세스 방법을 원하는 회사에서 이미 채택했습니다.

WordPress에 GraphQL을 제공하는 WordExpress

워싱턴 DC의 nclud에서 일하는 JavaScript 프론트 엔드 개발자인 Ramsay Lanier는 WordExpress라는 GraphQL 기반 WordPress 구현을 만들었습니다. Lanier는 PHP 팬이 아니며 역사적으로 WordPress 프론트엔드 개발의 대부분을 차지하는 루프나 템플릿 작업을 좋아하지 않습니다. 그는 WordPress의 프레젠테이션 측면에서 PHP를 JavaScript로 대체하는 것을 목표로 WordExpress를 Node.js 애플리케이션으로 만들었습니다. 백엔드에서 Express를 사용하고 프론트엔드에서 React 구성 요소를 사용합니다. GraphQL은 WordPress 데이터베이스에서 데이터를 검색하기 위해 둘 사이에 있습니다.

"원래 WordExpress에 대한 아이디어로 시작했을 때 REST API를 사용하고 싶었지만 기존 엔드포인트가 내가 원하는 것이 아니라는 것을 알게 되었습니다."라고 Lanier는 말했습니다. “많은 사용자 지정 끝점과 연결 호출을 함께 작성해야 했습니다. 그래서 GraphQL을 사용해 보고 싶다고 생각했습니다.”

그는 GraphQL이 서버로의 왕복을 줄여 개발자가 클라이언트가 실제로 필요로 하는 데이터에 집중할 수 있기 때문에 REST보다 더 효율적이라는 것을 발견했습니다. Lanier는 WordPress 사이트와 관련된 이점을 강조했습니다.

GraphQL을 사용하면 클라이언트는 GraphQL 쿼리를 통해 필요한 정확한 데이터를 결정합니다. GraphQL 쿼리에는 해당 데이터를 검색하는 방법을 결정하는 사용자 지정 해결 기능이 있습니다. 해당 기능에서는 여러 데이터베이스를 적중할 수도 있습니다. 예를 들어 WordPress에는 MySQL 데이터베이스가 있지만 관계형일 필요가 없는 다른 데이터를 저장하는 애플리케이션용 Mongo 데이터베이스도 있을 수 있습니다. GraphQL 해석 기능에서 두 데이터베이스 모두에서 데이터를 검색하고 한 번의 서버 왕복으로 클라이언트로 다시 보내도록 호출할 수 있습니다.

현재 형태의 WordExpress는 관리를 위해 WordPress를 사용하는 JavaScript 기반 애플리케이션을 구축하기 위한 좋은 출발점입니다. Lanier는 이 개발 설정을 통해 PHP 템플릿을 사용하는 것보다 훨씬 쉽게 웹 페이지 및 애플리케이션의 구성 요소를 만들 수 있다고 말했습니다.

"React를 사용하면 각 구성 요소에는 표시하는 마크업뿐 아니라 해당 구성 요소의 스타일, 작동하는 데 필요한 데이터, 상호 작용 논리도 포함되어 있습니다. 모두 하나 또는 두 개의 파일에 있습니다."라고 그는 말했습니다.

WordExpress의 현재 과제: 플러그인 호환성 및 서버 측 렌더링

보다 효율적인 쿼리의 모든 흥미로운 이점과 JavaScript 기반 프론트엔드의 가능성에도 불구하고 WordExpress 프로젝트에는 간단한 블로그 설치를 넘어 프로덕션에서 사용하기 어렵게 만드는 여러 가지 심각한 문제가 있습니다. 대부분이 PHP로 작성되었으므로 대다수의 WordPress 플러그인과 호환되지 않습니다.

"본질적으로 저는 전체 프론트 엔드를 교체했습니다. 즉, 프론트 엔드에 영향을 미치는 플러그인은 아무 것도 하지 않을 것입니다."라고 Lanier가 말했습니다. "하지만 고급 사용자 지정 필드 또는 AWS S3 플러그인과 같이 관리 측면에 영향을 주는 기존 플러그인을 확실히 활용할 수 있습니다. WordPress 데이터가 MySQL에 저장되는 방식을 조작하는 모든 것은 여전히 ​​사용할 수 있습니다. GraphQL 스키마와 쿼리를 수정하면 됩니다.”

다른 주요 과제는 SEO 및 메타 태그와 같은 작업을 처리하는 데 필요한 서버 측 렌더링을 작동시키는 것입니다. WordExpress가 데이터를 가져와 React 구성 요소에 전달하는 데 사용하는 Apollostack은 최근에 자동 서버 측 렌더링에 대한 초기 지원을 추가했습니다.

Lanier는 “Facebook의 Relay를 사용하다가 ApolloStack으로 전환했습니다. “둘 다 꽤 새로운 기술이고 둘 중 어느 쪽이 실제로 서버 측 렌더링을 잘 처리하는 방법을 알아냈는지 확실하지 않습니다. 나는 몇 달 동안 그것을 조사하지 않았으며 ApolloStack과 함께 상황이 매우 빠르게 진행되어 지금쯤이면 알아차렸을 것입니다.”

현재로서는 WordExpress는 개념 증명일 뿐이며 Lanier는 기존 플러그인을 지원할 계획이 없다고 말했습니다. WordExpress가 현재 WordPress 생태계의 가장 좋은 부분인 테마와 플러그인을 활용할 수 없다는 점을 감안할 때 Lanier는 이 스택을 사용하는 개발자가 WordPress의 관리 측면의 기능을 유지하는 데 더 관심이 있을 것이라고 말했습니다.

"저는 WordPress 관리자를 사랑합니다."라고 그는 말했습니다. “매우 강력하고 쉽게 콘텐츠를 관리할 수 있습니다. WordExpress는 JavaScript만 사용하여 WordPress 애플리케이션을 구축하려는 JavaScript 개발자를 위한 출발점이 될 것입니다.”

Lanier의 WordExpress 목표는 이를 다양한 React 프로젝트에서 재사용할 수 있는 npm 패키지로 바꾸는 것입니다. 그는 이미 wordexpress-schema(GraphQL 스키마 및 연결 설정 처리) 및 wordexpress-components(현재 처음 두 구성 요소, WordExpressPage 및 WordExpressMenu 포함)와 같이 함께 작동하는 두 개의 WordExpress npm 패키지를 게시했습니다. 프로젝트가 Node.js를 기반으로 구축되었기 때문에 개발자는 제한된 플러그인 호환성에 대한 위로인 원하는 npm 패키지를 사용할 수 있습니다.

GraphQL 및 WP REST API

GraphQL이 REST의 직접적인 대안이 될 것이라고 예측하는 사람들 중 상당수는 이 두 가지가 공존할 수 있다는 의견도 있습니다. 사실, Facebook은 최근에 GraphQL에서 REST API를 래핑하기 위한 가이드를 작성했습니다.

Petr Bela는 "GraphQL이 효과적인 것으로 입증되면 REST API와 공존할 가능성이 높습니다."라고 말했습니다. “일부 API는 REST를 사용하고 일부는 GraphQL을 사용합니다. 일부는 둘 다 지원할 수도 있습니다.” 그는 REST에서 GraphQL로 완전히 전환하는 데 업계에서 몇 년, 아마도 10년이 걸릴 것이라고 예측합니다.

최근 GitHub에서 별 1,000개를 넘긴 Lanier의 WordExpress는 현재 GraphQL 기반 WordPress 구현을 공개적으로 탐색하는 유일한 오픈 소스 프로젝트입니다. GitHub에서 피상적으로 검색한 결과 많은 다른 사람들이 유사한 설정을 실험하고 있음을 알 수 있습니다. 다행히 GraphQL은 사이트에서 데이터베이스 쿼리에 API를 사용할 수 있도록 WordPress 코어를 변경할 필요가 없습니다.

Lanier는 WP REST API를 코어에 병합하려는 사람들의 노력에 감사하며 GraphQL 구현을 이에 대한 위협으로 보지 않는다고 말했습니다.

"REST API로 하는 작업은 좋은 일이라고 생각합니다."라고 그는 말했습니다. “그들은 분명히 그 단계를 밟을 필요가 있었습니다. REST는 오랫동안 사용되어 왔습니다. GraphQL은 여전히 ​​새롭기 때문에 REST 경로를 사용하는 것이 합리적입니다. 또한 많은 사람들이 사용법을 알고 있습니다. GraphQL의 좋은 점은 REST API를 래핑하는 데 사용할 수 있으므로 둘 다 공존할 수 있다는 것입니다."

WordExpress가 단순한 개념 증명을 넘어설 가능성은 커뮤니티의 피드백에 달려 있습니다. Lanier는 개발자들이 WordExpress를 분기하고 질문함으로써 WordExpress에 대한 관심을 보여주고 있다고 말했습니다.

“사람들은 그것을 사용하고 가지고 놀고 (바라건대) 그것을 자신의 것으로 만들고 있습니다.”라고 그는 말했습니다. “관심이 있는 것 같아요. 하지만 실제로 실현 가능하게 하려면 최고의 옵션을 만드는 전체 개발자 팀이 필요합니다.”

Lanier는 최근 React 100%를 사용하는 새로운 직장에 취직했으며 한동안 WordPress를 사용할 기회가 없었지만 WordExpress 프로덕션을 준비할 수 있도록 협업을 모색할 마음이 있다고 말했습니다.

그는 “사람들이 정말로 관심을 갖고 함께 모여 그것을 실현 가능한 솔루션으로 키우고 싶다면 100% 참여할 것”이라고 말했다.

그것을 테스트하고 WordExpress로 개발을 시작하려는 개발자는 React가 어떻게 작동하는지에 대한 기본적인 이해가 필요합니다. Lanier는 GraphQL 구현이 설정되는 방법과 GraphQL 쿼리 및 데이터베이스 모델을 확장하는 방법에 대한 자세한 문서를 작성했습니다. WordExpress.io 사이트는 GitHub에서 찾을 수 있는 코드의 라이브 데모입니다.