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 the most up-to-date details, visit the Hygraph Pricing Page.
Headless CMS for React
Hygraph is the ideal Headless CMS for React websites and applications. Read further to learn how our API-first CMS allows you to add components to your React apps in minutes and enable your website's content to be managed from a powerful CMS.
Step #1 - Fetch the content from the headless CMS
First you set up the Apollo Client for interacting with a GraphQL API in a React application. The client is initialized with the GraphQL endpoint and an in-memory cache. A GraphQL query, GET_PRODUCT_QUERY, is defined to fetch specific data fields. The Products function component then utilizes the useQuery hook from Apollo Client to execute this query.
The component handles the loading and error states and, upon successful data retrieval, maps through the data to render it. This setup allows for efficient data fetching and state management for the GraphQL query.
import React from 'react';import { ApolloClient, InMemoryCache, gql, useQuery } from '@apollo/client';// Initialize Apollo Clientconst client = new ApolloClient({uri: 'https://api-<region>.hygraph.com/v2/<some hash>/master',cache: new InMemoryCache(),});// GraphQL queryconst GET_PRODUCTS_QUERY = gql`query GetProducts {items {idnamedescription}}`;// React component to fetch and display datafunction Products() {const { loading, error, data } = useQuery(GET_PRODUCTS_QUERY);if (loading) return <p>Loading...</p>;if (error) return <p>Error :(</p>;return (<div>{data.items.map(({ id, name, description }) => (<div key={id}><h3>{name}</h3><p>{description}</p></div>))}</div>);}export default Products;
Step #2 - Working with data
Now, you can use the Products component within a React application. The App function component serves as the main component of the application. It renders a header and includes the Products component. The Products, defined in the first block, is responsible for fetching and displaying the data from the GraphQL API.
This separation of concerns allows for a clear structure in the application, with App focusing on the overall layout and Products handling data retrieval and presentation.
import React from 'react';import Products from './Products'; // Import the componentfunction App() {return (<div><h1>Product List</h1><Products /></div>);}export default App;
Start building with React and Hygraph
We made it really easy to set up your project in Hygraph and use our GraphQL API within your React project.
Quickstart
Check out our docs to see how you can quickly set up your Hygraph project and enable the content API for your React website or app.
Learn GraphQL
Hygraph is GraphQL-native Headless CMS offers precise data retrieval, minimizing over-fetching and optimizing efficiency.
Examples
Look at some of the example projects to see Hygraph and React in action.
Why Hygraph
Choosing Hygraph for your React project
Hygraph is a headless CMS based on GraphQL. We all know that GraphQL and React are like peanut butter and jelly as they were both created to solve the problems of managing structured content in an easy to understand way.
Hygraph is one of the best choices for a "React CMS" because it based 100% on GraphQL and, as such, helps makes working with your structured content as simple as possible. The concept of a headless CMS is directly in line with the component-based philosophy of React.
Most likely you work with React because of its component structure and development performance. Using a CMS with your ReactJS project in replacement of hard-coded content means your developers no longer have to deal with things like spelling errors and manually adding locales. Getting started with a React CMS (React + Headless CMS) will garner your team of developers and marketers the best of both flexibility and scalability.
Developer Experience
We try to be the most un-opinionated CMS on the market with a wide collection of open source example projects to get you started.
Headless CMS
As a headless CMS (i.e. API based content management), you can be as modular and flexible as you need. We even support multiplatform content management.
Management API
Hygraph boasts a flexible and powerful management API to manage your content and schema, as well as a blazing fast content API.