What is Hygraph and how does it work with Hydrogen CMS?

Hygraph is a GraphQL-native headless CMS designed for modular, API-based content management. It integrates seamlessly with Shopify's Hydrogen framework, allowing developers to fetch and manage eCommerce content using GraphQL queries. For example, you can use Hydrogen's useShopQuery to retrieve product data from Hygraph and render it in your Hydrogen app. This enables both developers and content editors to manage and deliver content efficiently.

How do I fetch content from Hygraph in a Hydrogen project?

You can use Hydrogen's useShopQuery along with a GraphQL query to fetch data from Hygraph's API. For example, you can request a list of products and pass the data to your components for rendering. This approach allows for dynamic, real-time updates of your eCommerce site content.

Is Hygraph a headless CMS?

Yes, Hygraph is a headless CMS, meaning it is API-based and allows for modular and flexible content management. This enables multiplatform content delivery and integration with frameworks like Hydrogen, Astro, NextJS, NuxtJS, and SvelteKit.

What frameworks can I use with Hygraph?

Hygraph supports integration with popular frameworks such as Astro, NextJS, NuxtJS, SvelteKit, and Hydrogen CMS. This flexibility allows developers to choose the best tools for their projects.

Does Hygraph offer integration with Hydrogen CMS?

Yes, Hygraph integrates with Hydrogen CMS. You can find more details and integration guides on the Hydrogen CMS integration page.

How can I easily integrate Shopify Hydrogen with Hygraph?

Hygraph provides a step-by-step guide for integrating Shopify Hydrogen with its headless CMS. The blog post 'Integrating a headless CMS with Shopify Hydrogen' demonstrates how to connect Hydrogen with Hygraph for seamless content management.

What are the key features of Hygraph?

Hygraph offers a range of features including GraphQL-native architecture, content federation, Smart Edge Cache for performance, custom roles for granular access control, rich text formatting, project backups, and multiplatform content management. These features enable operational efficiency, scalability, and flexibility for modern digital experiences.

How does Hygraph's GraphQL-native approach benefit developers?

Hygraph's GraphQL-native CMS allows developers to retrieve only the data they need, minimizing over-fetching and optimizing efficiency. This approach simplifies schema evolution, supports modern workflows, and enables precise data management for eCommerce and other digital projects.

Does Hygraph support multiplatform content management?

Yes, Hygraph supports multiplatform content management, allowing you to deliver content across various channels and devices. Its API-based architecture makes it easy to integrate with different frontend frameworks and platforms.

What is Smart Edge Cache and how does it improve performance?

Smart Edge Cache is a feature in Hygraph that enhances performance and accelerates content delivery, especially for high-traffic and global audiences. It ensures faster load times and improved reliability for eCommerce and other digital experiences.

How does Hygraph handle schema and content modeling?

Hygraph provides a flexible management API for creating schemas and content models. This allows you to define and manage your content structure efficiently, supporting complex use cases and integrations.

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 compliant (achieved August 3rd, 2022), ISO 27001 certified for hosting infrastructure, and GDPR compliant. These certifications ensure robust security and adherence to international standards.

What security features does Hygraph offer?

Hygraph provides granular permissions, SSO integrations, audit logs, encryption at rest and in transit, regular backups, and enterprise-grade compliance features. These measures protect customer data and support regulatory requirements.

Who can benefit from using Hygraph?

Hygraph is ideal for developers, product managers, and marketing teams in industries such as ecommerce, automotive, technology, food and beverage, and manufacturing. It is especially suited for organizations looking to modernize legacy tech stacks, scale content operations, and deliver exceptional digital experiences.

What problems does Hygraph solve?

Hygraph addresses operational inefficiencies (reducing developer dependency, streamlining workflows), financial challenges (lowering costs, accelerating speed-to-market), and technical issues (simplifying schema evolution, improving integration, optimizing performance, and enhancing localization and asset management).

Can you share some customer success stories with Hygraph?

Yes. Komax achieved a 3X faster time-to-market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement by 15%, and Stobag increased online revenue share from 15% to 70% after adopting Hygraph.

What KPIs and metrics are associated with Hygraph's solutions?

