✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

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
Corey Ward
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– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?