Algolia Auto-Sync for GraphQL backends

Last updated a month ago

Algolia Instant Search allows you to create an intuitive and fast search experience for your website. Using the Algolia integration, you can get started with using Algolia in minutes. In this tutorial we'll integrate a GraphQL backend with Algolia to automatically synchronize changes to your data to Algolia search indices.

We will see how to create Algolia search indices and keep them synchronized whenever the underlying data changes. Check the live demo or the complete code on GitHub.

Introduction

Imagine we are running an online catalog for draft beer webshop and the producing breweries.

For each beer, we store the name, style and ibu (bitterness value) and abv (alcohol by volume) as well as the selling brewery. A brewery has a name and a city.

Note: in this tutorial, we'll use data from Craft Cans as described here.

Let's explore the available beer in our first brewery:

Query
Prettify
Query Variables
Response
Docs

Now we want to use Algolia to build a search experience for our marketplace website. One approach is to create an Algolia search index and then periodically synchronize the data from our GraphQL project to Algolia. But can we do better?

Creating Algolia Search Indices

Let's see how to create a new Algolia search index. On the integration page, you first have to enter your Algolia credentials.

Create a new Algolia Restricted Key

The key needs the ACL Add records and Delete records as shown in this screenshot:

Enter credentials

Enter the credentials:

  • Application ID: you can copy the application id from your Algolia account
  • API Key: copy the restricted key we created above

Then you can create a new index on the Beer type. Name the index Beers and enter this query:

This GraphQL query defines the structure of the Algolia search index that we called Beers. Creating a search index results in a one-time synchronisation of all Beer nodes with the selected fields. Additionally, every created or updated node is automatically synchronized as well!

Using Algolia search indices, we have different kinds of attributes:

  • searchable attributes that are used to determine which results should be shown
  • presentational attributes that are only needed to display a result, but users cannot search for these attributes to display a certain result

In general, you can use the Rankings settings for your Algolia index to control searchable and presentational attributes. By default, all attributes in an index are searchable.

Fine Control Over Synced Records

When defining an index, you can use filters in the index query to get fine control over which records will be synchronized. In this example, we're building an index for a specific shop. Create a new index called ChampionBrewery on the Beer type and enter this query:

Now only nodes that are available in the Champion Brewing Company are synchronized to the newly created Algolia index ChampionBrewery.

Algolia Geosearch

We can also Algolia Geosearch with this setup. To make that work, you need a special setup based on Algolia's API:

  • the location values need to be stored in a location type with the fields lng and lat of type float
  • when defining the search index, you need to use an alias _geoloc for nested location type

For example, if we wanted to do a location search for shops, we could define this Algolia index query on the Shop type:

See here for more information on Algolia Geosearch.

Conclusion

Using the Algolia integration, it's easy to create a wonderful search experience for your websites based on data in a GraphQL backend. You can create an Algolia index by specifying the data you need with a GraphQL query and changes to your data are automatically synchronized with the Algolia search index.

If you want to get started with Algolia, you can check the live demo or the complete code on GitHub.