GraphQL 통합이 없는 플러그인의 REST API를 Gato GraphQL로 쿼리하기

많은 WordPress 플러그인이 REST API를 통해 데이터를 공개하지만, GraphQL 레이어는 제공하지 않습니다. Gato GraphQL을 사용하면 해당 데이터를 하나의 GraphQL 요청으로 활용할 수 있습니다. HTTP Client 확장 기능을 사용하면 임의의 REST 엔드포인트를 호출하고 JSON 응답을 쿼리 내에서 직접 다룰 수 있습니다.

플러그인에 GraphQL 통합이 없어도 막히지 않습니다. GraphQL에서 해당 REST API를 쿼리하여 모든 것을 한 곳에서 관리할 수 있습니다.

이 글에서는 그 방법을 설명합니다. 같은 패턴은 REST 엔드포인트를 공개하는 모든 플러그인에 적용할 수 있습니다.

사전 준비

HTTP Client 확장 기능이 설치되어 있는지 확인하세요（Gato GraphQL Power 익스텐션 및 번들에 포함되어 있습니다）.
플러그인의 REST 기본 경로가 허용되도록 허용 URL을 설정하세요. 동일 사이트 요청의 경우 사이트 URL을 허용하세요（예: #https://yoursite.com/wp-json/.*# 또는 정확한 REST 기본 경로）. HTTP 요청 가능한 URL 설정을 참고하세요.

플러그인 API에 인증이 필요한 경우, 인증 토큰을 생성하여 요청에 포함시켜야 합니다（예: 헤더를 통해）.

예시: 예약 데이터 가져오기

BookingPress는 예약 데이터를 가져오기 위한 REST API 엔드포인트를 제공하는 예약 관리 플러그인입니다. 따라서 GraphQL에서 해당 엔드포인트를 호출하여 예약 데이터를 가져올 수 있습니다.

BookingPress REST API 문서를 확인하면 현재 엔드포인트 기본 경로가 wp-json/bookingpress/v1임을 알 수 있습니다.

1. 예약 목록 가져오기（컬렉션）

API가 목록（예: 예약 배열）을 반환하는 경우 _sendJSONObjectCollectionHTTPRequest를 사용하세요. API가 목록을 객체로 감싸는 경우（예: { "data": [ ... ] }）는 _sendJSONObjectItemHTTPRequest를 사용한 후 결과의 data 프로퍼티를 읽어야 할 수 있습니다.

optionValue(name: "home")을 사용하여 사이트의 홈 URL에서 URL을 구성하면 동일한 쿼리가 모든 환경에서 작동합니다:

query GetBookingPressAppointments {
  siteURL: optionValue(name: "siteurl")
    @remove
 
  restBase: _sprintf(
    string: "%s/wp-json/bookingpress/v1/appointments",
    values: [$__siteURL]
  )
    @remove
 
  bookingpressApiKey: _env(name: "BOOKINGPRESS_API_KEY")
    @remove
 
  authorizationHeader: _sprintf(
    string: "x-bookingpress-api-key %s",
    values: [$__bookingpressApiKey]
  )
    @remove
 
  appointments: _sendJSONObjectCollectionHTTPRequest(
    input: {
      url: $__restBase,
      method: GET,
      options: {
        headers: [
          {
            name: "Authorization",
            value: $__authorizationHeader
          }
        ]
      }
    }
  )
}

BOOKINGPRESS_API_KEY를 환경 변수로 정의하세요（예: wp-config.php 내）. 쿼리는 PHP Constants and Environment Variables 확장 기능의 _env 필드를 통해 이를 읽고, @remove로 응답에서 제거합니다.

// In wp-config.php
define( 'BOOKINGPRESS_API_KEY', 'your-secret-key' );

2. ID로 단일 예약 가져오기

하나의 예약을 가져오려면 _sendJSONObjectItemHTTPRequest를 사용하여 ID로 URL을 구성합니다:

query GetBookingPressAppointment($appointmentId: ID!) {
  siteURL: optionValue(name: "siteurl")
    @remove
 
  restURL: _sprintf(
    string: "%s/wp-json/bookingpress/v1/appointments/%s",
    values: [$__siteURL, $appointmentId]
  )
    @remove
 
  bookingpressApiKey: _env(name: "BOOKINGPRESS_API_KEY")
    @remove
 
  authorizationHeader: _sprintf(
    string: "x-bookingpress-api-key %s",
    values: [$__bookingpressApiKey]
  )
    @remove
 
  appointment: _sendJSONObjectItemHTTPRequest(
    input: {
      url: $__restURL,
      method: GET,
      options: {
        headers: [
          {
            name: "Authorization",
            value: $__authorizationHeader
          }
        ]
      }
    }
  )
}

3. 응답에서 데이터 추출하기

응답에서 필요한 특정 프로퍼티를 추출하여 쿼리 내에서 사용할 수 있습니다.

_underJSONObjectProperty를 사용하여 응답 객체에서 프로퍼티에 접근하고, @export를 사용하여 값을 추출하여 쿼리 내에서 사용할 수 있도록 합니다.

query GetBookingPressAppointment($appointmentId: ID!) {
  # ...
  appointment: _sendJSONObjectItemHTTPRequest(
    input: {
      url: $__restURL,
      method: GET,
      options: {
        headers: [
          {
            name: "Authorization",
            value: $__authorizationHeader
          }
        ]
      }
    }
  )
    @underJSONObjectProperty(by: { path: "data.id" })
      @export(as: "appointmentId")
    @underJSONObjectProperty(by: { path: "data.selected_date" })
      @export(as: "selectedDate")
    @underJSONObjectProperty(by: { path: "data.start_time" })
      @export(as: "startTime")
    @underJSONObjectProperty(by: { path: "data.service_id" })
      @export(as: "serviceId")
    @underJSONObjectProperty(by: { path: "data.customer_id" })
      @export(as: "customerId")
}
 
query DoSomethingWithTheAppointment @depends(on: "GetBookingPressAppointment") {
{
  # Do something with the appointment data
  appointmentId: _echo(value: $appointmentId)
  selectedDate: _echo(value: $selectedDate)
  startTime: _echo(value: $startTime)
  serviceId: _echo(value: $serviceId)
  customerId: _echo(value: $customerId)
}

다른 플러그인에 동일한 패턴 적용하기

REST 엔드포인트를 공개하는 모든 플러그인에 대해:

기본 URL과 경로를 확인합니다（예: 플러그인의 REST/API 문서에서）.
해당 URL（또는 그에 대한 정규식）을 HTTP Client 허용 목록에 추가합니다.
API에 인증이 필요한 경우, _send* 필드의 input 내에서 options.headers（또는 기본 인증의 경우 options.auth）를 사용합니다.
단일 리소스에는 _sendJSONObjectItemHTTPRequest를, 목록에는 _sendJSONObjectCollectionHTTPRequest를 사용합니다.
응답에서 필요한 특정 프로퍼티를 추출하여 쿼리 내에서 사용합니다.

이러한 REST 연동 필드를 네이티브 GraphQL 타입（게시물, 사용자 등）과 하나의 쿼리 내에서 조합할 수 있으며, 클라이언트는 WordPress 핵심 데이터와 플러그인 REST API 데이터가 혼합된 단일 응답을 받을 수 있습니다.

REST 호출 및 응답 처리에 관한 더 많은 예시는 HTTP Client 확장 기능 문서와 외부 API에서 데이터 가져오기 튜토리얼을 참고하세요.

🔌 WordPress 플러그인의 REST API 데이터에 접근하기