Your GraphCMS data model

Once inside the GraphCMS Dashboard, you'll be presented the option to create a new project, go ahead and create a new project "From Scratch" and give it a name (I'll use GraphEvents throughout the tutorial for my application names.), pick the Basic plan & click Start in trial. The trial gives you access to the paid webhooks feature for a few weeks.

You'll get the data back from GraphCMS on the right, if you created more than one Event, this will appear inside response array events.

Next, if you open the Docs inside the API Explorer, you'll be able to search for Event and see the schema we created above.

Setup Algolia

Once inside the Algolia Dashboard, create a new Application, giving it a name and selecting the free Community plan and selecting a region to get started. Make sure to select the same or closest region to your GraphCMS region.

Next go ahead and create your first Index and call it Events. We'll not worry about prefixing it with development or production, but you'll want to if you're running this in multiple stages.

Now our Index Events has been created, we'll head to the API Keys section and grab a copy of the Application ID and Admin API Key.

Setup dev tools

Next, you'll want to go ahead and install the Zeit Now:

npminstall -g now

It's important important we install ngrok too, so we can expose localhost to the outside world (in our case, GraphCMS).

If you have Homebrew installed, you can do this via the command line too, otherwise you can download from their website.

brew cask install ngrok

Setup initial webhook

Now we've the tools in place to create our webhook, let's go ahead and create a directory for our project and install the Algolia NPM module.

Now copy the https address (it should look something like https://744b9b48.ngrok.io) and head over to the GraphCMS Dashboard.

Head to the "Webhooks" section from the sidebar, and paste the ngrok URL as the webhook URL. Give the webhook a name, description and make sure to set the scope to EXTENDED.

Now once saved, head to the content area and edit an Event you created earlier, change any of the fields and click Save.

Now back at http://localhost:4040 you should see a new request containing the webhook payload, it'll look a little something like this.

We'll use the info.args.operation and info.args.responseData payloads inside our serverless function to sync to Algolia. Let's do that next.

Sync data to Algolia

Before we go ahead and start coding our serverless function, it's important we take a look at the data structure for Algolia.

Algolia recommend you structure your data in a certain when indexing, if you expand on our data model above and add relations such as categories, Algolia would expect you to send an array of category names for faster filtering.

We'll be tracking our indexes by the Eventid. Algolia want you to reference each record by a unique ID named objectID.

If we later wanted to make use of Algolia's geographical filtering and ranking, such as searching around a radius or polygonal area, it's important we explicitly tell Algolia the latitude/longitude under the __geoloc key.

This means we need to transform our GraphCMS responseData payload into an object that matches the below:

{"objectID":"cjyy2u004fftk0d53t777tyss","title":"GraphQL Day Bodensee","_geoloc":{"lat":47.66349785139189,"lng":9.174649342327939},"starts":"2019-09-06T07:30:00.000Z","ends":"2019-09-06T17:30:00.000Z","description":"GraphQL Day Bodensee is a hands-on one day developer conference and workshop for lovers of GraphQL, organised by GraphCMS and Honeypot. It's a mini-conference with awesome speakers at the Kulturzentrum am Münster in Konstanz on September 6."}

Now we know what the object must look like when sending it to Algolia, let's next write the code to actually make it happen! 🧙‍♀️

Now this is where the real fun begins. We'll first want to import the algoliasearch library we installed previously and initialize the library with our credentials.

Now all that's left to do is assign the fields we need from responseData to sync with Algolia, create the new object with the location lat/lng fields and call the applicable method on the index instance to add or update the indexes.

In a further tutorial we will implement the Algolia InstantSearch widget library so we can search, filter our events and deploy it to Zeit Now. Stay tuned! ⚡️

Our Mission

GraphCMS enables developers to build powerful content APIs in a matter of minutes, while it gives content creators all the tools they need to manage their content. The hosted content APIs can be easily consumed by websites, apps or any other platform.