Watch a live product demo 👀 See how Sanity powers richer commerce experiences

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

The Sanity Composable Content Cloud is the 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.

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 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