gatsby plugin elasticlunr search

Complemento de búsqueda para Gatsby

Este complemento permite la integración de búsqueda a través de lunr elástico. El contenido se indexa y luego se pone a disposición a través de Graphql para rehidratarlo en un índice elasticlunr . Desde allí, se pueden realizar consultas en este índice para recuperar páginas por su ID.

Empezando

Instale el complemento a través de npm install -D @andrew-codes/gatsby-plugin-elasticlunr-search . Consulte el repositorio del sitio de demostración para obtener detalles de implementación más específicos.

A continuación, actualice su archivo gatsby-config.js para utilizar el complemento.

Configuración en gatsby-config

 module . exports = {
    plugins : [
        {
            resolve : `@andrew-codes/gatsby-plugin-elasticlunr-search` ,
            options : {
                // Fields to index
                fields : [
                    'title' ,
                    'keywords' ,
                ] ,
                // 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 ,
                        keywords : node => node . frontmatter . keywords ,
                    } ,
                } ,
            } ,
        } ,
    ] ,
} ; 

Consumiendo en su sitio

El índice de búsqueda serializado estará disponible a través de Graphql. Una vez consultado, un componente puede crear un nuevo índice lunr elástico con el valor recuperado de la consulta Graphql. Se pueden realizar consultas de búsqueda en el índice de búsqueda hidratado. El resultado es una serie de ID de documentos. El índice puede devolver el documento completo dado un ID de documento.

 import React , { Component } from 'react' ;
import { Index } from 'elasticlunr' ;

// Graphql query used to retrieve the serialized search index.
export const query = graphql `query
SearchIndexExampleQuery {
    siteSearchIndex {
      index
    }
}` ;

// 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 >
                            { page . title } : { page . keywords . join ( `,` ) }
                        < / li >
                    ) ) }
                < / ul >
            < / div >
        ) ;
    }

    getOrCreateIndex = ( ) => this . index
        ? this . index
        // Create an elastic lunr index and hydrate with graphql query results
        : Index . load ( this . props . data . siteSearchIndex . index ) ;

    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 ) ) ,
        } ) ;
    }
}