Easily restore your project to a previous version with our new Instant One-click Backup Recovery
Hygraph
Classic Docs

8.1 Webhooks

#Overview

A webhook is a feature that sends a signal whenever a specific event occurs. Think of it as a notification that triggers actions. We are going to configure a webhook that will trigger published content displaying in our frontend.

#Configure a webhook

First, we're going to navigate to the Webhooks section of our project, and click on the Add button.

A screen will pop up, let's complete it using the following information:

FieldInput
NameThis is the name of our webhook, we'll call it “Deploy to Storefront”.
DescriptionThis is the description for our webhook. We'll write “Trigger published”.
Include payloadThis enabled switch means that data will be sent via the webhook. We'll leave it as it is.
MethodWe'll use the dropdown to select the POST method.
URLThis is our webhook URL or build hook. Right below this table, you'll find an explanation of how to generate this in your Netlify account right under this table.
Secret keyAdd an optional secret key to sign the payload of our webhook, to allow the other end to check that the source is genuine.
TriggersThis is where we select which Models, Stages, Actions and Sources should trigger your webhook. Since we want to be able to preview our product entry drafts, we'll use the Content model dropdown to select the Product model, and the Stage dropdown to select PUBLISHED.
We won't select anything under Actions and Sources, because we don't want to limit them.
HeadersOptionally configure headers by adding additional Key and Value data, we will leave this blank.

Click Add at the top of the screen to save your webhook. Your saved webhook should look something like this:

Webhook detailsWebhook details

Once saved, you should see your webhook on the main screen.

Webhook on the main screenWebhook on the main screen

You can test your new webhook by adding a new product content entry and publishing. When you click Publish, the webhook will automatically trigger Netlify rebuild your storefront!

To setup a deployment to Vercel, follow our step-by-step guide on how to deploy to Vercel using Hygraph Webhooks.

 

You've reached the end of the tutorial! Let's look into our wrap-up lesson:

Getting Started project wrap-up