Headless CMS for Remix

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

Step #1 - Fetching the data from the headless CMS

First, you need to sets up a GraphQL client using the graphql-request library, configured with the Hygraph's Content API endpoint and authorization token. In a Remix route loader function, we define a GraphQL query to fetch specific fields of products, like name, description, and availability.

The client.request method executes this query, and the data is returned, making it available for the component to render.

// In a file like `utils/graphqlClient.js`

import { GraphQLClient } from 'graphql-request';

export const client = new GraphQLClient('YOUR_GRAPHQL_ENDPOINT', {
  headers: {
    authorization: 'Bearer YOUR_AUTH_TOKEN',
  },
});

// In your loader function in a route file like `routes/products.js`

import { client } from '~/utils/graphqlClient';

export const loader = async () => {
  const query = `
    query {
      products {
        name
        description
        image
        availability
        slug
      }
    }
  `;
  const data = await client.request(query);
  return data;
};

Step #2 - Displaying fetched data in a Remix component

Remix component uses the useLoaderData hook to access the data fetched by the loader function. This data includes an array of products. We use .map() to iterate over these products, rendering their details like name, description, and availability.

This demonstrates Remix's integration of server-side data fetching with client-side rendering.

import { useLoaderData } from '@remix-run/react';

export default function Products() {
  const { products } = useLoaderData();

  return (
    <div>
      {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' : 'Unavailable'}</p>
        </div>
      ))}
    </div>
  );
}

Start building with Remix

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

Quickstart

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

See Examples

Why Hygraph

Choosing Hygraph for your Remix project

Using a GraphQL-native headless CMS such as Hygraph in a Remix application offers significant benefits for both developers and content editors. For developers, GraphQL integration enables efficient and flexible data queries, allowing them to request exactly what's needed, reducing bandwidth and improving performance. This is particularly advantageous in a Remix environment, where server-side logic can seamlessly integrate with client-side interactivity.

For content editors, a headless CMS decouples content management from the presentation layer, offering a user-friendly interface to manage content without worrying about the underlying technology. This separation of concerns leads to a more streamlined content creation process and easier maintenance, as editors can update content independently from the application's codebase.

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