Gatsby.js & Wordpress カスタム投稿のタクソノミー名をGraphQL に含める方法

はじめに

WordPressを使用してHeadlressCMSを構築する時、タクソノミー名が取得できなかったので、そのメモです。

問題

Wordpressで構築するとカスタム投稿を利用することが多いと思います。
そして、そのカテゴリーも一緒に実装するかと思うのですが、そのカテゴリーをGraphQLで上手く取得することができない！
ということで、いろいろ試してようやく実装できたのでメモしたいと思います。

現象

こちらを参考にタクソノミーもGraphQLに含める記述をfunctions.phpに追記しましたが、私の環境ではidしか取得できませんでした。。

理想はnameとid両方の取得です！
ですが、IDしか取得できていません。。

今回はinterview_categoryという名のタクソノミーです。

結論

REST APIのレスポンスにタクソノミー名とIDを含めて戻せば取得できました！
以下のような感じです。

functions.php

add_action('rest_api_init', 'add_api_fields');
function add_api_fields()
{
register_rest_field(
  // カスタム投稿名
  'interview',
  // ユニークなキー定義
  'interview_cat',
  array(
    'get_callback' => function ($data) {
      $category_terms = wp_get_post_terms(
        $data['id'],
        'interview_category'  // ここにタクソノミー名
      );
      $interview_categories = array();
      foreach ($category_terms as $term) {
        $interview_category_obj       = new StdClass();
        $interview_category_obj->ID   = $term->term_id;
        $interview_category_obj->name = $term->name;
        array_push(
          $interview_categories,
          $interview_category_obj
        );
      }
      return $interview_categories;
    },
  )
);
}

これでinterview_catというエンドポイントが追加され、その中に名前とIDが含まれて取得できました！！
（最初の記事で設定したIDのみ取得できるinterview_categoryも残ってます）

参考は以下のサイトです。

ただ、こちらのサイトは間違っていて、、サイト通りに記述するとIDが取得できませんでした。。
ですので、以下に修正する必要がありました。

$portfolio_category_obj->ID   = $term->ID;
↓
$interview_category_obj->ID   = $term->term_id;

これは、

 $category_terms = wp_get_post_terms

でwp_get_post_termsの戻り値で指定しないとダメなので、

こちらで調べるとIDはterm_idと書いてあったので修正したところきちんと取得できました。

余談

WordPressのカテゴリーは取得するのが結構複雑で、投稿の種類により取得する変数名が違ったりします。。
Wordpressに詳しくないと、その辺り戸惑うかもしれません。。

WP標準の投稿：カテゴリー、タグ
　↓　　　　　　　↓　　　　　↓
カスタム投稿：タクソノミー、ターム

丁寧に説明しているサイトがいくつかあるので、良くわからない方はそちらを参考にして見て下さい。

以上です。

訂正

※ 一部間違えておりましたので、修正しました。（2022.9.25）