CODEWITHSUNDEEP
gatsbycontentful
user2047485
user2047485

Reputation: 391

Gatsby Contentful search

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

Upvotes: 3

Views: 1889

Answers (1)

Khaled Garbaya
Khaled Garbaya

Reputation: 1497

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,
                    },
                },
            },
        },
    ],
};
  1. 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.

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

Upvotes: 4

Related Questions