Enabling site-wide search functionality for my Gatsby site deployed with Netlify using Algolia

I found this tutorial on YouTube that got me pointed in the right direction, but there were still a few unanswered questions not addressed by the tutorial. Namely how to get Algolia up and running on a Gatsby site deployed with Netlify.

I ended up not using Algolia's Netlify plugin. I feel that this was a critical decision, I was getting all kinds of error messages when trying to use the Netlify Algolia plugin and the gatsby-plugin-algolia. Instead, I utilized just thegatsby-plugin-algolia. The documentation was helpful, especially when combined with the above-mentioned YouTube tutorial.

However, it was not long before the error messages started popping up. As of the publication of this blog post the plugin was still in beta, so I was expecting this. I have listed the errors I got below and my solutions in the hope that it may help a fellow dev in the future who is returning the same errors.

error failed to index to Algolia. Query results do not have 'objectID' or 'id' key

A quick search on DuckDuckGo returned this solution.

The YouTube tutorial did not add id or objectID to the GraphQL query and they did not return the error. So, my guess is that this is a newer bug prevention feature within the gastby-plugin-algoliaplugin.

After debugging that error the next one that popped up was:

AlgoliaSearchError: Method not allowed with this API key

This one was a little tricky as I was pretty sure I had used the correct API keys in both my .env file and in Netlify. So, I reached out to support. Turns out I had the wrong API key name. The variable was correct but the name was not. I believe I had gotten the incorrect key name from older documentation...

I came across numerous GitHub issues and Algolia support tickets stating that the .env variables had to be prepended with GATSBY_. However, when I did that I kept returning this error:

ERROR #11321  PLUGIN

"gatsby-plugin-algolia" threw an error while running the onPostBuild lifecycle:

Please provide an application ID. Usage: algoliasearch(applicationID, apiKey, opts)

  44 |   }
  45 |
> 46 |   const client = algoliasearch(appId, apiKey);
     |                  ^
  47 |
  48 |   setStatus(activity, `${queries.length} queries to index`);
  49 |

File: node_modules/gatsby-plugin-algolia/gatsby-node.js:46:18

AlgoliaSearchError: Please provide an application ID. Usage: algoliasearch(applicationID, apiKey, opts)

The only solution that worked for me was to list my .env without the prepended GATSBY_ like this:

ALGOLIA_APP_ID=xxxx
ALGOLIA_API_KEY=xxxx
ALGOLIA_INDEX_NAME=xxxx

I decided to build a <Search /> component and import it onto a stand-alone search page (unlike the YouTube tutorial where they plugged the code into the index.js file). Another key step was to wrap the search page with<Layout />. Without <Layout /> the search page was pretty ugly.

I built my Gatsby Blog using the my-blog-starter from the Gatsby Community created starters library. The first commit was September 8, 2020. Six months later (to the day) the last major project for my blog was completed: adding site-wide search functionality using Algolia's powerful (and well documented/supported) plugin.

You can check out my code here or, if you would like, visit the search page here.

Enabling site-wide search functionality for my Gatsby site deployed with Netlify using Algolia

Comments

More from this blog

Utilizing SendGrid SMTP relay to setup a Discourse server

Giscus and NextJS - a 21st century solution for OS comments

Coding slump

Three years of web development

Pihole DNS on Unifi

Command Palette

Comments

More from this blog