Webhooks

GraphCMS webhooks are a fundamental method for observing changes that happen to content within your project. Whether new content is published, or existing is updated, subscribe to these events, and get notified via a POST request to perform your own custom business logic.

For example, you could use webhooks for:

• Syncing data to external search engine,
• Syncing data with external PIM,
• Redeploying your static website when content or assets change,
• Triggering email campaigns based on new content added.
• Push messages into Slack.

Triggers

Triggers can be configured to listen to one or more content model, stage, and action events.

Receiving a webhook

Once an event occurs, data is sent as JSON in a POST requests body to the configured URL. The contents of the request always contain the operation, and data of the event.

The data object will always contain the __typename, id and stage keys.

If the webhook is configured to include entry payloads, the following keys will also be included inside the data object:

• All other non-localized fields on the entry.
• The id and __typename of any related entries.
• An optional localizations array, containing any localized fields on the entry.

The snapshot of the current stage is only sent in the webhook body. This means that:

• Create, Update, and Delete actions only send the draft version.
• Publishing, and Unpublishing actions only send the published version.

Securing webhooks

It is best to protect the endpoints which your webhooks invoke. This prevents unauthorized actions on your server, and better protects your users from any suspicious activity.

When configuring your webhook, add an Authorization header with a secret key only your incoming webhook server knows.

When we trigger your webhook, we will also send all of the custom headers you create, including Authorization. If the values don't match, you can skip. You can think of this as a handshake between GraphCMS and your custom business logic.

Localizations with webhooks

If the webhook is configured to include entry payloads, all localized fields on the entry will be included in the webhook body under the localizations key. See the section below for some examples.

Webhook events are scoped to the entry and are not locale specific. For example, if publishing changes to an en entry localization, the webhook will still include any other localized versions of that entry in the payload.

Example payload

Below are examples of an event on DRAFT, PUBLISHED and custom a Content Stage, which include the entry payload. There is also an example without the entry payload included.

In the examples below we have a Post model.

{
  "operation": "create",
  "data": {
    "__typename": "Post",
    "content": "Start using webhooks today, for free.",
    "createdAt": "2020-09-16T13:11:57.345138+00:00",
    "description": "This is a description",
    "id": "ckf5emloo021s0161iqos7enp",
    "image": {
      "__typename": "Asset",
      "id": "ckf5em5hc02100157x5n00lwb"
    },
    "localizations": [
      {
        "locale": "en",
        "title": "GraphCMS Webhook Payload Changes"
      }
    ],
    "publishedAt": null,
    "stage": "DRAFT",
    "updatedAt": "2020-09-16T13:11:57.345138+00:00"
  }
}

{
  "operation": "publish",
  "data": {
    "__typename": "Post",
    "content": "Start using webhooks today, for free.",
    "createdAt": "2020-09-16T13:11:57.345138+00:00",
    "description": "This is a description",
    "id": "ckf5emloo021s0161iqos7enp",
    "image": {
      "__typename": "Asset",
      "id": "ckf5em5hc02100157x5n00lwb"
    },
    "localizations": [
      {
        "locale": "en",
        "title": "GraphCMS Webhook Payload Changes!"
      }
    ],
    "publishedAt": "2020-09-16T13:14:12.782833+00:00",
    "stage": "PUBLISHED",
    "updatedAt": "2020-09-16T13:13:50.424325+00:00"
  }
}

{
  "operation": "publish",
  "data": {
    "__typename": "Post",
    "content": "Start using webhooks today, for free.",
    "createdAt": "2020-09-16T13:11:57.345138+00:00",
    "description": "This is a description",
    "id": "ckf5emloo021s0161iqos7enp",
    "image": {
      "__typename": "Asset",
      "id": "ckf5em5hc02100157x5n00lwb"
    },
    "localizations": [
      {
        "locale": "en",
        "title": "GraphCMS Webhook Payload Changes!"
      }
    ],
    "publishedAt": "2020-09-16T13:14:12.782833+00:00",
    "stage": "QA",
    "updatedAt": "2020-09-16T13:13:50.424325+00:00"
  }
}

{
  "operation": "publish",
  "data": {
    "__typename": "Post",
    "id": "ckf5emloo021s0161iqos7enp",
    "stage": "PUBLISHED"
  }
}

Create a webhook

1. Navigate to Webhooks in the sidebar. Webhooks are in the lower group of icons.
2. Press "Create" in the upper right corner of the window.
3. Fill out the configuration for your webhook.
4. Press "Create"

Configuration

• A name for organzing and finding your webhooks
• A short description to inform others what your webhook does
• Toggle if you want to include the payload or not
• The URL to be called
• The content model(s) that will be watched
• The content stage to be watched
• The action to be watched
• Any additional headers to pass along

Enable / Disable webhooks

1. Navigate to Webhooks in the sidebar.
2. Move your cursor to the title of the webhook, and click the pencil icon that appears.
3. Switch the the "Active" toggle in the upper right corner to switch between on or off.

Delete a webhook

1. Navigate to Webhooks in the sidebar.
2. Move your cursor to the title of the webhook, and click the trash icon that appears.
3. Confirm you want to delete the webhook.