블로그

🎯 축하합니다: 당신의 WordPress 플러그인이 "코어" 기능이 되었습니다

Leonardo Losoviz
작성자: Leonardo Losoviz ·

WP REST API가 이미 WordPress 코어에 포함되어 있기 때문에, 저는 GraphQL을 피하고 REST API를 사용하여 WordPress 플러그인과 Gutenberg 블록에 데이터를 공급하도록 권고하는 경우가 많았습니다.

하지만 이제는 달라졌습니다. WordPress 6.5가 출시되었습니다. 여기에는 놀라운 새 기능인 Plugin Dependencies가 포함되어 있습니다.

Plugin Dependencies를 사용하면, 플러그인 디렉터리에 등록된 WordPress 플러그인을 자신의 플러그인의 의존성으로 정의할 수 있으며, WordPress는 플러그인을 설치하기 직전에 해당 의존 플러그인을 자동으로 설치해 줍니다.

그 결과, 디렉터리 내의 모든 플러그인은 사실상 "코어" 기능이 됩니다. 다른 플러그인에서 필요로 할 때 암묵적으로 설치되기 때문입니다.

WooCommerce 애드온이 WooCommerce에 대한 의존성을 선언하는 것처럼 명확하지만 실제로는 필요성이 낮은 경우도 있습니다(사이트 소유자는 이미 WooCommerce를 사용하고 있을 것이기 때문입니다).

하지만 필요한 플러그인이 다른 플러그인에 "도구"를 제공하는 경우, 즉 사이트 소유자가 해당 플러그인을 미리 설치했을 것을 기대할 수 없는(또는 그 존재조차 모르는) 경우에는 그 효과가 매우 큽니다.

바로 GraphQL과 Gato GraphQL이 그러한 경우입니다.

GraphQL이 WordPress의 "코어" 기능이 되다

GraphQL은 WordPress 사이트의 모든 데이터를 가져오고, 수정하고, 다시 저장하기 위한 인터페이스입니다. 데이터와 상호작용해야 하는 플러그인(사실상 거의 모든 플러그인)은 GraphQL을 활용하여 그 요구사항을 충족할 수 있습니다.

GraphQL은 "도구"이며, Gato GraphQL은 그 도구 제공자입니다.

플러그인에서 Gato GraphQL에 대한 의존성을 선언함으로써, GraphQL 서버가 플러그인 자체의 사용을 위해 즉시 이용 가능해집니다.

예를 들어, GraphQL을 사용하여 플러그인의 Gutenberg 블록에 데이터를 가져올 수 있으며, REST 컨트롤러를 생성하고 유지 관리하는 비용을 절감할 수 있습니다.

플러그인 개발자가 처음으로 GraphQL을 WP REST API의 실질적인 대안으로 고려할 수 있는 시대가 드디어 왔습니다.

플러그인 의존성이 문제가 될 수 있을까요?

의존성으로 설치된 플러그인이 wp-admin에 표시되기 때문에, 아무것도 모르는 사이트 소유자는 "이건 어디서 온 거지? 해킹당했나? 스팸인가? 무슨 일이 일어나고 있는 거지?"라고 당연히 의아해할 수 있습니다.

사이트 소유자가 불만을 갖게 된다면 심각한 문제입니다. 어떤 플러그인도 사용자를 적으로 돌릴 여유가 없습니다(적어도 상황을 이해하고 해결책을 받아들이기 전까지는).

이 상황은 개선할 수 있으며, 완전히 피하는 것도 가능합니다. 예를 들어, Gato GraphQL을 의존 플러그인으로 고려할 때, Gato GraphQL은 Lite 버전 플러그인을 제공할 수도 있습니다. 이는 UI에 표시되지 않고 내부 전용 GraphQL 서버만 설치하는 간단한 버전입니다(TODO 목록에 또 하나 추가네요! 🤷🏻‍♂️).

Gato GraphQL(및 다른 플러그인들)에게 더 중요한 질문은 "새로운 사이트의 보안이 약화되지 않을까?"입니다.

특히 Gato GraphQL에 관해서는, 공개 GraphQL 엔드포인트가 모든 방문자가 접근할 수 있는 데이터를 노출하여, 의도치 않게 개인 데이터가 누출될 위험이 있지 않을까요?

답은 아니오입니다. Gato GraphQL은 기본적으로 공개 단일 엔드포인트를 활성화하지 않기 때문에, 보안 위험에 대한 걱정 없이 설치할 수 있습니다.

Gato GraphQL을 플러그인 의존성으로 추가하기

이제 직접 손을 움직여 이 훌륭한 새 기능을 사용해 봅시다.

플러그인에서 GraphQL을 사용하려면, 플러그인 헤더에 gatographql을 플러그인 의존성으로 선언해야 합니다.

/**
 * Plugin Name: Blocks for cooking recipes
 * Requires Plugins: gatographql
 */

그러면 플러그인은 내부 blockEditor 엔드포인트를 통해 데이터에 접근할 수 있습니다. 이 엔드포인트는 wp-admin 내의 JavaScript 상수 GATOGRAPHQL_BLOCK_EDITOR_ADMIN_ENDPOINT로 이용할 수 있으며, 다음 URL을 가리킵니다.

https://mysite.com/wp-admin/edit.php?page=gatographql&action=run_query&endpoint_group=blockEditor

예를 들어, 블록은 다음과 같은 JavaScript 코드를 사용하여 데이터를 가져올 수 있습니다.

(async function () {
  const data = {
    query: `
      query GetCookingRecipeBlockData($limit: Int) {
        posts(pagination: { limit: $limit }) {
          id
          title
          author {
            id
            name
          }
        }
      }
    `,
    variables: {
      limit: 3
    },
  };
 
  const response = await fetch(
    GATOGRAPHQL_BLOCK_EDITOR_ADMIN_ENDPOINT,
    {
      method: 'post',
      body: JSON.stringify(data),
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'Content-Length': data.length,
      },
      credentials: 'include',
    }
  );
 
  /**
   * Execute the query, and await the response
   */
  const json = await response.json();
 
  /**
   * Check if the query produced errors, otherwise use the results
   */
  if (json.errors) {
    console.log(JSON.stringify(json.errors));
  } else {
    console.log(JSON.stringify(json.data));
  }
})();

GraphQL 쿼리에서 중첩 mutations를 사용하고 싶다면, 플러그인 전용 내부 엔드포인트를 생성하여 적절히 설정할 수도 있습니다.


뉴스레터 구독하기

Gato GraphQL의 모든 업데이트를 놓치지 마세요.