How to make Algolia work with Gatsby & Sanity

7 replies
Last updated: Jan 7, 2021

I was trying to figure out how to make Algolia works with Sanity + Gatsby, a quick google search returns only 2 posts:
I dont know if I could make it without a doc or tutorial but here is my progress so far. Will report back if I figured out or failed to break the wall:
https://github.com/ajmalafif/afif.dev/tree/search-with-algolia-afif-321

Jan 5, 2021, 11:48 AM

might want to try simply adding algolia plugin to Gatsby: https://www.gatsbyjs.com/docs/adding-search-with-algolia/
should be independent of the sources you are populating Gatsby with, since it’s statically generated

Jan 5, 2021, 2:23 PM

thanks

user N
that’s what I did. I found a snippet from gatsbyjs.cn site that shows example of 2 queries (Pages & Posts) which is similar to mine (
AllMdx
and
AllSanityPost
). I managed the indexing part and will continue the ui/search component part next!

Jan 5, 2021, 4:26 PM

I went a very different route for this on the MarathonOil.com site. I shared some snippets here previously, but they might be gone due to the 10k message limit. In short, I used the Sanity webhooks to notify a serverless function wehn documents changed. On each invocation it fetches the relevant data from the changed documents, fetches related search index objects from Algolia, and then does simple comparison to see what changes need to be made to the index. Because Algolia works best with small objects and I wanted full text search, each “section” of the page is indexed individually but pointing to the page slug.
I prefer this approach for a few reasons.
1. Search results are more relevant for marketing oriented pages that might mention a number of different topics.
2. The index is updated within about 15 seconds of new content being published (even before it’s live, which does lead to edge cases where content and search results are out of sync by a few minutes, but also allows for content tagging without redeploying).
3. There are fewer Algolia API calls—which are relatively expensive—since I am not communicating with Algolia every time I restart my dev server or run a staging build.
4. Only devs making changes to the indexing function need write-access to Algolia via API, which helps prevent accidents or security incidents.

Jan 6, 2021, 7:00 PM

hi

user L
wow thanks so much for sharing your insights. Very clever implementation given the faster index update with fewer calls.
I'll search the chats if we can still find those snippets because although I roughly get the methods you shared it's above my head to figure it out in code.

I was searching gist and github repo with keywords to see if im lucky enough but so far coming short.

thanks for sharing btw good to know its possible!

Jan 7, 2021, 2:31 AM

i esp like that not only you achieved all those but its a full text search as well!

Jan 7, 2021, 2:32 AM

I checked my gist acct and didn’t see it, so I must have shared the genericized code directly, and unfortunately it was a fair bit of work to genericize.

Jan 7, 2021, 4:08 PM

Sanity.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Give your team exactly what they need to edit and publish their content with the customizable Sanity Studio. Get real-time collaboration out of the box. Sanity.io comes with a hosted datastore for JSON documents, query languages like GROQ and GraphQL, CDNs, on-demand asset transformations, presentation agnostic rich text, plugins, and much more.

Don't compromise on developer experience. Join thousands of developers and trusted companies and power your content with Sanity.io. Free to get started, pay-as-you-go on all plans.

Categorized in

Related topics

Get more help in the community Slack

Go to How to deploy Gatsby sites using official Sanity starter templatesGo to How to generate RSS.xml files from Sanity posts with gatsby-plugin-feedGo to How to improve image loading with Gatsby and gatsby-plugin-sanity-image?Go to Set up Draft Previews with Gatsby Cloud HostingGo to How to display Sanity images in Gatsby-powered photography sitesGo to Is it possible to use gatsby-image to render images loaded in Portable Text / Rich Text?
TopicCategoriesFeaturedRepliesLast Updated
How to deploy Gatsby sites using official Sanity starter templates25Nov 30, 2020
How to generate RSS.xml files from Sanity posts with gatsby-plugin-feed6Jan 12, 2021
How to improve image loading with Gatsby and gatsby-plugin-sanity-image?10Nov 27, 2020
Set up Draft Previews with Gatsby Cloud Hosting4Aug 26, 2020
How to display Sanity images in Gatsby-powered photography sites19Jun 16, 2020
Is it possible to use gatsby-image to render images loaded in Portable Text / Rich Text?8Jan 1, 2021

Related contributions

Occo
- Made with Sanity

Complex product offering with nested product structure and tiered pricing.

Kevin Green
Go to Occo

Figma Config
- Made with Sanity

Website for Config, the global design conference by Figma.

Corey Ward
Go to Figma Config

The Agnes
- Made with Sanity

A high end rental real estate site built with Gatsby, Sanity and Shopify that pulls in listing data via API and includes a headless Shopify shop.

David Gross
Go to The Agnes