Join us live as we unveil the all new Hygraph Studio!

Headless CMS for Gatsby

Hygraph is the ideal Headless CMS for Gatsby websites and applications. Read further to learn how our API-first CMS allows you to add components to your Gatsby apps in minutes and enable your website's content to be managed from a powerful CMS.

Step #1 - Set up the Apollo Client

The example here shows fetching the data at runtime using Apollo Client. In this setup, client.js initializes Apollo Client with your GraphQL endpoint.

src/apollo/client.js
import ApolloClient from 'apollo-boost';
// Initialize Apollo Client with the URI of your GraphQL endpoint
const client = new ApolloClient({
uri: 'https://api-<region>.hygraph.com/v2/<some hash>/master', // Replace with your GraphQL endpoint
});
export default client;

Step #2 - Fetching and working with the data

Next, you define a React component, ProductsList, that uses Apollo Client's useQuery hook to fetch product data from a GraphQL API at runtime. This component queries for products' names, descriptions, images, availability, and slugs. While the data is loading, a loading message is displayed. If an error occurs, it shows an error message.

Once the data is successfully fetched, it renders a list of products, each with its details. The ProductsList component is then used within the Products component, which is wrapped in ApolloProvider to provide Apollo Client context, enabling GraphQL queries within the component.

src/pages/products.js
import React from 'react';
import { ApolloProvider, useQuery, gql } from '@apollo/client';
import client from '../apollo/client';
// GraphQL query to fetch data
const GET_PRODUCTS_QUERY = gql`
query GetProducts {
products {
name
description
image
availability
slug
}
}
`;
// Component to fetch and display data
const ProductsList = () => {
const { loading, error, data } = useQuery(GET_PRODUCTS_QUERY);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<div>
{data.products.map(product => (
<div key={product.slug}>
<h2>{product.name}</h2>
<p>{product.description}</p>
<img src={product.image} alt={product.name} />
<p>{product.availability ? 'Available' : 'Out of stock'}</p>
</div>
))}
</div>
);
};
// ApolloProvider wraps your React app and places Apollo Client on the context
const Products = () => (
<ApolloProvider client={client}>
<h1>Products</h1>
<ProductsList />
</ApolloProvider>
);
export default Products;

Start building with Gatsby and Hygraph

We made it really easy to set up your project in Hygraph and use our GraphQL API within your Gatsby project.

Quickstart

Check out our docs to see how you can quickly set up your Hygraph project and enable the content API for your Gatsby 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 in action.

Why Hygraph

Choosing Hygraph for your Gatsby project

Gatsby and Hygraph are both GraphQL-native and provide the ultimate developer experience for creating blazing fast websites and applications. Sign up, create an API token and source content using the GraphQL source plugin. Hygraph is one of the best CMSs for Gatsby projects due to its flexibility, custom content modelling, and frontend agnostic approach.

Whether you decide to take full advantage of Gatsby to both static and dynamically render pages, you'll benefit from improved security and faster loading times for your users with using a single GraphQL API to query content. Build with Gatsby and secure your content with Hygraph for a next generation website or application.

gatsby cms

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