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 Client
const client = new ApolloClient({
  uri: 'https://api-<region>.hygraph.com/v2/<some hash>/master',
  cache: new InMemoryCache(),
});

// GraphQL query
const GET_PRODUCTS_QUERY = gql`
  query GetProducts {
    items {
      id
      name
      description
    }
  }
`;

// React component to fetch and display data
function 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 component

function 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.

Get Started

Learn GraphQL

Hygraph is GraphQL-native Headless CMS offers precise data retrieval, minimizing over-fetching and optimizing efficiency.

Read the Guide

Examples

Look at some of the example projects to see Hygraph and React in action.

See Examples

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.

Get started for free, or request a demo to discuss larger projects

Contact sales Get started