Search Plugin for Gatsby

This is a gatsby plugin for the popular lightweight fuzzy search library fusejs. Content is indexed at build time and made available via fusejs index. The serialized index is available via graphql so user can instantiate new Fuse search object in any component or page.

Getting Started

Install the plugin via yarn add @draftbox-co/gatsby-plugin-fusejs fusejs.

Now, update your gatsby-config.js file to use the plugin.

How to use

Here is an example using gatsby-source-ghost, a popular plugin for Ghost CMS. GhostPost is a node type for posts. Make sure that you use a valid node type. fields are fields to be indexed. You can use getNode along with node in field resolver functions as well.

// In your gatsby-config.js
plugins: [
  {
    resolve: `@draftbox-co/gatsby-plugin-fusejs`,
    options: {
      fields: [`title`, `slug`],
      resolvers: {
        GhostPost: {
          title: node => node.title,
          slug: node => node.slug
        },
      },
    },
  },
]

Consuming in Your Site

The search index will be available via graphql. Once queried, a component can create a new Fuse object with the value retrieved from the graphql query. Search queries can be made from the new Fuse object.

In gatsby-v2, it is possible to use graphql queries inside components using StaticQuery.

Here is a very simple example of how to initialize and use Fuse object inside a component.

components/header.js

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Fuse from "fuse.js";

const Header = () => (
  const data = useStaticQuery(
    graphql`
      query MyQuery {
        fuseIndex {
          index
        }
        allGhostPost {
          edges {
            node {
              title
              slug
            }
          }
        }
      }`
  )
  const myIndex = Fuse.parseIndex(data.fuseIndex.index);
  const docs = data.allGhostPost.edges;
  const fuse = new Fuse(docs, {
    //your fuse search options
  }, myIndex);
  const results = fuse.search('your-query');
  return (
    ...
    // your component code
  )
)

export default Header

Contributions

PRs are welcome! Consider contributing to this project if you are missing feature that is also useful for others.

Copyright & License

Copyright (c) 2020 Draftbox - Released under the MIT license.