# 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.

```javascript
// 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`](https://www.gatsbyjs.org/docs/static-query/).

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

`components/header.js`

```javascript
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](https://draftbox.co) - Released under the [MIT license](LICENSE).