【WordPress】カスタム投稿タイプの記事を GraphQL で取得する方法

  • WordPress

WP GraphQLプラグインを使うと、WordPress のデータを GraphQL を使って取得できるようになります。

デフォルトでは post と page しか取得できないため、自分で作ったカスタム投稿タイプのデータを取得する方法を紹介します。

とはいえ公式リファレンスの内容とほとんど同じです。分かりやすく書かれていますので、こちらも参照してみてください。

準備するもの

まず、WP GraphQLプラグインが入っていることを前提とします。

GraphQL での取得を有効化する

必要なことは、register_post_type()の時に下記のパラメータを追加するだけです。

  • show_in_graphql … graphQL を有効化するかどうか
  • graphql_single_name … カスタム投稿タイプの単数形(case, book など)
  • graphql_plural_name … カスタム投稿タイプの複数形(cases, books など)

REST API を有効化にする show_in_rest の GraphQL 版と言ったところでしょうか。

実際にこの設定を追加する際は、下記のA, B, Cのいずれかのやり方で対応します。

(A)自分で functions.php などで定義しているカスタム投稿タイプに追加する

自分でregister_post_type()を使って投稿タイプを登録しているなら、パラメータを追加してあげましょう。

add_action( 'init', function() {
   register_post_type( '投稿タイプ名', [
      ...
      'show_in_graphql' => true,
      'graphql_single_name' => '単数形の英単語',
      'graphql_plural_name' => '複数形の英単語',
      ...
   ] );
});

(B)自分で定義していない、既存のカスタム投稿タイプに追加する

自分でregister_post_type()していない(プラグインなどで定義している)場合は、既存の投稿タイプに対してパラメータを追加するregister_post_type_argsフィルターを使います。

add_filter( 'register_post_type_args', function( $args, $post_type ) {
  if ( '投稿タイプ名' === $post_type ) { 
    $args['show_in_graphql'] = true;
    $args['graphql_single_name'] = 'document';
    $args['graphql_plural_name'] = 'documents';
  }
  return $args;
}, 10, 2 );

(C)Custom Post Type UI を使っている場合

(2021/05 追記)Custom Post Type UI で GraphQL はネイティブサポートされました。下記のプラグインは不要です。

カスタム投稿タイプを作るプラグイン Custom Post Type UI(CPT)を使っているなら、専用のプラグインを追加することで管理画面上で先ほどのパラメータの設定ができるようになります。

専用のプラグインは下記の Github のリポジトリにあるので、「Code」ボタンから zip をダウンロードしましょう。

https://github.com/wp-graphql/wp-graphql-custom-post-type-ui

ダウンロードできたら自分の WordPress にプラグインをアップロードし、有効化します。すると、

CPT UI のカスタム投稿タイプの設定の一番下に、GraphQL に関する設定項目が追加されているので、好きな値を設定しましょう。

実際に確認

管理画面にある GraphiQL IDE で確認してみましょう。単数形、複数形で設定した query が反映されていると思います。

英語でも公式リファレンスがとても分かりやすく、Custom Post Type UI などよく使われているプラグインの考慮もなされていて、本当に良いプラグインだなあと思います。