gatsby-plugin-lunr-search

gatsby-plugin-lunr-search

A plugin for Gatsby to generate a search index that you can use with Lunr.

Inspired by gatsby-plugin-elasticlunr-search.

Getting started

yarn add --dev lunr gatsby-plugin-lunr-search

Usage

// gatsby-config.js
plugins: [
  {
    resolve: 'gatsby-plugin-lunr-search',
    options: {
      // Lunr reference
      ref: 'id',
      
      // Fields to be indexed
      fields: ['title', 'description'],
      
      // Nodes to be indexed
      resolvers: {
        
        // Index all `MarkdownRemark` nodes
        MarkdownRemark: {
          id: node => node.id,
          title: node => node.frontmatter.title,
          description: node => node.frontmatter.description
        }
      }
    }
  }
]

Then you can query for the search index in your pages and components. The search index is a JSON string, so you have to parse the JSON.

import React, { Component } from 'react';
import { Index } from 'lunr';
import { graphql } from 'gatsby';

export default class SomePage extends Component {
  state = {
    results: []
  };
  
  componentDidMount () {
    const { data } = this.props;
    const index = Index.load(JSON.parse(data.searchIndex.index));
    
    this.setState({
      results: index.search('query')
    });
  }
  
  render () {
    const { results } = this.state;
    if (results.length > 0) {
      return results.map(result => 
        <div key={result.ref}>Found {result.ref}</div>
      );
    }
    return <div>Could not find any results.</div>;
  }
}

const query = graphql`
  query SearchIndex {
    searchIndex {
      index
    }
  }
`;