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

I found [this](https://youtu.be/VSkXyuXzwlc) 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 the`gatsby-plugin-algolia`. The  [documentation](https://github.com/algolia/gatsby-plugin-algolia) 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](https://github.com/algolia/gatsby-plugin-algolia/issues/78
). 

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-algolia`plugin.

---

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](https://discourse.algolia.com/t/error-algoliasearcherror-method-not-allowed-with-this-api-key/12189). 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](https://discourse.algolia.com/t/error-algoliasearcherror-method-not-allowed-with-this-api-key/12189/3) 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](https://github.com/Isaac-Tait/Fallfish-Tenkara)  or, if you would like, visit the search page  [here](https://www.fallfishtenkara.com/search).