GraphQL


<p>WordPressヘッドレスCMSを作る時に「WP GraphQL」を使用してページネーションを実装したかったので、その時のやり方をまとめておきます。</p>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#WPGraphQL_Offset_Pagination">プラグイン「WPGraphQL Offset Pagination」を追加する</a></li><li><a href="#i">ページごとの記事一覧データを取得する</a><ul><li><a href="#110">「1ページ10記事」取得するクエリ</a></li><li><a href="#120">「1ページ20記事」取得するクエリ</a></li></ul></li></ul></div>
<h2><span id="WPGraphQL_Offset_Pagination">プラグイン「WPGraphQL Offset Pagination」を追加する</span></h2>



<p><a href="https://github.com/valu-digital/wp-graphql-offset-pagination">「WPGraphQL Offset Pagination」のgithubページ</a>からzipファイルをダウンロードして、WordPressにプラグインとして追加します。</p>



<h2><span id="i">ページごとの記事一覧データを取得する</span></h2>



<p>プラグインを追加したら、「取得したいページ番号」や「1ページごとの記事数」に合わせてクエリを指定することができます。</p>



<p>offsetPagination内の<code>size</code>は<strong>「1ページあたりの記事数」</strong>、<code>offset</code>は<strong>「取得開始位置」</strong>です。</p>



<p>（<code>offset: 0</code>では記事一覧の1記事目〜、<code>offset: 10</code>は記事一覧の10記事目〜、<code>offset: 20</code>は記事一覧の20記事目〜、で取得されます）</p>



<h3><span id="110">「1ページ10記事」取得するクエリ</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-sql" data-lang="SQL"><code>// 1ページ目
posts(where: {offsetPagination: { size: 10, offset: 0 }}){
	nodes {
		title
	}
}

// 2ページ目
posts(where: {offsetPagination: { size: 10, offset: 10 }}){
	nodes {
		title
	}
}

// 3ページ目
posts(where: {offsetPagination: { size: 10, offset: 20 }}){
	nodes {
		title
	}
}</code></pre></div>



<h3><span id="120">「1ページ20記事」取得するクエリ</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-sql" data-lang="SQL"><code>// 1ページ目
posts(where: {offsetPagination: { size: 20, offset: 0 }}){
	nodes {
		title
	}
}

// 2ページ目
posts(where: {offsetPagination: { size: 20, offset: 20 }}){
	nodes {
		title
	}
}

// 3ページ目
posts(where: {offsetPagination: { size: 20, offset: 40 }}){
	nodes {
		title
	}
}</code></pre></div>



<p></p>



<ul class="references">
<li><a href="https://github.com/valu-digital/wp-graphql-offset-pagination">valu-digital/wp-graphql-offset-pagination &#8211; GitHub</a></li>
</ul>


【WordPress】「WP GraphQL」でページネーションを設定する


<p>WordPressをヘッドレスCMSにする時に「WP GraphQL」でデータを取得しています。</p>



<p>そこでよく使うGraphQLのクエリ（使いそうなクエリ）をまとめてみました。</p>



<p><a href="https://www.wpgraphql.com/">GraphQL API for WordPress</a></p>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#i">⑴「記事一覧」を取得する</a><ul><li><a href="#10">「最新10件分」の記事一覧を取得する</a></li><li><a href="#i-2">「指定カテゴリ」の記事一覧を取得する</a></li><li><a href="#i-3">「指定タグ」の記事一覧を取得する</a></li></ul></li><li><a href="#i-4">⑵「記事単体」を取得する</a><ul><li><a href="#id">「記事のid」で取得する</a></li><li><a href="#slug">「記事のslug」で取得する</a></li></ul></li><li><a href="#i-5">⑶「カテゴリ一覧」を取得する</a></li><li><a href="#i-6">⑷「タグ一覧」を取得する</a></li><li><a href="#i-7">取得できる記事データ(一部)</a><ul><li><a href="#i-8">よく使うクエリ</a></li></ul></li><li><a href="#i-9">取得できるカテゴリ/タグデータ(一部)</a><ul><li><a href="#i-10">よく使うクエリ</a></li></ul></li><li><a href="#i-11">まとめ</a></li></ul></div>
<h2><span id="i">⑴「記事一覧」を取得する</span></h2>



