Gridsomeのstatic-queryとpage-queryの違い

使う場所が違う

static-queryとpage-queryの大きな違いは、公式ドキュメントに下記のように記載されています。

Use in Pages & Templates. Use in Components.

Querying data | Grisome

PagesとTemplates以外はstatic-queryと覚えておくと良さそうですね。 　

変数の受け渡しが違う

使う場所の他に、static-queryとpage-queryは使い方も違います。

変数を渡せるpage-query

page-queryは、ページから

• id
• path

などを受け取って、GraphQLのクエリに渡せます。

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

データのインポート時にrefsを設定しておけば、関連記事なども抽出できます。

<page-query>
  query Posts($path: String) {
    posts(path: $path) {
      title
      path
      summary
      date: date(format: "YYYY-MM-DD")
      category {
        id
        title
        path
      }
      content
      tags {
        id
        title
        path
      }
      images{
        src
      }
    }    
  }
  postList: allPosts(sortBy: "date", order: DESC, perPage: 8, filter: { path: {nin: [$path]}}) {
    edges {
      node {
        title
        path
        category {
          id
          title
          path
        }
        summary
        images{
          src
        }
      }
    }
  }  
</page-query>

変数を渡せないstatic-query

一方で、static-queryは変数が渡せません。

query {
  post(id: "1") {
    title
  }
}

このように検索値が決めうちなら値を渡して検索はできますが、検索値を変数から受け取ることができません。「static-queryはコンポーネント側で定数のクエリに使う」と覚えておくと良いかもしれません。

ということは、static-queryはコンポーネントで使うクエリですので、コンポーネントでは動的なクエリが組めないということになります。

あくまでPagesやTemplatesでクエリを組んで、その値をpropsでコンポーネントに渡してレンダリングすることになります。恐らくですが、GridsomeはmoutedステータスでGraphQLを実行しているので、先にmountedになってしまうコンポーネントではパラメータを渡せないのでしょう。

GraphQLデータベースの組み方に工夫が必要

Gridsomeでは、データをGraphQLデータベースにインポートして使う形式になっていますが、先ほどの通りコンポーネントでは変数が渡せないstatic-queryしか使えませんので、ページ側で全てのデータを生成しておく必要があります。

ページの構成上、コンポーネントも動的に変数を渡したいケースはどうしても出てきてしまうので、ここはPagesかTemplatesで対処するしかありません。

また、GraphQLはMySQLなどのRDBと違って制約のあるデータベースなので、組み方をしっかり考えておかないと、データにアクセスできなかったり、データベースが巨大になってしまいます。

この辺りは、データベースを構築する際に、レンダリング側も考慮した上で工夫が必要になります。

Gridsomeのstatic-queryとpage-queryの違いをまとめました。

使い方が違うだけでなく、使い方も結構違うので、工夫して使う必要がありますね。