Developer Blog

Integrating Meilisearch Indexing with Directus

Published August 12th, 2024

Written By

Clara Ekekenta

Guest Author

TagsGuest Author

In this article, we will explore how to index data from Directus in Meilisearch by building a custom hook extension, enabling you to track created, updated, and deleted data to maintain an up-to-date index which you can then use in your external applications.

Setting Up Directus ​

You will need to have a local Directus project running to develop extensions.

In your new project, create a collection called articles with a title, content, and author field.

Initializing Your Extension ​

In your docker-compose.yml file, set an EXTENSIONS_AUTO_RELOAD environment variable to true so that Directus will automatically watch and reload extensions as you save your code. Restart your project once your new environment variable is added.

In your terminal, navigate to your extensions directory and run npx create-directus-extension@latest. Name your extension melisearch-indexing and choose a hook type and create the extension with JavaScript. Allow Directus to automatically install dependencies and wait for them to install.

Setting Up Meilisearch ​

Sign up for a Meilisearch account if you haven't already. Once you have your Meilisearch instance details, you will be able to copy your credentials in your dashboard.

Add the following environment variables to your project:

MEILISEARCH_HOST=your_meilisearch_host
MEILISEARCH_API_KEY=your_meilisearch_api_key

MEILISEARCH_HOST=your_meilisearch_host
MEILISEARCH_API_KEY=your_meilisearch_api_key

Navigate into your new extension directory, run npm install meilisearch, and then npm run dev to start the automatic extension building.

At the top of your extension's src/index.js file, initialize the Meilisearch client:

import { MeiliSearch } from 'meilisearch'

const client = new MeiliSearch({
  host: process.env.MEILISEARCH_HOST,
  apiKey: process.env.MEILISEARCH_API_KEY
})
const index = client.index('directus_index')

import { MeiliSearch } from 'meilisearch'

const client = new MeiliSearch({
  host: process.env.MEILISEARCH_HOST,
  apiKey: process.env.MEILISEARCH_API_KEY
})
const index = client.index('directus_index')

Saving New Items to Index ​

Update your extension's exported function to process create events when a new article is added to the collection:

export default ({ action }) => {
  action('articles.items.create', async (meta) => {
    await index.addDocuments([{ id: meta.key, ...meta.payload }])
  })
}

export default ({ action }) => {
  action('articles.items.create', async (meta) => {
    await index.addDocuments([{ id: meta.key, ...meta.payload }])
  })
}

The articles.items.create action hook triggers after item creation. The meta object contains the new item's key (ID) and other fields in its payload property. By setting the objectID to the Directus item id, we ensure accurate referencing and management in Meilisearch.

Updating Items in Index ​

Add another action hook to process updates when one or more articles are modified:

action('articles.items.update', async (meta) => {
  await Promise.all(
    meta.keys.map(async (key) => 
      await index.updateDocuments([{ id: key, ...meta.payload }])
    )
  )
})

action('articles.items.update', async (meta) => {
  await Promise.all(
    meta.keys.map(async (key) => 
      await index.updateDocuments([{ id: key, ...meta.payload }])
    )
  )
})

The articles.items.update action hook triggers when articles are updated. It receives meta.keys (an array of updated item IDs) and meta.payload (changed values). The hook updates each document in Meilisearch.

Deleting Items in Index ​

Add an action hook to remove items from Meilisearch when they're deleted in Directus:

action('articles.items.delete', async (meta) => {
  await index.deleteDocuments(meta.keys)
})

action('articles.items.delete', async (meta) => {
  await index.deleteDocuments(meta.keys)
})

The articles.items.delete action hook triggers when articles are deleted. It receives meta.keys, an array of deleted item IDs. The hook uses these keys to remove the corresponding documents from the Meilisearch index.

Now add 3 items to your articles collection and you should see them in your Meilisearch index.

Summary ​

In this tutorial, you've learned how to integrate Meilisearch with Directus. You've learned how to setup the Directus hooks that automatically indexes data created, updated, or deleted from a Directus project in Meilisearch.