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 specific business needs. For full details, visit the Hygraph Pricing Page.
Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans tailored to specific business needs. For full details, visit the Hygraph Pricing Page.
Hygraph provides a GraphQL-native architecture, content federation, scalability, and rapid content delivery. It supports integrations with platforms like Netlify, Vercel, Shopify, BigCommerce, AWS S3, Cloudinary, and more. Hygraph also offers enterprise-grade security, SSO, audit logs, and sandbox environments. Learn more at the Hygraph Features Page.
Yes, Hygraph provides a powerful GraphQL API for efficient content fetching and management. For technical details, visit the Hygraph API Reference.
Hygraph integrates with a wide range of platforms, including Netlify, Vercel, BigCommerce, commercetools, Shopify, Lokalise, Crowdin, EasyTranslate, Smartling, Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot, Ninetailed, AltText.ai, Adminix, and Plasmic. For a full list, visit the Hygraph Integrations Page.
Comprehensive technical documentation is available at Hygraph Documentation, covering setup, API usage, integrations, and deployment guides.
Hygraph is designed for rapid content distribution and responsiveness, which improves user experience, engagement, and search engine rankings. Optimized delivery reduces bounce rates and increases conversions. For more details, visit this page.
Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. These certifications ensure enterprise-grade security and data protection. For more details, visit the Hygraph Security Features Page.
Hygraph provides robust security features including SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments to safeguard sensitive data and meet regulatory standards. More information is available at the Hygraph Security Features Page.
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 globally, improve development velocity, or re-platform from legacy solutions.
Customers can expect significant time savings, streamlined workflows, faster speed-to-market, and enhanced customer experience through scalable and consistent content delivery. For example, Komax achieved 3X faster time to market, and Autoweb saw a 20% increase in website monetization. See more success stories on the Hygraph Product Page.
Hygraph's case studies span industries such as 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 more at the Hygraph Case Studies Page.
Yes. Komax achieved 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement, and Dr. Oetker enhanced their digital experience using MACH architecture. More stories are available on the Hygraph Product Page.
Hygraph is designed for quick implementation. For example, Top Villas launched a new project in just 2 months from initial contact. Users can get started rapidly by signing up for a free account and using onboarding guides and documentation. Learn more at Hygraph Documentation.
Hygraph addresses operational pains (reliance on developers for content updates, outdated tech stacks, global team conflicts, clunky content creation), 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). For more details, visit the Hygraph Product Page.
Hygraph empowers non-technical users with an intuitive interface, modernizes legacy tech stacks with GraphQL-native architecture, ensures consistent branding via content federation, and streamlines workflows to reduce costs and accelerate speed-to-market. It also simplifies development, query management, and schema evolution, and resolves cache and integration issues. See detailed solutions on the Hygraph Product Page.
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. For more, see the Hygraph Blog on CMS KPIs.
Hygraph offers 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to documentation, video tutorials, and a community Slack channel. For more, visit the Hygraph Contact Page.
Hygraph provides onboarding sessions for enterprise customers, 24/7 support, training resources (video tutorials, documentation, webinars), and Customer Success Managers for expert guidance. More details are available at the Hygraph Contact Page.
Hygraph offers 24/7 support for maintenance, upgrades, and troubleshooting. Enterprise customers receive dedicated onboarding and expert guidance, while all users can access documentation and the community Slack channel for additional help.
Hygraph's primary purpose is to unify data and enable content federation, allowing businesses to create impactful digital experiences. Its GraphQL-native architecture removes traditional content management pain points and offers scalability, flexibility, and efficient data querying.
Getting started is simple—sign up for a free-forever account at Hygraph. Resources like documentation, video tutorials, and onboarding guides are available to help users navigate the platform.
Customers praise Hygraph for its intuitive interface and ease of use, noting that even non-technical users can start using it right away. The user interface is described as logical and user-friendly, making it accessible for both technical and non-technical teams.
Notable customers include Sennheiser, HolidayCheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. For more details and case studies, visit the Hygraph Case Studies Page.
Hygraph stands out for its GraphQL-native architecture, content federation, scalability, and cost efficiency. It enables impactful digital experiences while reducing operational costs and improving efficiency. For more details, visit the Hygraph Product Page.
The Hygraph Blog provides the latest updates, developer tutorials, and essential guides to content modeling. Visit the Hygraph Blog for news and insights.
The blog post was written by Aagam Vadecha and Joel Olawanle.
The blog post encourages readers to sign up for the newsletter to stay informed about releases and industry news.
The Hygraph Blog includes developer tutorials, latest updates, and essential guides to content modeling.
You should have a fundamental understanding of HTML, CSS, JavaScript, some experience with React, Node and npm or yarn installed, and a React application set up using Create React App.
The example uses the react-router-dom
library for routing in React applications.
Routing is managed using react-router-dom
, with routes defined for different components such as Home, About, and Products. Dynamic routing is implemented using URL parameters like slug
.
The key components are Routes
and Route
.
Dynamic routing allows you to create different components for each item dynamically, using parameters like slug
in the URL to fetch specific data.
Import components for routing by using import
statements for each component you want to use in your routes, such as Home, About, and Products.
For more information, read the Routing in React blog post on the Hygraph website.
React is an open-source frontend JavaScript framework that allows developers to create websites and user interfaces using UI components and single-page applications. Routing is one of the most important features we always want to implement when developing these applications.
Routing redirects users to different pages based on their actions or requests. In React routing, you'll use an external library called React router, which can be challenging to configure if you need help understanding how it works.
In this article, we will show you how to perform routing in React using a React router. Learn the various routing aspects and how React router handles them, such as dynamic routing, programmatic navigation, no-matching routes, etc.
To fully comprehend and follow this guide, we would create an application that properly illustrates all aspects of navigation with appropriate use cases. We would create/use a cocktails app that retrieves data from Hygraph via GraphQL. This application, which can be accessed via this live link, uses all aspects of routing covered in this guide.
Editor's Note
You should have the following to follow along with this guide and code:
As previously stated, React makes use of an external library to handle routing; however, before we can implement routing with that library, we must first install it in our project, which is accomplished by running the following command in your terminal (within your project directory):
npm install react-router-dom
After successfully installing the package, we can set up and configure the React router for our project.
To configure React router, navigate to the index.js
file, which is the root file, and import BrowserRouter
from the react-router-dom
package that we installed, wrapping it around our App component as follows:
// index.jsimport React from 'react';import ReactDOM from 'react-dom/client';import { BrowserRouter } from 'react-router-dom';import App from './App';const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<React.StrictMode><BrowserRouter><App /></BrowserRouter></React.StrictMode>);
We have now successfully installed and imported React router into our project; the next step is to use React router to implement routing. The first step is configuring all of our routes (all the pages/components we want to navigate).
We would first create those components, in our case, three pages: the Home page, the About Page, and the Products Page. This GitHub repository contains the content for these pages. Once those pages are properly configured, we can now set up and configure our routes in the App.js
file, which serves as the foundation for our React application:
// App.jsimport { Routes, Route } from 'react-router-dom';import Home from './Pages/Home';import About from './Pages/About';import Products from './Pages/Products';const App = () => {return (<><Routes><Route path="/" element={<Home />} /><Route path="/products" element={<Products />} /><Route path="/about" element={<About />} /></Routes></>);};export default App;
We can see in the above code that we imported Routes
and Route
components from react-router-dom
and then used them to declare the routes we want. All Routes are wrapped in the Routes
tag, and these Routes have two major properties:
path
: As the name implies, this identifies the path we want users to take to reach the set component. When we set the path
to /about
, for example, when the user adds /about
to the URL link, it navigates to that page.
element
: This contains the component that we want the set path to load. This is simple to understand, but remember to import any components we are using here, or else an error will occur.
Editor's Note
When we go to our browser and try to navigate via the URL, it will load whatever content we have on such pages.
Let us now create a standard Navigation bar component that can be used to navigate inside our application.
First, create the Navbar component.
// component/NavBar.jsimport { NavLink } from "react-router-dom";const NavBar = () => {return (<nav><ul><li><NavLink to="/">Home</NavLink></li><li><NavLink to="/about">About</NavLink></li><li><NavLink to="/products">Products</NavLink></li></ul></nav>);};export default NavBar;
The NavLink
component from react-router-dom is a special component that helps you navigate different routes using the to
prop. The NavLink
component also knows whether the route is currently "active" and adds a default active
class to the link. We can use this class in our CSS to define some styling for active links, as shown below:
// index.cssul li a {color: #000;}ul li a:hover {color: #00a8ff;}ul li a.active {color: #00a8ff;}
Also, we can assign our custom classes instead of using the default active class. The NavLink component gives us access to properties like isActive, which can be used like this.
...<li><NavLinkto="/"className={({ isActive }) => {return isActive ? "active-link" : "";}}>Home</NavLink></li>...
Finally, let us use the Navbar component inside our App.
// App.jsimport NavBar from "./Components/Navbar";import { Routes, Route } from "react-router-dom";const App = () => {return (<><NavBar /><Routes>...</Routes></>);};export default App;
When routing, a situation may cause a user to access an unconfigured route or a route that does not exist; when this occurs, React does not display anything on the screen except a warning with the message "No routes matched location."
This can be fixed by configuring a new route to return a specific component when a user navigates to an unconfigured route as follows:
// App.jsimport { Routes, Route } from 'react-router-dom';import NoMatch from './Components/NoMatch';const App = () => {return (<><Routes>// ...<Route path="*" element={<NoMatch />} /></Routes></>);};export default App;
In the preceding code, we created a route with the path *
to get all non-configured paths and assign them to the attached component.
Editor's Note
NoMatch.js
, but you can name yours whatever you want to display 404, page not found, on the screen, so users know they are on the wrong page. We can also add a button that takes the user to another page or back, which leads us to programmatic navigation.Programmatic navigation is the process of navigating/redirecting a user as a result of an action on a route, such as a login or a signup action, order success, or when he clicks on a back button.
Let's first look at how we can redirect to a page when an action occurs, such as when a button is clicked. We accomplish this by adding an onClick
event, but first, we must create the route in our App.js
file. After that, we can import the useNavigate
hook from the react-router-dom
and use it to navigate programmatically as follows:
// Products.jsimport { useNavigate } from 'react-router-dom';const Products = () => {const navigate = useNavigate();return (<div className="container"><div className="title"><h1>Order Product CockTails</h1></div><button className="btn" onClick={() => navigate('order-summary')}>Place Order</button></div>);};export default Products;
Editor's Note
order-summary
, so when this button is clicked, the user is automatically navigated to the orderSummary
component attached to this route.<button className="btn" onClick={() => navigate(-1)}>Go Back</button>
Ensure you already have the hook imported and instantiated as we did earlier else this won’t work.
We created three files in our pages folder earlier to implement routing, one of which was the products component, which we will populate with Hygraph content. We created a schema in Hygraph to receive cocktail details, and this is how it looks:
We then filled it in with cocktail specifics. We will now use GraphQL to retrieve these data so that we can consume them in our React project. This is how the products page appears:
// Products.jsimport { useState, useEffect } from "react";import { useNavigate } from "react-router-dom";import { getAllCocktails } from "../api";import ProductCard from "../Components/ProductCard";const Products = () => {const [products, setProducts] = useState([]);const navigate = useNavigate();useEffect(() => {const fetchProducts = async () => {const { cocktails } = await getAllCocktails();setProducts(cocktails);};fetchProducts();}, []);return (<div className="container"><button className="btn" onClick={() => navigate(-1)}>Go Back</button><div className="title"><h1>CockTails</h1></div><div className="cocktails-container">{products.map((product) => (<ProductCard product={product} />))}</div></div>);};export default Products;
// components/ProductCard.jsimport { Link } from "react-router-dom";const ProductCard = ({ product }) => {if (!product) {return null;}return (<div key={product.id} className="cocktail-card"><img src={product.image.url} alt="" className="cocktail-img" /><div className="cocktail-info"><div className="content-text"><h2 className="cocktail-name">{product.name}</h2><span className="info">{product.info}</span></div><Link to={`/products/${product.slug}`}><div className="btn">View Details</div></Link></div></div>);};export default ProductCard;
Editor's Note
We fetched our content from Hygraph in the preceding code; if you already created your own schema, you can simply change the Endpoint URL and possibly the schema name if you gave it a different name.
Editor's Note
We added a Link
and used string interpolation to dynamically attach the slug
of each product to the path, so we can get the slug
and use it to get the data to show.
Let us now put dynamic routing into action.
The first step would be to create the component that we want to render dynamically, and for that we would create a ProductDetials.js
file where we would dynamically fetch details of each product based on the slug
passed through the URL, but for now we can just place dummy data into the component like this:
// ProductDetails.jsconst ProductDetails = () => {return (<div className="container"><h1>Products Details Page</h1></div>);};export default ProductDetails;
We can now proceed to create a route to handle dynamic routing in our App.js
file this way:
// App.jsimport { Routes, Route } from 'react-router-dom';// ...import ProductDetails from './Pages/ProductDetails';const App = () => {return (<><Routes>// ...<Route path="/products/:slug" element={<ProductDetails />} /></Routes></>);};export default App;
Editor's Note
slug
, which can be anything, but this route will match any value and display the component as long as the pattern is the same, for example, http://localhost:3000/products/cocktail
will show the ProductDetails
component.So far, we've dealt with the first part of dynamic routing. We must now obtain the parameter passed through the URL in order to dynamically query the data for the specific cocktail. This will be accomplished through the use of urlParams
.
We will import the useParams
hook into the ProductDetails
component so that we can use it to get the URL parameter and then use that parameter to query our data from Hygraph via GraphQL.
// ProductDetails.jsimport { useState, useEffect } from "react";import { useNavigate, useParams } from "react-router-dom";import { getProductBySlug } from "../api";const ProductDetails = () => {const [product, setProduct] = useState([]);const navigate = useNavigate();// Fetch slug from route parametersconst { slug } = useParams();useEffect(() => {const fetchProduct = async () => {const { cocktail } = await getProductBySlug(slug);setProduct(cocktail);};fetchProduct();}, [slug]);return (<div className="container">// ...Product Details template</div>);};export default ProductDetails;
At this point, we have successfully been able to get the URL param passed, let’s now make use of this slug to fetch data from Hygraph using GraphQL:
At this point, we have successfully implemented dynamic routing.
We've already seen how to create routes and implement routing with React router; now let's look at how to lazy load routes with React router.
Lazy loading is a technique in which components that are not required on the home page are not loaded until a user navigates to that page, allowing our application to load faster than having to wait for the entire app to load at once. This contributes to improved performance, which leads to a positive user experience.
To implement lazy loading, simply go to App.js
and wrap our routes with the Suspense
component, along with a fallback
props that are rendered on the screen until the component loads:
// App.jsimport { lazy, Suspense } from 'react';import { Routes, Route } from 'react-router-dom';import NavBar from './Components/NavBar';const Home = lazy(() => import('./Pages/Home'));const About = lazy(() => import('./Pages/About'));const Products = lazy(() => import('./Pages/Products'));const ProductDetails = lazy(() => import('./Pages/ProductDetails'));const NoMatch = lazy(() => import('./Components/NoMatch'));const App = () => {return (<><NavBar /><Suspense fallback={<div className="container">Loading...</div>}><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /><Route path="/products" element={<Products />} /><Route path="/products/:slug" element={<ProductDetails />} /><Route path="*" element={<NoMatch />} /></Routes></Suspense></>);};export default App;
Editor's Note
We learned about routing and how to implement it in our React application in this guide. It is critical to understand that the React router is what allows us to perform single-page routing without reloading the application.
Build limitless solutions rapidly with our GraphQL-native API-first approach
Blog Authors
Learn about the best CMS options for your Vue.js projects.
Discover 7 top CMS options for Angular apps, with tips on choosing a headless CMS that delivers performance, flexibility, and a great developer experience.
Choosing the right CMS for Astro can make or break your site's performance and workflow. We've narrowed down the best CMS options based on scalability, price and how well they integrate with Astro, so you can find the perfect fit for your project.