Gatsby Contentful search

Question

I have a Gatsby project which uses Contentful. All good - I can retrieve blogs for example and display them.

But if I want to provide a search facility to search through potentially 1000s of posts and display the relevant results - how can I do this?

I'm not even sure how to start this - presumably the "result page" would be a different route as the current route is already resolved as a static file - but I am not sure how I would route this anyway when Gatsby already has routing.

Anyone got a starter-template for this? Would be good to have one!

thanks

Answer 1

There few ways to approach this;

1. Using Libraries like elesticlunr for offline search, but it will require you to create the index at build time.

Fortunately, it can be achieved using the gatsby-plugin-elasticlunr-search plugin.

In your gatsby-config.js :

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

2. If your website type is an online documentation, you can make use of Algolia docs feature.

Agolia will scrape the DOM and build the search index automatically and all you are left to do is: to build an interface to render search results .

3. Using Algolia and collect the search index at build time and upload it to Algolia and guess what: there is plugin for that.