Search Plugin for Gatsby
This plugin enables search integration via elastic lunr. Content is indexed and then made available via graphql to rehydrate into an elasticlunr index. From there, queries can be made against this index to retrieve pages by their ID.
It is a fork of gatsby-plugin-elasticlunr-search made in order to use the plugin with gatsby-v2.
Getting Started
Install the plugin via npm install --save @gatsby-contrib/gatsby-plugin-elasticlunr-search.
See the example site code for more specific implementation details.
Next, update your gatsby-config.js file to utilize the plugin.
Setup in gatsby-config
Here's an example for a site that create pages using markdown, in which you you'd like to allow search features for title and tags frontmatter entries.
gatsby-config.js
module.exports = {
plugins: [
{
resolve: `@gatsby-contrib/gatsby-plugin-elasticlunr-search`,
options: {
// Fields to index
fields: [`title`, `tags`],
// How to resolve each field`s value for a supported node type
resolvers: {
// For any node of type MarkdownRemark, list how to resolve the fields` values
MarkdownRemark: {
title: node => node.frontmatter.title,
tags: node => node.frontmatter.tags,
path: node => node.frontmatter.path,
},
},
},
},
],
}Consuming in Your Site
The serialized search index will be available via graphql. Once queried, a component can create a new elasticlunr index with the value retrieved from the graphql query. Search queries can be made against the hydrated search index. The results is an array of document IDs. The index can return the full document given a document ID.
In gatsby-v2, it is possible to use graphql queries inside components using StaticQuery.
Suppose that you want to include the Search component inside an Header component. (Of course, you could also query siteSearchIndex from layout.js component, and pass it down as prop to any component that need it.)
First, query the data with StaticQuery inside the Header component, and pass it as props to the Search component.
components/header.js
import React from "react"
import { StaticQuery, Link } from "gatsby"
import { graphql } from "gatsby"
import Search from "./search"
const Header = () => (
<StaticQuery
query={graphql`
query SearchIndexQuery {
siteSearchIndex {
index
}
}
`}
render={data => (
<header>
... header stuff...
<Search searchIndex={data.siteSearchIndex.index} />
</header>
)}
/>
)
export default HeaderAnd then use the searchIndex inside your Search component.
components/search.js
import React, { Component } from "react"
import { Index } from "elasticlunr"
// Search component
export default class Search extends Component {
constructor(props) {
super(props)
this.state = {
query: ``,
results: [],
}
}
render() {
return (
<div>
<input type="text" value={this.state.query} onChange={this.search} />
<ul>
{this.state.results.map(page => (
<li key={page.id}>
<Link to={"/" + page.path}>{page.title}</Link>
{": " + page.tags.join(`,`)}
</li>
))}
</ul>
</div>
)
}
getOrCreateIndex = () =>
this.index
? this.index
: // Create an elastic lunr index and hydrate with graphql query results
Index.load(this.props.searchIndex)
search = evt => {
const query = evt.target.value
this.index = this.getOrCreateIndex()
this.setState({
query,
// Query the index with search string to get an [] of IDs
results: this.index
.search(query, {})
// Map over each ID and return the full document
.map(({ ref }) => this.index.documentStore.getDoc(ref)),
})
}
}Partial Searches
If you want your search to include partial matches, for example if you had the following data:
sku: ["ab21345", "ab98765", "abcdef12"]And wanted a search for "ab" to return all of those data, then you can simply include { expand: true } as the second parameter to this.index.search() when setting the results state.
Taking the above example implementation, adapt the search function in the Search component to the following:
search = evt => {
const query = evt.target.value
this.index = this.getOrCreateIndex()
this.setState({
query,
// Query the index with search string to get an [] of IDs
results: this.index
.search(query, { expand: true }) // Accept partial matches
// Map over each ID and return the full document
.map(({ ref }) => this.index.documentStore.getDoc(ref)),
})
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent