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

score 4 · Accepted Answer · edited Mar 23 '19 at 13:53

4

There few ways to approach this;

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

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.

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

edited Mar 23 '19 at 13:53

nyedidikeke

6,899
7
44
59

answered May 04 '18 at 09:34

Khaled Garbaya

1,479
16
20

thanks Khaled. Nt sure I fully get the resolvers yet but I will look into it. But does this basically mean that the entire list of blogs is downloaded to the client? Couldn't this be problematic? Also, if lets say I wanted most of the site statically generated but also maybe wanted a page which showed results depending on your authorization, how could i mix these 2 types in one project. ie Products page might be static for example but then My Orders page is dynamic. How would I mix a standard React Router app with the Gatsby static one? – user2047485 May 04 '18 at 12:51
You have complete control over what to index and what not in the code. As for downloading all the website data you are already doing that when you picked a static site generator as a stack :) However if you worry about the index getting super big I would recommend you use the algolia solution. You can definitely limit the route here's a detailed document about that https://www.gatsbyjs.org/docs/building-apps-with-gatsby/. – Khaled Garbaya May 04 '18 at 14:50
I think Some of the other questions can be post in a different question since originally the question was how to add search for a Gatsby powred website – Khaled Garbaya May 04 '18 at 14:55
re downloading all the data - that's what I originally assumed. But if I use gatsby serve on my site, it creates multiple js files. One for each blog post. When I then go to the front page, these are not all loaded. Having gone to the entry point, if I for example delete one of those js files and then try to navigate I get an error. Which implies it is lazy loading. Which means that being able to search them dynamically without loading all the data into the browser would indeed be beneficial. Now admittedly I would expect it to not do it this way but it seems to – user2047485 May 08 '18 at 09:16
Gatsby serve is only for development purposes you shouldn't be having it in you production server you need to build your website and host just the what's inside the public directory, as for the lazy loading let gatsby worry about that it will make sure to load all necessary code for your component. – Khaled Garbaya May 08 '18 at 09:18
i thought gatsby develop was for dev? My public directory contains these multiple js files after using gatsby build - and that's why it looks like it will only load the text for a specific blog when I navigate to that blog. Therefore passing down the entire data for all blogs in the search page is indeed more burdensome than just a standard build which will only load posts when necessary – user2047485 May 08 '18 at 13:01
You are not passing all the data you will be building a search index which you will use to identify which entry you are interested in and then you redirect the user to that page, a search index is completely different from the data that you have – Khaled Garbaya May 08 '18 at 13:03
@KhaledGarbaya Thanks a lot for your [_Gatsbyjs+Contentful_ YouTube video series](https://www.youtube.com/channel/UC_XsS8kgD9Y64ZOug4YKhpw). I took away a lot from it and really appreciate your effort. Have you considered putting out a video on how to implement search when using GatsbyJS and Contentful? I would be particularly interested in the third option you mention above. Since there is no documentation yet for the Gatsby Algolia plugin, I'm not sure how to use it. – Janosh Jul 09 '18 at 11:12
Hey i will definitely consider adding a video about search in a Contentful + gatsby website but the approach is the same as i mentioned before – Khaled Garbaya Jul 11 '18 at 12:18

Gatsby Contentful search

1 Answers1