@kogk/gatsby-plugin-js-search

Gatbsy plugin impelementation of js-search for creating build-time search indexes, lazy-loaded as needed.

Table of Contents

• How does it work?
• Features
• Todo
• Install
• How to use

How does it work?

At build time, you query for the data you want. The data gets stored in the public folder, but not included in any bundle (similar as images).

When you actually want to perform a search, and you call the search function returned from useSearch, then the actual request starts and starts fetching the appropriate index.

This means that you don't need to worry about your large search index affecting your bundle size etc.

Features

• Allows you to gather content from your queried nodes relatively easily
• Exposes a simple useSearch hook to be able to query the index

Todo

• Further work on i18n and custom stemming etc, is probably in order

Install

yarn add @kogk/gatsby-plugin-js-search

How to use

// In your gatsby-config.js
plugins: [
  {
    resolve: '@kogk/gatsby-plugin-js-search',
    options: {
      indexes: [
        {
          // the name is used when you need to fetch the data
          name: 'name of the index',

          // see index strategies of js-search
          indexStrategy: 'ExactWordIndexStrategy',

          // the plugin filters by nodeTypes, but if you need additional filtering
          // (eg. language, whitelisting etc) you can define a CB for that here
          filter: node => isYummy(node),

          // which types of nodes in gatsby should we include
          nodeTypes: ['SomePage'],

          // ID field is used as the primary identifier for an entry - often the url
          // will suffice
          idField: 'url',

          // Which fields to index
          fields: ['title', 'tags', 'text'],

          // A function that takes the Node object and converts it to any type you like
          mapper: node => ({
            url: node.url,
            title: node.data.page_title.text,
            tags: node.tags,
            text: extractTextFromRawSlices(node.dataRaw.body)
          })
        }
      ]
    }
  }
]