What is end-to-end AI search?
Simplicity is critical for search engines, but building one that enables that simplicity is complex. Over the last 20+ years ...
Director of Product Management
Simplicity is critical for search engines, but building one that enables that simplicity is complex. Over the last 20+ years ...
Director of Product Management
Many new AI-powered search solutions have been released this year, and each promises to provide great results, but as ...
Marketing Campaign Production Manager
When you think of “customer experience,” what comes to mind? People, right? Specifically, consumers. Retail customers. That’s easy; the ...
Sr. SEO Web Digital Marketing Manager
A potential customer is about to land on the home page of your ecommerce platform, curious to see what cool ...
Search and Discovery writer
By now, everyone’s had the opportunity to experiment with AI tools like ChatGPT or Midjourney and ponder their inner ...
Director, Product Marketing
Search has been around for a while, to the point that it is now considered a standard requirement in many ...
Senior Machine Learning Engineer
With the advent of artificial intelligence (AI) technologies enabling services such as Alexa, Google search, and self-driving cars, the ...
VP Corporate Marketing
It’s no secret that B2B (business-to-business) transactions have largely migrated online. According to Gartner, by 2025, 80 ...
Sr. SEO Web Digital Marketing Manager
Twice a year, B2B Online brings together industry leaders to discuss the trends affecting the B2B ecommerce industry. At the ...
Director of Product Marketing & Strategy
This is Part 2 of a series that dives into the transformational journey made by digital merchandising to drive positive ...
Benoit Reulier &
Reshma Iyer
Get ready for the ride: online shopping is about to be completely upended by AI. Over the past few years ...
Director, User Experience & UI Platform
Remember life before online shopping? When you had to actually leave the house for a brick-and-mortar store to ...
Search and Discovery writer
If you imagine pushing a virtual shopping cart down the aisles of an online store, or browsing items in an ...
Sr. SEO Web Digital Marketing Manager
Remember the world before the convenience of online commerce? Before the pandemic, before the proliferation of ecommerce sites, when the ...
Search and Discovery writer
Artificial intelligence (AI) is no longer just the stuff of scary futuristic movies; it’s recently burst into the headlines ...
Search and Discovery writer
Imagine you are the CTO of a company that has just undergone a massive decade long digital transformation. You’ve ...
CTO @Algolia
Did you know that the tiny search bar at the top of many ecommerce sites can offer an outsized return ...
Director, Digital Marketing
Artificial intelligence (AI) has quickly moved from hot topic to everyday life. Now, ecommerce businesses are beginning to clearly see ...
VP of Product
Apr 28th 2021 product
In this article, we’ll look into how to integrate Sanity.io with Algolia. Sanity.io is a content platform that comes with an open source headless CMS that you can customize, and a hosted real-time datastore that lets you read and update data. The philosophy behind Sanity.io is that you should be able to treat content as data and bring it to whatever product or application you have.
Now, a CMS normally doesn’t come with search functionality. It’s not easy to build even a minimal search function on top of it by yourself, let alone something that includes important features like typo tolerance and faceting. This is what our Algolia plug-in does: it adds a flexible and feature-rich search functionality on top of your CMS.
There are many ways to integrate a CMS with Algolia. One of the most efficient ways is to leverage webhooks. You can create an API as a webhook endpoint and configure your CMS to trigger the webhook when content changes. In your API, you can create, update, or delete the corresponding record in your index at Algolia.
You therefore need to create an API as a webhook. If you have a web server, you can add an API there. Or if you have Sanity Studio hosted, for example, on Netlify or Vercel, you can write a serverless function as your API.
However, this part can be cumbersome. In the API, you need to check why a webhook request is triggered: creation, update, or deletion of a record. After that, you need to call the corresponding method to apply the change to Algolia. It’s not a big chunk of code, but it can be time-consuming if you don’t get the data schema right. That’s where sanity-algolia comes in and helps us deal with both sides.
With sanity-algolia, you need to transform the payload for your Algolia index.
Here is how.
Install the dependencies:
npm install algoliasearch sanity-algolia # or yarn add algoliasearch sanity-algolia
Create the API:
import algoliasearch from 'algoliasearch'; import sanityClient from '@sanity/client'; import indexer, { flattenBlocks } from 'sanity-algolia'; const algolia = algoliasearch(...); const sanity = sanityClient(...); export default function handler(req, res) { const sanityAlgolia = indexer( { post: { index: algolia.initIndex('posts'), }, }, document => { switch (document._type) { case 'post': return { title: document.title, path: document.slug.current, publishedAt: document.publishedAt, excerpt: flattenBlocks(document.excerpt), }; default: throw new Error(`Unknown type: ${document.type}`); } } ); return sanityAlgolia .webhookSync(sanity, req.body) .then(() => res.status(200).send('ok')); }
Let’s say the endpoint of this API is deployed at
https://my-example/api/update-algolia
Visit your Sanity dashboard to add the webhook.
Now whenever content changes in your Sanity studio, it will trigger this webhook, which will update your Algolia index with the changes.
Thanks to the library sanity-algolia, if you define which properties to fetch and how to transform them, the rest is automatically done for you.
To learn more, visit this GitHub repo.
Powered by Algolia Recommend