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.

CMS<>Algolia using webhooks

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.

A better way: sanity-algolia (with tutorial)

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.