GridsomeでWordPressのカテゴリ・タグを表示する

データソースのノードへの収容を確認する

GridsomeでデータソースにWordPressを指定した場合、どのようにデータが入っているかは、GraphQLのDocsで確認できます。

Grdisomeでは開発サーバーを立ち上げると、GraphQLのPlaygroundも同時に立ち上がるので、そちらを確認します。

http://localhost:8080/___explore

基本的には、gridsome.config.jsで指定したtypeNameを接頭語に、

1. 接頭語 + Category
2. 接頭語 + Tag

という名前で入っているはずです。

テンプレートを作成・修正する

データの構成がわかったら、カテゴリページ用テンプレートを用意します。

サンプルとしてはこんな感じです。

<template>
  <Layout>
    <h1>
      ◆ {{ $page.category.title }}
    </h1>
    <div class="posts">
      <article v-for="edge in $page.category.belongsTo.edges" :key="edge.node.id">
      <h1>{{edge.node.title}}</h1>
      </article>
    </div>
  </Layout>
</template>

<page-query>
query Category ($id: ID!) {
  category: wpCategory (id: $id) {
    title
    belongsTo {
      edges {
        node {
          ...on WpPost {
            title
            path
            date (format: "D. MMMM YYYY")
          }
        }
      }
    }
  }
}
</page-query>

この辺りは、WordPressというより、GraphQLとGridsomeの知識になります。

belongsToは最初はわかりづらいですが、使いこなすとGridsomeのサイト表現がグッと広くなるので、この機会に色々試してみると楽しいです。

あとは、記事ページ側にリンクを設置します。

<p v-for="c in $page.post.categories">
    <g-link :to="'/categories/' + c.slug + '/'">
      {{ c.title }}
    </g-link>
</p>

// 省略

<page-query>
query Post ($id: ID!) {
  post: wpPost (id: $id) {
    title
    path
    date (format: "D. MMMM YYYY")
    content
    categories{
      title
      slug
    }
  }
}
</page-query>

「参照（refs）」という扱いのcategoriesは、GraphQL内ではハッシュ形式にしないとデータが取れないの注意です。

refsについては、おそらくsource-filesystemをベースにしていると思われるので、公式ドキュメントを読むと良いです。

@gridsome/source-filesystem

なぜかデータノードにpathが入っていないので、URLは決め打ちでやるしかありません。

また、categoriesは配列で入ってくるので、ループ処理するか、最初のデータ（0）を指定する必要があります。

gridsome.config.jsに設定記載

最後に、どのGraphQLクエリがどのテンプレートを読むのかを設定ファイルに記載します。

module.exports = {
  siteName: 'XXXX',
  siteDescription: 'yyy',

  templates: {
    WpPost: '/posts/:id/',
    WpCategory: '/categories/:slug/',　//ここを追記
  },
  // 以下省略
}

この記載がないと404になるので注意しましょう。

フレームワークとしては地獄のようなWordPressですが、こうしてインポートされたデータを見ると、CMSのAPIフィードとしては使い勝手は悪くないですね。Gridsomeのプラグインがナイスワークですね。