Gridsomeでのデータの構築され方と抽出方法

どんな形式でも一旦GraphQLに入るのがGridsomeの作法

Gridsomeでは、データはGprahQLで一元管理される前提となっています。マークダウンファイルでも、jsonファイルでも、一旦GprahQLにインポートして、そこから抽出する方法がデフォルトです。

一方で、GridsomeはVue.jsでもあるので、従来のVue.js同様の方法（importなど）でファイルを取り込むことが可能です。ただし、importする場合は、Vue.jsのcomputedやmethodsでデータを整形したり、更新のタイミングを自分で管理する必要があります。

どちらを使うかはプログラムの組み方次第ですが、URLに紐づくページコンテンツに関連するデータは基本的にはGraphQLに入れた方が使い勝手が良いです。

取り込んだデータは自動でGraphQLクエリを発行する

取り込んだデータについては、GridsomeがGraphQLのクエリを自動生成してくれるので、ユーザー側でクエリを書く必要がありません。

基本的には、gridsome.config.jsで設定した「typeName」にしたがって、

1. typeName（typeNameが「blog」なら「blog」）
2. all + typeName（typeNameが「blog」なら「allBlog」）

のクエリが自動生成されます。

タグなどの関連性を紐づける場合は、gridsome.config.jsでtypeNameの下に「refs」を設定します。

refs: {
  tags:{
    typeName: "Tags",
    route: "/tags/:id",
    create: true
  },
  category:{
    typeName: "Category",
    route: "/category/:id",
    create: true
  }
}

refsの中身は基本的には親と同じ構成ですが、「create」パラメータが特殊です。関連データが別で生成されていないのであれば、createをtrueにしておかないと、データが空になります。

取り込んだデータを抽出する

GraphQLでは自動生成する「ID」を使ってデータを検索しますが、IDはGprahQLに取り込む段階で自動生成されます。IDを指定することはできないようです。

ページコンテンツを抽出する

記事などの単体データを取得する際は、$idか$pathでマッチさせます。

<page-query>
  query Articles($path: String) {
    articles(path: $path) {
      title
      path
      summary
      date: date(format: "YYYY-MM-DD")
      category {
        id
        title
        path
      }
      content
      tags {
        id
        title
        path
      }
      images{
        src
      }
    }
  }
}
</page-query>

Gridsomeの公式ドキュメントに、GraphQLクエリで受けられる変数の定義についての解説がないので詳細はわかりませんが、「$id: ID」もしくは「$path: String」であればデータを受けられます。

$idについては、ルートパスとGraphQLのIDをマッチさせるマスターデータを持っているようで、そのルートpath下にマッチするデータについては$idが取れます。

データを絞り込む

全検検索をする「all・・・」クエリについては、自動で下記の検索用パラメータが設定されます。

• sortBy
• order
• perPage
• skip
• limit
• page
• sort
• filter

これだけで検索はほぼ網羅できます。

使い方的には下記の感じです。

<page-query>
  query Articles($path: String) {
    postList: allArticles(sortBy: "date", order: DESC, perPage: 8, filter: { path: {nin: [$path]}}) {
      edges {
        node {
          title
          path
          category {
            id
            title
            path
          }
          summary
          images{
            src
          }
        }
      }
    }
  }
}
</page-query>

「all・・・」クエリは、必ず「edges」の中に「node」がある連想配列で指定します。これはGridsomeがそういうGraphQLクエリを組んでいるので、その作法に従うしかありません。

なお、page-query内では、最初に宣言した変数（上記の場合は$path）以外が使えません。変数は複数指定することが可能です。

Gridsomeでのデータの構築され方と抽出方法を見てきました。

最初はどうなってるか全く不明でしたが、ルールがわかればそこまで複雑ではなく、むしろ非常にシンプルに組んであることがわかります。

シンプル故に、複雑なクエリが組めないため、データを深くするなど工夫が必要ですが、GraphQLになっていることで柔軟にデータの整形や抽出ができるのが、HUGOなどの静的サイト・ジェネレータと違った良い点ですね。