How to index GraphQL queries to Algolia in GatsbyJS

Oscar de la Hera Gomez
Three flowers that represent GatsbyJS, GraphQL and Algolia. Beneath it sits the text "Index Queries to Algolia."

A step by step guide on indexing records from single or multiple queries to an Algolia index in GatsbyJS. Open source project included.

The following guide walks you through how to gather records from single or multiple GraphQL queries and assign them to an Algolia index. This can be used to paginate or break down your queries whilst ensuring that they are searchable under the same index.

Step One: Setup the Gatsby Plugin Algolia

The reference image for the gatsby-plugin-algolia.

Follow the instructions in the link below to setup the Gatsby Plugin Algolia.

If you need a starter project to test on, please use our open source Typescript & GatsbyJS project available below.

Step Two: Create the GraphQL queries

Sample GraphQL query.

Add the GraphQL queries that you wish to add to Algolia to a folder called algolia, under a graphql folder at the root of your project.

If you are using the gatsby-source-craft plugin please use the tutorial linked below.

Step Three: Create the Algolia queries file

Sample Algolia Queries File.

In an Algolia folder at the root of your GatsbyJS project, create a new file called queries.js and add your algolia queries by consulting the sample below.

As shown in the example below,

  • We assign BlogQuery (a single query) to the Blog index name (Line 6-9).
  • We index BlogQuery and SearchNoBlogQuery (multiple queries) to the Pages Algolia Index (Line 12-21).

If you are using the gatsby-source-craft plugin, make sure to map the remoteId to the objectID using code similar to that below:

Step Four: Add the queries to the plugin

Sample gatsby-plugin-algolia implementation in a gatsby-config.js.

Navigate to the gatsby-config.js file and add the queries to the gatsby-plugin-algolia options using a line similar to the one below

queries: require("./algolia/queries")

Any Questions ?

We are actively looking for feedback on how to improve this resource. Please send us a note to with any thoughts or feedback you may have.

delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details