What is Hygraph and how does it support in-app notifications in React?
Hygraph is a GraphQL-native headless content management system (CMS) that enables developers to build real-time, content-driven experiences. For in-app notifications in React, Hygraph provides a flexible content system, webhooks, and seamless integration with WebSockets. This allows you to push notifications from Hygraph to your React frontend in real time, customizing fields such as title, message, and intent (e.g., info, warning, error, success). Learn more in the tutorial.
Who can benefit from using Hygraph?
Hygraph is designed for developers, IT decision-makers, content creators, project/program managers, agencies, solution partners, and technology partners. It is especially valuable for modern software companies, enterprises seeking to modernize their tech stack, and brands aiming to scale across geographies, improve development velocity, or re-platform from traditional solutions. See more about our mission.
What industries use Hygraph?
Hygraph is used across a wide range of industries, including Food and Beverage (Dr. Oetker), Consumer Electronics (Samsung), Automotive (AutoWeb), Healthcare (Vision Healthcare), Travel and Hospitality (HolidayCheck), Media and Publishing, eCommerce, SaaS (Bellhop), Marketplace, Education Technology, and Wellness and Fitness. Explore case studies.
Features & Capabilities
What are the key features of Hygraph?
Hygraph offers a GraphQL-native architecture, content federation, scalability, and a flexible schema builder. It supports integrations with popular platforms (Netlify, Vercel, Shopify, BigCommerce, AWS S3, Cloudinary, Mux, and more), localization tools, digital asset management, personalization, and AI. Hygraph also provides a powerful GraphQL API for efficient content management. See all features | Integrations
Does Hygraph support React and modern frontend frameworks?
Yes, Hygraph supports React and other modern frontend frameworks. It provides examples and guides for using React Hooks, React Server Components, and optimized image rendering with @hygraph/react-image. You can easily integrate Hygraph with React.js, Next.js, and other frameworks for dynamic web applications. React notifications tutorial | React examples
What integrations are available with Hygraph?
Hygraph integrates with hosting and deployment platforms (Netlify, Vercel), eCommerce solutions (BigCommerce, commercetools, Shopify), localization tools (Lokalise, Crowdin, EasyTranslate, Smartling), digital asset management (Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot), personalization and AB testing (Ninetailed), AI (AltText.ai), and more. See full list of integrations.
Does Hygraph provide an API for content management?
Yes, Hygraph offers a powerful GraphQL API for fetching and managing content efficiently. The API is well-documented and supports advanced querying, making it ideal for modern web and mobile applications. API Reference
How does Hygraph optimize content delivery performance?
Hygraph is designed for optimized content delivery, ensuring rapid distribution and responsiveness. This leads to improved user experience, higher engagement, and better search engine rankings. Fast content delivery helps reduce bounce rates and increase conversions. Learn more about performance.
Pricing & Plans
What is Hygraph's pricing model?
Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans tailored to business needs. For full details and feature breakdowns, visit the pricing page.
Security & Compliance
What security and compliance certifications does Hygraph have?
Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. It offers enterprise-grade security features including SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments to protect sensitive data and meet regulatory standards. See security features.
Technical Requirements & Documentation
Where can I find technical documentation for Hygraph?
Comprehensive technical documentation is available at Hygraph Documentation. It covers setup, API usage, integrations, schema modeling, and deployment guides for developers and content teams.
How easy is it to get started with Hygraph?
Hygraph is designed for ease of use, with an intuitive interface praised by customers as 'super easy to set up and use.' Even non-technical users can start right away. You can sign up for a free account and access onboarding guides, documentation, and video tutorials. For example, Top Villas launched a new project in just 2 months from initial contact. Get started here.
Support & Implementation
What support and training does Hygraph offer?
Hygraph provides 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to detailed documentation, video tutorials, webinars, and a community Slack channel. Customer Success Managers are available to help during onboarding. Contact support.
How does Hygraph handle maintenance, upgrades, and troubleshooting?
Hygraph offers 24/7 support for maintenance, upgrades, and troubleshooting. Enterprise customers benefit from dedicated onboarding and expert guidance, while all users can access documentation and community resources for self-service support. Learn more.
Pain Points & Solutions
What problems does Hygraph solve?
Hygraph addresses operational pains (reliance on developers for content updates, outdated tech stacks, conflicting needs from global teams, clunky user experiences), financial pains (high operational costs, slow speed-to-market, expensive maintenance, scalability challenges), and technical pains (boilerplate code, overwhelming queries, evolving schemas, cache problems, OpenID integration challenges). See product solutions.
How does Hygraph solve pain points for different personas?
Hygraph tailors solutions for developers (simplifies development, reduces boilerplate code, streamlines queries), content creators/project managers (intuitive interface, empowers non-technical users), and business stakeholders (reduces operational costs, accelerates speed-to-market, supports scalability). Learn more.
What KPIs and metrics are associated with the pain points Hygraph solves?
Key metrics include time saved on content updates, number of updates without developer intervention, 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 CMS KPIs.
Customer Success & Proof
Can you share specific case studies or success stories of customers using Hygraph?
Yes. Komax achieved 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 customer stories.
Who are some of Hygraph's customers?
Hygraph is trusted by leading brands such as Sennheiser, Holidaycheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. See case studies.
Competitive Positioning
Why choose Hygraph over other CMS solutions?
Hygraph stands out with its GraphQL-native architecture, content federation, scalability, and ease of use. It enables businesses to create impactful digital experiences while reducing costs and improving efficiency. Hygraph is particularly suited for teams seeking flexibility, modern tech stacks, and rapid speed-to-market. See product comparison.
Creating in-app notifications in React with Hygraph
Learn how to build in-app notifications with Hygraph, webhooks, and WebSockets with a React.js frontend.
Written by Cameron
on Sep 04, 2023
Almost everyone is familiar with notifications these days. They can be divided into two broad groups: push notifications and in-app notifications.
Because push notifications are handled by the user's mobile device or browser, they must be implemented in specific ways. In-app notifications, however, are displayed in your app, so it is entirely up to you to decide how they will be implemented—from the look and feel to the technology behind them.
This customizability of in-app notifications has the benefit of allowing them to be deeply integrated with your application, which leads to a better user experience than generic push notifications. However, because in-app notifications differ on a case-by-case basis, it can be hard to implement them. There is no single "right way" to do it.
What most in-app notifications have in common, however, is that they provide a way for you to send content to users who are actively engaged with your application. This is the best window of opportunity for you to share news such as new features, sales, or promotions with them.
In this tutorial, you will learn how to build simple in-app notifications using Hygraph's powerful content system, webhooks, and WebSockets with a React.js frontend. The in-app notifications will show the user some text fields and a color to indicate the importance of the notification.
Before you jump in, review this sequence diagram to get an understanding of how the different components will interact:
Hygraph can be configured to send requests to a webhook endpoint when certain events happen. Because you will be running the backend locally, ngrok allows you to expose the backend through a tunnel to the internet, which Hygraph can use as the webhook endpoint. When the backend receives a request on the webhook endpoint, it will emit the data it received to all connected clients via WebSockets. Lastly, when the frontend receives a WebSocket message containing a notification, the frontend will render it.
Optional: Google Chrome or a Chrome-based browser for running a particular browser extension for testing the WebSocket connection. If you don't have Chrome or don't want to install it, this can be skipped.
The first piece of the puzzle is Hygraph. Hygraph is a content platform that offers a lot of flexibility. In this tutorial, you will use it to publish pieces of content and have them automatically sent via webhook to your app's backend.
If you haven't already done so, create an account. Once you are signed in, select the option to create a new blank project from the home screen. Give it a name like Notification demo and then click Add project:
Once the new project is created and you are taken to the project dashboard, from the left-hand menu, select Schema. In the new menu that appears, click on Add next to Enumerations. This will open a dialog that prompts you for some details. The enumeration you are creating will denote the "intent" of your notifications so that you can show notifications with different severities. Fill out the dialog with these details, as shown in the screenshot below:
Display name: Use intent.
API ID: Use Intent.
Description: This is optional; you can leave it blank.
Enumeration values: Use info, warning, error, and success, pressing Enter after each value.
Then click Add Enumeration:
Next, at the top of the Schema menu, click the Add button next to Models. This will open a new dialog that lets you create the model representing your notifications. Fill out the dialog with these details, as shown in the screenshot below:
Display name: Use Notification.
API ID: Use Notification.
Plural API ID: Use Notifications.
Description: This is optional; you can leave it blank.
Then click Add Model.
Hygraph will take you to a new page, where you will be prompted to add fields to your model. You can select fields from the right-hand menu. For this tutorial, add the following fields:
Single line text: Use Title as the field name.
Multi line text: Use Message as the field name.
Dropdown: Use Intent as the field name. For this one, select your Intent enumeration as the value for the Enumeration field.
With these fields created, your model should look something like this:
Next, you must configure a webhook for this model to ensure everything is working as expected.
Select Webhooks at the bottom of the left-hand menu and then choose Add Webhook. This will open a form that lets you configure your webhook.
Because you have not created the backend yet, you can use a simple webhook testing service to verify that everything is working. In a new tab, go to https://webhook.site/, where you will be given a unique URL. Copy this URL, and use it as the value for Url in the Hygraph webhook form.
Under Triggers, select your model (notification) as well as the stage (Published) and action (Publish) on which you wish it to trigger. Your completed form should look something like this:
Submit the form by clicking Add in the top-right corner.
Next, in the left-hand menu, select Content and then Add entry. Fill out the three fields—use My title for Title, My message for Message, and success for Intent, as shown below—then click Save & publish.
Once that is saved, go back to the webhook.site tab. You should see that it has received a message containing the values you specified:
This verifies that everything on Hygraph is configured correctly.
Once you have created the backend, you will change the webhook URL; for now, you can leave it as is.
The next thing you need to create is the backend service that will do two things. First, it will receive POST request webhooks coming from Hygraph. Second, it will host a WebSocket server and emit messages to any connected clients containing the details of the notifications received via the webhook.
This is a simple, contrived form of what would likely be a more complicated application in a real-world scenario, but it serves to demonstrate the architectural patterns in play.
To get started, create a new directory to hold the code for this tutorial. Inside the directory, create another to hold the code for the server:
mkdir -p hygraph-notifications/server
cd hygraph-notifications/server
Once in this directory, you need to install a few dependencies. First, initialize a new npm project (you can accept the default values for any questions it asks), and then install the dependencies as follows:
npm init
npm i -D typescript @types/ws @types/express
npm i body-parser express ws
Next, create a file called tsconfig.json and give it the following content:
{
"compilerOptions":{
"esModuleInterop":true,
"target":"es6",
"module":"commonjs",
"outDir":"./dist/server",
"strict":true,
"sourceMap":true,
"typeRoots":[
"node_modules/@types"
]
},
"exclude":[
"dist",
"node_modules"
]
}
Finally, create a file called index.ts and give it the following content:
importexpressfrom"express";
importhttpfrom"http";
importWebSocketfrom"ws";
importbodyParserfrom"body-parser";
import{ randomUUID }from"crypto";
// Create a new express app instance
const app =express();
// Parse JSON bodies
const jsonParser = bodyParser.json();
// Create a new HTTP server
const server = http.createServer(app);
// Create a new WebSocket server
const wss =newWebSocket.Server({ server });
app.post("/webhook", jsonParser,(req, res)=>{
// Broadcast the notification to all connected clients
// In a real app, you would probably want to send to specific clients
wss.clients.forEach((client)=>{
if(client.readyState===WebSocket.OPEN){
client.send(
JSON.stringify({
id:randomUUID(),// Generate a random ID for the message
type:"notification",// Give the message a type
// Encode the data from the webhook into the message
Comments in this code describe what each section does, but the gist is that it creates a web server to handle the incoming webhook and the WebSocket connections, as detailed above.
Because the code is written in TypeScript, you need to transpile it before it can be executed. To do this, run the following commands:
./node_modules/.bin/tsc
node dist/server/index.js
You should see the output in your terminal saying Server started on port 8999.
At this stage, testing everything is working so far is a good idea. The easiest way to do this before you've created the frontend is to use the Simple WebSocket Client Google Chrome extension.
Install this extension, and then click on the icon it adds near your omnibar. This should take you to a simple UI with a field labeled URL:. In this field, enter ws://localhost:8999 and click Open. You should see something like this:
This output indicates that the client has successfully connected to your WebSocket server.
Next, you will use ngrok to expose your server to the internet so that Hygraph can send webhook requests to it.
If you haven't already done so, create an account with ngrok, follow the instructions to download the ngrok binary for your OS of choice and authenticate it with your ngrok account.
Once this is done, running the following command will start an ngrok session on your machine:
ngrok http 8999
You should see some output like this:
Copy the URL from the Forwarding line (blurred above), and go back to Hygraph. Navigate back to the Webhooks menu item at the bottom of the left-hand menu, and edit your existing webhook. Replace the previous URL with the ngrok URL you copied, suffixed with /webhook, as this is the route your server is configured to listen on. Save the changes to the webhook configuration by clicking Update in the top-right corner.
Next, navigate back to the Content menu. Click Add Entry and create another notification by filling out and submitting the form.
If you look in your ngrok terminal, you should see that it logged a POST request to the /webhook endpoint. If so, look in your WebSocket client, where you should see the notification too:
If you don't see the message come through, check that the following are all true:
The server is running locally.
ngrok is running.
The URL ngrok gave you is the URL configured in Hygraph and that you suffixed it with /webhook.
To renew the connection, click Close and then Open again in the WebSocket client.
If this works, you are ready to move on to the final piece, the frontend.
You now have data coming from Hygraph via your webhook and being sent to your WebSocket client. If you implement handling for these WebSocket messages in a React application, you can show in-app notifications driven by Hygraph's content system. You will build this React application using TypeScript, Vite, and Tailwind.
To get started, navigate back to your project root directory, and create a new Vite project with the following command:
Next, you need to install some other dependencies for Tailwind and to work with WebSockets:
npm i react-use-websocket
npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
This command would have created a new file called tailwind.config.js. Open this file, and replace its content with the following to ensure that Tailwind watches the appropriate files:
The code above has comments describing what each piece does, but essentially, it connects to the WebSocket server running on port 8999 and waits until it receives a message with a type of ”notification”.
Once one of these notifications has been received, it renders the notification with simple styles. The notification's color is based on the intent that you selected in Hygraph when creating the entry, and the rendered notification has a button for dismissing it.
Aside from this, the code includes some types to help with autocomplete. This would likely be spread across multiple files in a real application, but in this contrived example, it is all kept in one file for brevity.
From your terminal, run the following command to start your frontend app:
npm run dev
The output should indicate which port it is running on. Go to this address in your browser, where you should see something like this:
If you have previously stopped the backend service or ngrok, ensure that they are running and that the URL ngrok gives you is still configured for your webhooks in Hygraph. If all these pieces are running, publish a notification from Hygraph. You should see it appear as an in-app notification:
With that, you can push in-app notifications to your React frontend in real-time using Hygraph's powerful content tools.
In this tutorial, you've seen how to use Hygraph, webhooks, WebSockets, and React to implement basic real-time in-app notifications.
This example has kept things simple with just a few text fields and an enumeration. However, Hygraph supports many useful field types, including geo-coordinates, file uploads, and rich text inputs. With this flexibility and the tools and techniques you've seen in this tutorial, there's no limit to the real-time, content-driven experiences you could bring to your application.
If you need to bring content-driven experiences to your application, consider Hygraph, a GraphQL-friendly headless content management system that's easy to work with and simple to integrate with the backend and frontend technologies of your choice.
Blog Author
Cameron Pavey
Technical writer
Cameron is a full-stack dev living and working in Melbourne. He's committed himself to the never-ending journey of understanding the intricacies of quality code, developer productivity, and job satisfaction.
Share with others
Sign up for our newsletter!
Be the first to know about releases and industry news and insights.