What are webhooks and how do they work

In today's fast-paced world, communication between systems and applications has become more important than ever. However, ensuring these systems are properly integrated and can work together can be daunting. This is where webhooks come in.

In this article, we'll explore webhooks, how they work, and why they are important in modern web development. Whether you're a developer, a project manager, or just someone interested in web development, understanding webhooks is crucial to staying ahead in this rapidly evolving field. So let's dive in and explore the world of webhooks together!

What are webhooks?Anchor

Webhooks are user-defined HTTP requests triggered when a specific event occurs in one application and sends payload data to another in real-time. They can be used to automate a wide range of tasks, such as triggering a notification when a new post is added to a blog, pinging a deployment platform to trigger a build after a content change (maybe on Hygraph) or sending an alert when a server goes down. They are commonly used in modern web applications to automate workflows and improve integration between different systems.

Webhooks typically consist of three parts: the event, the payload, and the endpoint. The event is the specific action or change that triggers the webhook, such as a new user signing up for a service or a customer making a purchase. The payload is the data sent with the webhook, which can include information about the event or any other relevant data. The endpoint is the application URL that will receive the webhook and process the data.

In plain terms, you can say that webhooks make it possible for a system (the source) to communicate via an HTTP request to another system (the destination) when an event occurs and then share specific information known as the request payload about the event. At this point, you will ask, what is the difference between a webhook and an API?

Webhook vs APIAnchor

Webhooks and APIs are two different technologies used in web development to enable communication between different systems and applications. While they both serve the same purpose of exchanging data between applications, they operate differently and are used for different purposes.

APIs, or Application Programming Interfaces, are a set of protocols and tools used to build software applications. APIs enable applications to communicate with each other and exchange data in a standardized way. APIs require the requesting application to make a request to the API, and the API responds with the requested data. APIs are typically used for complex operations that require the use of multiple requests, such as retrieving data from a database or performing complex calculations.

Webhooks, on the other hand, are a way to receive real-time notifications when a specific event occurs in another application. Webhooks are triggered by events, and the receiving application receives a payload of data containing information about the event. Webhooks are typically used for simpler tasks that require real-time updates, such as updating a customer record when they make a purchase or triggering a notification when a new post is added to a blog.

The main difference between webhooks and APIs is that webhooks are designed to push data to another application when a specific event occurs. APIs are designed to allow the requesting application to pull data from another application.

How to use webhooksAnchor

The process of using webhooks is in three major steps:

1. The first step is to get the webhook URL from the application you want to send data. For example, if you want to send a webhook to Vercel so it builds or re-deploys your application whenever data changes in your Hygraph project, you’ll need to get a webhook URL from Vercel.
2. The next step is to use the webhook URL you have gotten from your destination application in the webhook section of the application you want to receive data from (source application). Since you want to get data from Hygraph, you will use the Vercel webhook URL in the webhook section of your Hygraph project.
3. The final step would be to choose the events you want the application to trigger. For example, you can trigger an event when a user publishes, edits, or saves data in your Hygraph project.

In clear terms, using webhooks in a web development project involves getting the webhook URL or endpoint, configuring the webhook and then defining the event that will trigger the webhook.

Real-life use cases of webhooksAnchor

Here is an ideal illustration to help you grasp the functioning of webhooks. Suppose you create a website using a static site generator (SSG) such as Hugo, which incorporates caching. If you retrieve data from a database dynamically, any changes made to the database won't be reflected on the site because Hugo only verifies if a request exists but does not compare the cached content to check for matches.

The best way to resolve this issue, a possible solution would be to link a webhook to the database. This webhook will generate an event that signals the deployment server each time there is an update. Consequently, any changes in the database will trigger a build process to update the website's content. We can demonstrate how to achieve this by using Vercel and Hygraph.

How to ping Vercel after a content change on Hygraph to trigger a buildAnchor

Vercel is a cloud-based platform for deploying your web projects. Vercel also allows you to easily set up and manage webhooks, which can trigger automatic deployment and updates of your web applications. In this example, we will use this Hugo profile page that dynamically fetches project data from Hygraph.

We want a situation where when a new project is added, deleted or updated, it reflects on the website when the user refreshes the browser. To achieve this, you will follow the three steps outlined earlier.

Create the webhook endpoint/URLAnchor

To set up the webhook endpoint/URL, you must first deploy your project to Vercel by importing it from GitHub. After that, you should configure the build commands and specify an environment variable for the "HUGO_VERSION" with the version number (such as "0.110.0") as its value.

After deploying your Hugo website, create a webhook in Vercel by accessing the Git settings of your project and locating the "Deploy Hooks" area. Here, you can provide a name for the webhook and indicate the Git branch name that should trigger a deployment.

Once you've configured your hook, create it, and copy the URL. The URL will be used as a webhook within your Hygraph project.

Configure the webhook & define the eventAnchor

To create a new webhook in your Hygraph project dashboard, select the "webhooks" option and specify its name. Next, paste the URL of your Vercel webhook into the designated field. Configure the triggers/events to specify the content model and stage that should initiate a re-deployment.

Once you have successfully created the hook, everything will work well, and your Hugo site will be fully interactive with Hygraph. You can learn more about how to deploy your Vercel project with Hygraph webhooks in this documentation.

When defining webhooks, you have learned that it sends a data payload. This is an example of the data payload sent from Hygraph to Vercel to initiate a re-deploy.

ConclusionAnchor

In conclusion, webhooks are a powerful tool for automating communication between applications and systems in a web development project. By triggering real-time updates when specific events occur, webhooks can streamline workflows and improve the efficiency of data exchange between different applications.

While webhooks are similar to APIs, they differ in their push-based approach and real-time updating capabilities. By understanding how webhooks work and how to use them effectively, web developers can build more efficient and robust web applications.