<h3><span id="10">「最新10件分」の記事一覧を取得する</span></h3>



<p>デフォルトの件数が10件</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>{
	posts {
		nodes {
			... // ここに取得したいデータを指定
		}
	}
}</code></pre></div>



<p></p>



<h3><span id="i-2">「指定カテゴリ」の記事一覧を取得する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>// カテゴリの「ID」を指定する場合
{
	posts(where: {categoryId: xxx}) {
		...
	}
}</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>// カテゴリの「slug」を指定する場合
{
	posts(where: {categoryName: &quot;xxx&quot;}) {
		...
	}
}</code></pre></div>



<h3><span id="i-3">「指定タグ」の記事一覧を取得する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>// タグの「ID」を指定する場合
{
	posts(where: {tagId: xxx}) {
		...
  }
}</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>// タグの「slug」を指定する場合
{
	posts(where: {tag: &quot;xxx&quot;}) {
		...
  }
}</code></pre></div>



<h2><span id="i-4">⑵「記事単体」を取得する</span></h2>



<h3><span id="id">「記事のid」で取得する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>{
	postBy(id: xxx) {
		...
  }
}</code></pre></div>



<h3><span id="slug">「記事のslug」で取得する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>{
	postBy(slug: &quot;xxx&quot;) {
		...
  }
}</code></pre></div>



<h2><span id="i-5">⑶「カテゴリ一覧」を取得する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>{
	categories {
		nodes {
			categoryId
			name
			slug
			count
		}
	}
}</code></pre></div>



<h2><span id="i-6">⑷「タグ一覧」を取得する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>{
	tags {
		nodes {
			tagId
			name
			slug
			count
		}
	}
}</code></pre></div>



<h2><span id="i-7">取得できる記事データ(一部)</span></h2>



<figure class="wp-block-table"><table><thead><tr><th>クエリ</th><th>データの内容</th><th></th></tr></thead><tbody><tr><td>id</td><td>ID</td><td></td></tr><tr><td>slug</td><td>slug</td><td></td></tr><tr><td>title</td><td>タイトル</td><td></td></tr><tr><td>date</td><td>公開日</td><td></td></tr><tr><td>modified</td><td>更新日</td><td></td></tr><tr><td>featuredImage</td><td>サムネイル画像</td><td></td></tr><tr><td>content</td><td>本文</td><td></td></tr><tr><td>categories</td><td>カテゴリ一覧</td><td></td></tr><tr><td>tags</td><td>タグ一覧</td><td></td></tr><tr><td>auther</td><td>執筆者</td><td></td></tr></tbody></table></figure>



<h3><span id="i-8">よく使うクエリ</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>{
	id
	slug
	status
	title
	featuredImage {
		node {
			mediaItemUrl
		}
	}
	date
	modified
	content
	categories {
		nodes {
			id
			name
			slug
		}
	}
	tags {
		nodes {
			id
			name
			slug
		}
	}
}</code></pre></div>



<h2><span id="i-9">取得できるカテゴリ/タグデータ(一部)</span></h2>



<figure class="wp-block-table"><table><thead><tr><th>クエリ</th><th>データの内容</th><th></th></tr></thead><tbody><tr><td>categoryId / tagId</td><td>ID</td><td></td></tr><tr><td>name</td><td>カテゴリ名 / タグ名</td><td></td></tr><tr><td>slug</td><td>slug</td><td></td></tr><tr><td>count</td><td>記事数</td><td></td></tr></tbody></table></figure>



<h3><span id="i-10">よく使うクエリ</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>{
	categoryId
	name
	slug
	count
}</code></pre></div>



<h2><span id="i-11">まとめ</span></h2>



<p>WP GraphQLがかなり使いやすそうなので、少し慣れたらいろんなデータが簡単に取得できるようになりそうだなと思いました。これでヘッドレスCMS化できればPHPを書かなくてもいいのがありがたい&#8230;</p>



<p>GraphQLは今回が初でまだまだ知らない部分が多そうなので、少しずつ情報を足していけたらいいな。</p>



<ul class="references">
<li><a href="https://www.wpgraphql.com/docs/posts-and-pages">Posts and Pages | WP GraphQL</a></li>
</ul>



<p></p>


「GraphQL」の記事一覧