Gridsomeで検索ページを作る方法

Gridsome公式の方法

Gridsomeでの検索機能の実装方法は、Gridsomeの公式ドキュメントにも記載されてます。

Add a search to Gridsome

ざっくりと流れをまとめると、

1. 全てのデータをGraphQLから取得
2. Vue.jsのdataもしくはcomputedでデータを取得
3. テンプレートでレンダリング

という感じです。

実装してみる

全件を格納する

まずは検索の元になるデータを格納します。

<static-query>
query Search {
  posts: allPosts{
    edges {
      node {
        id
        title
        path
        img_l
      }
    }
  }
}
</static-query>

動的にパラメータを受け取らないので、クエリはstaticで大丈夫です。

この状態にしておけば、Vueの処理の中で「this.$static.クエリ名」でデータ処理ができます。この場合は、「this.$static.posts」ですね。

GETパラメータを取得する

続いてパラメータ処理をします。

検索の場合、POSTかGETでパラメータ（検索ワード）を取得しますが、Gridsomeは静的サイトなのでPOSTは受け取れません。素直にGETパラメータを使います。

Gridsomeのpage-queryは、$idや$pathくらいしか取得できないので、GETのパラメータをpage-queryに渡すことはできません。しかし、Gridsomeは内部的にはVue Routerを使っているので、Vueのページ処理内で「this.$route」でGETパラメータが取得できます。

取得ポイントは、mountedです。

export default {
  name: 'Search',
  data() {
    return {
      searchPara: ''
    }
  },
  async mounted(){
    this.searchPara = this.$route.query.name;
  }
}

computedで動的に結果を生成する

ここまできたら、あとは結果を整形するだけです。

公式ドキュメントの感じだと、下記のコードになります。

computed: {
  searchResults() {
    return this.$static.allPost.edges.filter(post => {
        return post.node.title.toLowerCase().includes(this.search.toLowerCase().trim())
    })
  }
}

ただの、Vue.jsのcomputed（算出プロパティ）なので、処理は基本なんでも出来ます。dataに格納するよりも、computed（算出プロパティ）の方が動的にサクサク動くのでオススメです。computedにする場合は、検索キーワードは、input要素にv-modelで紐づけておくと、インタラクティブに結果が変わります。

実際に実装してみて

元データの取得が重い

今回は5,000件くらいの検索データで作ってみましたが、元となるデータの容量が700KB以上もあって、ページロード的に現実的ではありませんでした。取得データも4カラムくらいだったのでこれで済みましたが、もっと大きなデータが欲しい場合は、結構ファイルサイズが大きくなりそうです。

感覚的には、1/50くらい、100件くらいの検索ならローカル実装で全く問題ないと思います。2,000件を超えたあたりから、APIを用意してAPIから取得した方が良いかと思います。

実装も動作も簡単で良い

実装はVue.jsの簡単なプログラミングで実装できますし、動作的には一回ロードすればブラウザのJavascript処理をしているだけでなのでサクサクです。

あとは、どれだけユーザーのロードタイムを短くできるかでしょうか。

Gridsomeで検索ページを作る方法でした。