Key metrics include time saved on content updates, system uptime, speed of deployment, consistency in content across regions, user satisfaction scores, reduction in operational costs, ROI, time to market, maintenance costs, scalability metrics, and performance during peak usage.

How does Hygraph perform for high-traffic and global audiences?

Hygraph's Smart Edge Cache and high-performance endpoints ensure fast, reliable content delivery for high-traffic and global audiences. The platform continuously improves API performance and provides practical advice for developers to optimize usage.

Is Hygraph easy to use for non-technical users?

Yes, Hygraph is frequently praised for its intuitive user interface, making it accessible to both technical and non-technical users. Customers highlight its ease of setup and use, and Hygraph was recognized for 'Best Usability' in Summer 2023.

What support and resources are available for Hygraph users?

Hygraph offers 24/7 support via chat, email, and phone, real-time troubleshooting through Intercom chat, a community Slack channel, extensive documentation, webinars, live streams, how-to videos, and a dedicated Customer Success Manager for enterprise customers.

How easy is it to get started with Hygraph?

Hygraph provides a free API playground, a free forever developer account, and a structured onboarding process including introduction calls, account provisioning, business and technical kickoffs, and content schema setup. Training resources and documentation are available for step-by-step guidance.

How long does it take to implement Hygraph?

Implementation time varies by project scope. For example, Top Villas launched a new project within 2 months, and Si Vale met aggressive deadlines during their initial implementation. Hygraph's onboarding and training resources help accelerate adoption.

How does Hygraph handle maintenance, upgrades, and troubleshooting?

Hygraph is a cloud-based platform that handles all deployment, updates, security, and infrastructure maintenance. Upgrades are seamlessly integrated, and troubleshooting is supported via 24/7 support, Intercom chat, documentation, and a dedicated Customer Success Manager for enterprise clients.

Headless CMS for Hydrogen

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

Step #1 - Fetching content from a headless CMS in Hydrogen

To fetch the content from the Hygraph you can use Hydrogen's useShopQuery along with a GraphQL query to fetch data from a GraphQL API. The query requests a list of the first 10 products, including their id, title, description, image and slug.

This is done within a functional component named Products, which then passes the fetched data (data.products) to the ProductList component for rendering.

src/routes/products.jsx

import { useShopQuery, gql } from '@shopify/hydrogen';

export default function Products() {
  const { data } = useShopQuery({
    query: gql`
      query ProductsQuery {
        products(first: 10) {
          id
          title
          description
          slug
          image {
            url
          }
        }
      }
    `,
  });

  return <ProductList products={data.products} />;
}

Step #2 - Work with data in a Hydrogen component

The ProductList component receives the products data as a prop. The component first checks if the products data is available. If it is, it iterates over the products array using map, displaying each product's title, description, image and linking to it.

This approach ensures that the UI dynamically updates to show the products once the data is successfully fetched and provided by the Products component.

src/components/ProductList.jsx

export default function ProductList({ products }) {
  if (!products) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      {products.map((product) => (
        <a key={product.id} href={product.slug}>
          <img src={product.image.url} alt={product.title} />
          <h2>{product.title}</h2>
          <p>{product.description}</p>
        </a>
      ))}
    </div>
  );
}

Start building with Hydrogen and Hygraph

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

Quickstart

Check out our docs to see how you can quickly set up your Hygraph project and enable the content API for your Hydrogen eCommerce website.

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 in action.

See Examples

Why Hygraph

Choosing Hygraph for your Hydrogen project

Using a GraphQL-native headless CMS in conjunction with Shopify's Hydrogen framework offers significant advantages for eCommerce websites. For developers, it provides the flexibility to create rich, customized user experiences tailored to specific brand needs while efficiently managing data through GraphQL's powerful querying capabilities.

For content editors, a headless CMS decouples content management from the presentation layer, enabling them to update content seamlessly without affecting the site's layout or requiring developer intervention. This separation enhances content agility and allows for quicker updates, which is crucial in the dynamic world of eCommerce where timely content updates can significantly impact customer engagement and sales.

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

Frequently Asked Questions

Product Information & Integration