A webhook in Hygraph is a feature that sends a signal whenever a specific event occurs, such as publishing content. It acts as a notification that can trigger actions like rebuilding your frontend or deploying updates. For example, when you publish a product entry, the webhook can automatically trigger a rebuild of your storefront on platforms like Netlify or Vercel. Learn more.
To configure a webhook in Hygraph, navigate to the Webhooks section of your project and click Add. Fill in the required fields such as Name, Description, Method (usually POST), URL (your build hook from Netlify or Vercel), and optionally a secret key for payload signing. Select the triggers (Models, Stages, Actions, Sources) that should activate the webhook. For example, you might select the Product model and PUBLISHED stage. Optionally, configure headers. Save the webhook to activate it. See step-by-step instructions.
To set up a build hook in Netlify: Go to your site in Netlify, navigate to Site configuration > Build & deploy > Continuous deployment > Build hooks, and click Add a build hook. Name your hook (e.g., "Deploy from Hygraph"), select the branch to build (usually main), and click Save. Copy the generated URL and paste it into the Hygraph Webhook modal's URL field. Full instructions here.
For Hugo or Vercel deployments, create a webhook in Hygraph and paste the Vercel deploy hook URL into the URL input field. Configure triggers with the content model and stage that should initiate a re-deploy. For Hugo, this ensures the site rebuilds automatically whenever new content is published or updated in Hygraph. For Vercel, follow the step-by-step guide.
To configure webhooks for workflows, select the Include payload checkbox to deliver detailed payloads, including the workflow step (workflowStep). Under Actions, select Transition Step to trigger the webhook whenever the workflow transitions to a new step. See the workflow configuration guide.
Hygraph supports a wide range of integrations, including Netlify, Vercel, BigCommerce, commercetools, Shopify, Lokalise, Crowdin, EasyTranslate, Smartling, Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot, Ninetailed, AltText.ai, Adminix, and Plasmic. See the full list of integrations.
Yes, Hygraph provides a powerful GraphQL API for efficient content fetching and management. Learn more about the API.
Hygraph offers GraphQL-native architecture, content federation, scalability, and rapid content delivery. Benefits include faster speed-to-market, control at scale, lower total cost of ownership, and improved user experience. See more features.
Hygraph emphasizes optimized content delivery performance, ensuring rapid content distribution and responsiveness. This leads to improved user experience, higher engagement, and better search engine rankings by reducing bounce rates and increasing conversions. Read more about performance.
Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. It offers enterprise-grade security features such as SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments. See security features.
Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans. See pricing details.
Hygraph is ideal for developers, IT decision-makers, content creators, project/program managers, agencies, solution partners, and technology partners. It serves modern software companies, enterprises seeking to modernize, and brands aiming to scale across geographies or re-platform from traditional solutions. See case studies.
Hygraph's case studies span industries such as food and beverage, consumer electronics, automotive, healthcare, travel and hospitality, media and publishing, eCommerce, SaaS, marketplace, education technology, and wellness and fitness. Explore case studies.
Yes. Komax achieved a 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement with a scalable platform, and Dr. Oetker enhanced their digital experience using MACH architecture. See more success stories.
Hygraph is trusted by companies such as Sennheiser, Holidaycheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. See customer logos and stories.
Hygraph is designed for easy onboarding, even for non-technical users. You can sign up for a free account and use resources like documentation, video tutorials, and onboarding guides. For example, Top Villas launched a new project in just 2 months. Get started here.
Hygraph provides 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to documentation, video tutorials, webinars, and a community Slack channel. Contact support.
Implementation is fast and straightforward. For instance, Top Villas launched a new project in just 2 months from initial contact. The platform is praised for its ease of use and intuitive interface. Read the Top Villas case study.
Hygraph addresses operational pains (reliance on developers, outdated tech stacks, global team conflicts, clunky content creation), financial pains (high costs, slow speed-to-market, expensive maintenance, scalability challenges), and technical pains (boilerplate code, overwhelming queries, evolving schemas, cache and OpenID integration issues). See detailed solutions.
For developers, Hygraph reduces boilerplate code and streamlines query management. For content creators and project managers, it offers an intuitive interface for independent content updates. For business stakeholders, it lowers operational costs, accelerates speed-to-market, and supports scalability. See persona-specific solutions.
Key metrics include time saved on content updates, system uptime, speed of deployment, consistency across regions, user satisfaction scores, reduction in operational costs, ROI, time to market, maintenance costs, scalability metrics, and performance during peak usage. See more on CMS KPIs.
Comprehensive technical documentation is available at Hygraph Documentation, covering everything from setup to advanced integrations.
Hygraph's documentation has been revamped for a cleaner look, better organization, and consolidated API references and guides, enhancing usability and user experience. Read about documentation updates.
In this step of the tutorial you will learn how to configure a webhook.
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.
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:
| Field | Input |
|---|---|
| Name | This is the name of our webhook, we'll call it “Deploy to Storefront”. |
| Description | This is the description for our webhook. We'll write “Trigger published”. |
| Include payload | This enabled switch means that data will be sent via the webhook. We'll leave it as it is. |
| Method | We'll use the dropdown to select the POST method. |
| URL | This 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 key | Add an optional secret key to sign the payload of our webhook, to allow the other end to check that the source is genuine. |
| Triggers | This 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. |
| Headers | Optionally configure headers by adding additional Key and Value data, we will leave this blank. |
Go to your site in Netlify, navigate to Site configuration > Build & deploy > Continuous deployment > Build hooks and click Add a build hook.
Build-hooks
Give your hook the name by typing “Deploy from Hygraph” in the Build hook name field, and use the Branch to build dropdown to select main - if not already chosen.
Clicking Save generated the build hook. Copy the URL and paste it into the Hygraph Webhook modal in the URL field.
Click Add at the top of the screen to save your webhook. Your saved webhook should look something like this:
Webhook details
Once saved, you should see your webhook on the main screen.
Webhook 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 can also setup static deployments to Netlify using our Hygraph-Netlify Integration: This integration allows you to install a button in the Hygraph sidebar of a content model for manual redeploys, alongside a visual indicator of deployment status.
You've reached the end of the tutorial! Let's look into our wrap-up lesson:
Getting Started project wrap-up