この記事はWordPress Advent Calendar 2016の17日目です。

GraphQL便利ですよね。まだ実運用で使ったことないですけど。

WP REST APIのエンドポイントを何回もバンバンして情報をかき集めるより、GraphQLで欲しい情報だけ一発で取ってくるようにする方がスマートで軽量なのかなと思います。

ということでWordPressにGraphQLのエンドポイントつけてみました。

紹介するもの

graphql-wpというGraphQLのエンドポイントをWordPressに追加するプラグインを使用します。
https://github.com/tim-field/graphql-wp

「This is a work in progress / in active development, but already pretty useful.」（意訳：まだ開発途中だけど、便利だよ）ってことなので、この先のアップデートも楽しみだったりします。

なお、残念ながら.orgのプラグインディレクトリにはGraphQL対応プラグインは見当たりませんでした。。。

前提

graphql-wpプラグインがcomposerで追加する前提になってるので、composerでプラグイン管理できる環境を頑張って作ってください。

環境構築に使えるツールとか、メリットとか参考資料は長野の占部さんがいい記事書かれてるのでそちらを見ておきましょう。
https://torounit.com/blog/2016/07/29/2395/

ということで、ここから先はそういう環境ありきで話が進みます。

プラグインインストールと有効化

composer.jsonのあるディレクトリに移動して、composer require mohiohio/graphql-wpでインストールします。

$ cd /PATH/TO/WORDPRESS
$ composer require mohiohio/graphql-wp

インストールができればあとはその他のWordPressプラグイン同様、管理画面なりWP-CLIなりで有効化しましょう。

https://YOUR.WORDPRESS/graphqlにアクセスして以下のJSONが返ってくればOKです。

$ curl https://trellis.dev/graphql | jq .
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   206    0   206    0     0    529      0 --:--:-- --:--:-- --:--:--   529
{
  "errors": {
    "message": "Wrong query format or empty query. Either send raw query _with_ Content-Type: 'application/json' header or send query by posting www-form-data with a query=\"query{}...\" parameter"
  }
}

curlからリクエストしてみる

元記事ではChromeiQLというChrome拡張機能を使ってリクエストを出しますが、自分が嫌われているせいか頻繁にクラッシュしたのでcurlからやってみました。

まぁ、curlでリクエスト投げれるなら、wp_remote_post()とか$.ajaxあたり使って充分とれるでしょうということで。

ということでcurlからgraphql-wpのエンドポイントに投げるリクエストはこんな感じです。

$ curl https://trellis.dev/graphql -H "Content-Type: application/json" \
-d '{"query":"{wp_query { posts(paged: 1 posts_per_page: 10) { title terms (taxonomy:\"category\") { name slug } } } }"}' | jq .

GraphQLのJSON部分だけ整形して抜き出すとこうなります。

{
	"query":"{
		wp_query { 
			posts(paged: 1 posts_per_page: 10) {
				title terms (taxonomy:\"category\") {
					name slug
				}
			}
		}
	}"
}

投稿タイプpostsの記事を１０件、記事タイトルとカテゴリ名とカテゴリのスラッグの３つを取得するというクエリになってます。

実際に実行した場合のレスポンスは以下の通り。
WP REST APIなどでは投稿に含まれるデータを全て返してきますが、GraphQLでは指定したものだけ取ってきます。
SPARQLとかElasticsearchとかでもそんなのありましたね。

{
  "data": {
    "wp_query": {
      "posts": [
        {
          "title": "Hello world!",
          "terms": [
            {
              "name": "Uncategorized",
              "slug": "uncategorized"
            }
          ]
        }
      ]
    }
  }
}

せっかくなのでいろいろ書いてみる

固定ページのタイトルと更新日を１０件取得する

$ curl https://trellis.dev/graphql -H "Content-Type: application/json" -d '{"query":"{wp_query { posts(paged: 1 posts_per_page: 10 post_type:\"page\") { title date} } }"}' | jq .
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   669    0   574  100    95   1501    248 --:--:-- --:--:-- --:--:--  1498
{
  "data": {
    "wp_query": {
      "posts": [
        {
          "title": "Sample Page",
          "date": "2016-11-07 14:32:39"
        },
        {
          "title": "Blog",
          "date": "2011-05-20 18:51:43"
        },
        {
          "title": "Front Page",
          "date": "2011-05-20 18:49:43"
        },
        {
          "title": "Clearing Floats",
          "date": "2010-08-01 09:42:26"
        },
        {
          "title": "About The Tests",
          "date": "2010-07-25 19:40:01"
        },
        {
          "title": "Level 1",
          "date": "2007-12-11 16:25:40"
        },
        {
          "title": "Level 2",
          "date": "2007-12-11 16:23:33"
        },
        {
          "title": "Level 3",
          "date": "2007-12-11 16:23:16"
        },
        {
          "title": "Page with comments disabled",
          "date": "2007-09-04 10:48:10"
        },
        {
          "title": "Page with comments",
          "date": "2007-09-04 10:47:47"
        }
      ]
    }
  }
}

ID１の投稿から、タイトル・本文・記事ステータスを取得する

wp_postというクエリも使えるみたいです。

$ curl https://trellis.dev/graphql -H "Content-Type: application/json" -d '{"query":"{wp_post(ID:1) { title, content, status }}"}' | jq .
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   226    0   172  100    54    620    194 --:--:-- --:--:-- --:--:--   623
{
  "data": {
    "wp_post": {
      "title": "Hello world!",
      "content": "Welcome to WordPress. This is your first post. Edit or delete it, then start writing!\n",
      "status": "publish"
    }
  }
}

カスタム投稿タイプに対応する

カスタム投稿タイプに対応するにはプラグイン書かないといけないっぽいです。
参考：https://github.com/tim-field/graphql-wp#custom-post-types

まとめ

と、こんな感じでGraphQLのエンドポイントをWordPressに追加してデータを引っ張ってきてみました。
基本的にはWP_QueryとかWP REST API扱う感覚でリクエスト作れるので、その辺よく触ってる人ならとっつきやすいかもです。

あとしれっと「Composerでプラグイン追加するよー」ってこと書いちゃいましたけど、こっちの方がWordPressのプラグインとかテーマをコードで管理できるので、規模の大きいサイトを運用する時とか似たようなサイトを量産する時に便利そうです。

composer使って管理するメリットはこんな感じらしいです。
https://twitter.com/Toro_Unit/status/796386018567995392

ということで、みんなもっとcomposerでWordPress管理したり、GraphQL触ったりして日本語記事増やしていくと良いと思うよ！

Tag: graphql

WordPressにGraphQLのエンドポイントを追加する