Deploy your Gatsby Cloud project with Hygraph webhooks

The Gatsby integration will be deprecated on December 31st, 2022, and will no longer receive support. Please migrate to using webhooks by following the steps shown Here .

If you are using Gatsby Cloud for your deployments, you can use Hygraph webhooks to automatically deploy when content changes.

PrerequisitesAnchor

  • You must have a Hygraph account. If you don't have one, you can create one here.
  • You must have a Hygraph project. Read this document to access further information on how to create Hygraph projects.
  • You must have an Gatsby Cloud account. If you don't have one, you can create one here.
  • You must have a Gatsby Cloud site. Read this document to access further information on how to get started with Gatsby Cloud.

Your Gatsby Cloud siteAnchor

You can use your pre-existing Hygraph powered Gatsby site in Gatsby Cloud - if you have one - or you can create a new site by importing your pre-existing Gatsby project from a GitHub repository. You can follow this guide for instructions on how to do this.

During the setup process, you will be asked to provide the necessary environment variables for your Gatsby site to build:

Environment variables in Gatsby Cloud
Environment variables in Gatsby Cloud

You will find this information in your Hygraph project by navigating to Project settings > API access.

In HygraphIn Gatsby Cloud
Content APIHYGRAPH_ENDPOINT
Permanent Auth TokensHYGRAPH_TOKEN

You will find the Content API URL under Endpoints. Scroll down to the bottom of the screen to find the Permanent Auth Tokens.

You can follow the same process for Build variables and Preview variables in Gatsby Cloud.

Configure webhooksAnchor

The first thing you need to do is navigate to your Gatsby Site, go to Settings > Webhook, and copy your Builds Webhook. Follow these steps afterwards:

  1. In Your Hygraph Project, go to Webhooks and click on the Add button, located in the upper right corner of the screen.
  2. The Add webhook screen will display. Complete the following information:
    • Name: Name for your webhook
    • Description: Description for your webhook. Optional field.
    • Include payload: Switch. True by default. If true, data will be sent via the webhook
    • URL: Webhook URL. This is where you paste the Builds Webhook that you copied from your Gatsby Site settings.
    • Secret key: You can optionally add a secret key to sign the payload of your webhook. The secret key allows the other end to check that the source is genuine. This can be used to verify requests and, for instance, avoid triggering deploys from unknown sources.
    • Triggers: This is where you select which Models, Stages, Actions and Sources should trigger your webhook. Each item has a dropdown menu, where you can select one or more options. Selecting none acts as a wildcard, then all models will trigger the webhook.
    • Headers: Here you can configure your headers by adding additional Key and Value data, then clicking on the Add button. You can add multiple key-value sets, and you can delete the ones you added by clicking on the trash icon. Some endpoints require authentication using API Keys, which could be set here.

Gatsby webhook example - Headers
Gatsby webhook example - Headers

Follow the same process to create a second webhook using the Preview webhook from your Gatsby cloud site if you want to create a preview link as well.

View webhook logsAnchor

In your Hygraph project, navigate to Webhooks and click on the View logs link of the webhook you wish to examine. The logs screen will display as a result. This screen allows you to monitor the recent activity of your webhook from the last 7 days.

Clicking on a log item displays its details:

Gatsby webhook example - Log details
Gatsby webhook example - Log details

Trigger a Gatsby Cloud build from HygraphAnchor

Once the webhook has been configured, performing one of the trigger actions will trigger a build in Gatsby Cloud.

For instance, if the trigger actions you configured for the webhook are PUBLISH and UNPUBLISH, doing either of those actions in the Content editor will trigger a new build in Gatsby Cloud.

You will be able to check the new build in your Hygraph project by checking the logs. You can also see this in your in your Gatsby Site, under Master > Build history.

Edit or delete a webhookAnchor

Gatsby webhook example - Edit and delete icons
Gatsby webhook example - Edit and delete icons

In your Hygraph project, navigate to Webhooks. For each webhook configured, you'll have a pencil and a trash icon next to the webhook name. Click on the trash icon to delete the webhook, or on the pencil icon to edit its details. You can learn more about each of the fields you can edit here.

Migrate from Gatsby integration to webhooksAnchor

Follow these steps to migrate from your Gatsby integration to webhooks:

  1. In your Hygraph project, navigate to Apps and locate your Gatsby integration card.
  2. Click on the trash icon to delete.
  3. Finally, navigate to Webhooks and follow the configuration process.

ResourcesAnchor