Zenn
Open3

algoliaを使った検索機能を実装してみる（Gatsby編）

こぎそこぎそ

Gatsby製サイトかどうかに関わらず、algoliaを使った検索機能を実装するためには以下のタスクが必要です。それぞれに対応した公式プラグインとUIコンポーネントが用意されているので、それらを使って実装を進めていきます。

とても参考になったサイト

https://blog.leko.jp/post/on-site-search-in-gatsby-with-algolia/

こぎそこぎそ

導入

必要なプラグインをインストールする。APIKeyなどを環境変数で管理したいので、dotenvを使う。

yarn add -D gatsby-plugin-algolia dotenv

gatsby-config.jsにセット。optionsにコードを書く必要があるが、ボリュームがそこそこあるので、jsをrequireさせて別ファイルから読み込むよう設定。

gatsby-config.js
require('dotenv').config({
  path: '.env',
})

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-algolia',
      options: require('./gatsby-plugin-algolia-config.js'),
    }
   ...
  ],
}

queryにはGraphQLから取得したいデータを設定する。gatsbyにはhttp://localhost:8000/___graphiqlでデータ取得の確認ができるので、そこで取得できたqueryを使うとよさそう。
入れ子階層になっていて、そのままの状態では使えないので、algoliaに適したデータ構造にするために、transformerでデータをマッピングし直す。

gatsby-plugin-algolia-config.js
const queries = [
  {
    query: `
      {
        allMdx {
          edges {
            node {
              frontmatter {
                title
                description
              }
              id
              slug
            }
          }
        }
      }
    `,
    transformer: ({ data }) =>
      data.allMdx.edges.map(({ node: {frontmatter: { title, description }, id, slug } }) => ({
        id,
        title,
        description,
        path: slug,
      })),
  },
]
module.exports = {
  appId: process.env.GATSBY_ALGOLIA_APP_ID,
  apiKey: process.env.GATSBY_ALGOLIA_ADMIN_API_KEY,
  indexName: process.env.GATSBY_ALGOLIA_INDEX_NAME,
  queries,
}
.env
GATSBY_ALGOLIA_APP_ID=XXXXXXX
GATSBY_ALGOLIA_ADMIN_API_KEY=XXXXXXXXXXXXXX
GATSBY_ALGOLIA_SEARCH_API_KEY=XXXXXXXXXXXXXX
GATSBY_ALGOLIA_INDEX_NAME=XXXXXXX