Frequently Asked Questions

Remix + Hygraph Implementation

What is Remix and how does it work with Hygraph?

Remix is a modern React-based web framework focused on developer experience and performance. When integrated with Hygraph, Remix leverages server-side rendering, efficient data loading, and seamless backend integration to build fast, scalable, and interactive web applications. For more details, see the Remix + Hygraph Overview.

How do I create a new Remix app for use with Hygraph?

To create a new Remix app, use the following command in your terminal: npx create-remix@latest --template remix-run/remix/templates/remix-javascript for JavaScript, or npx create-remix@latest for TypeScript. This initializes your project structure for Remix development. For step-by-step instructions, visit the official guide.

How do I add Tailwind CSS to my Remix app?

Install Tailwind CSS, PostCSS, and Autoprefixer by running npm install tailwindcss postcss autoprefixer -D && npx tailwindcss init. Update your tailwind.config.js and postcss.config.cjs files as described in the documentation, and import app/tailwind.css in your app/root.jsx. For full instructions, see Add Tailwind CSS to your Remix app.

How do I connect my Remix app to Hygraph and fetch data?

First, clone the Hygraph demo project. Then, configure Content API access permissions in your Hygraph project settings. Copy the High Performance Content API endpoint and save it as VITE_HYGRAPH_URL in your .env file. Use a GraphQL client like graphql-request to fetch data from Hygraph. For a detailed walkthrough, see Connecting Remix to Hygraph.

How do I create dynamic page routes in Remix using Hygraph data?

Create a file called page.$slug.jsx or page.$slug.tsx in your app/routes directory. Use the GraphQL client to fetch page data from Hygraph and render it dynamically based on the slug. This enables you to display content for each page entry from Hygraph. For code examples, see Creating dynamic page routes with Remix.

Where can I find starter projects and code examples for Remix + Hygraph?

You can clone a starter project directly from Hygraph or explore code examples in the documentation. Visit Remix Documentation Starter and Remix Starters for ready-to-use templates.

Features & Capabilities

What are the key features of Hygraph?

Hygraph offers a GraphQL-native architecture, content federation, scalability, and a user-friendly interface. It supports integrations with platforms like Netlify, Vercel, Shopify, BigCommerce, and more. Hygraph also provides enterprise-grade security, audit logs, SSO, and compliance certifications. For a full list of features, visit Hygraph Features.

Does Hygraph provide a GraphQL API?

Yes, Hygraph provides a powerful GraphQL API for efficient content fetching and management. Learn more at the Hygraph API Reference.

What integrations are available with Hygraph?

Hygraph integrates with hosting platforms (Netlify, Vercel), eCommerce solutions (Shopify, BigCommerce, commercetools), localization tools (Lokalise, Crowdin, EasyTranslate, Smartling), digital asset management (Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot), personalization (Ninetailed), AI (AltText.ai), and more. See the full list at Hygraph Integrations.

Pricing & Plans

What is Hygraph's pricing model?

Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans. For details, visit the Hygraph Pricing Page.

Security & Compliance

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. It offers SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments. For more, visit Hygraph Security Features.

Use Cases & Benefits

Who can benefit from using Hygraph?

Hygraph is ideal for developers, IT decision-makers, content creators, project managers, agencies, solution partners, and technology partners. It serves modern software companies, enterprises modernizing their tech stack, and brands scaling across geographies. For more, see Hygraph Case Studies.

What business impact can customers expect from Hygraph?

Customers can expect time savings, faster speed-to-market, improved operational efficiency, and enhanced customer experience through scalable and consistent content delivery. For example, Komax achieved 3X faster time to market, and Autoweb saw a 20% increase in website monetization. See more success stories here.

Support & Implementation

What support and training does Hygraph offer?

Hygraph provides 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to documentation, video tutorials, and a community Slack channel. For more, visit Hygraph Contact Page.

How easy is it to get started with Hygraph?

Hygraph is designed for quick onboarding. Non-technical users can start immediately, and resources like documentation and onboarding guides are available. For example, Top Villas launched a new project in just 2 months. Sign up for a free account at Hygraph Platform.

Customer Proof & Case Studies

Who are some of Hygraph's customers?

Hygraph is trusted by brands such as Sennheiser, HolidayCheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. Explore more at Hygraph Case Studies.

What industries are represented in Hygraph's case studies?

Industries include food and beverage, consumer electronics, automotive, healthcare, travel and hospitality, media and publishing, eCommerce, SaaS, marketplace, education technology, and wellness and fitness. See all case studies here.

Technical Documentation & Resources

Where can I find technical documentation for Hygraph?

Comprehensive technical documentation is available at Hygraph Documentation, including implementation guides for different frameworks and API references.

Where can I find implementation guides for different frameworks?

Implementation guides for frameworks like Remix, Next.js, Nuxt, Astro, and more are available in the Implementations section of the Hygraph documentation.

Help teams manage content creation and approval in a clear and structured way
Hygraph
Docs

#Remix + Hygraph

#Overview

Remix is a modern web framework that focuses on developer experience and performance by leveraging a React-based approach to build web applications and UIs. It emphasizes server-side rendering, efficient data loading, and seamless integration with various backends and cloud environments to create fast, scalable, and interactive web experiences.

#Creating a new Remix app

To initialize a new Remix project using Javascript, use the JS template flag.

Open up your terminal, navigate to where you want your project, and run the following command:

npx create-remix@latest --template remix-run/remix/templates/remix-javascript

Remix app using TypeScript:

npx create-remix@latest

#Add Tailwind CSS to your Remix app

  1. To add Tailwind CSS to your Remix app, run the following command:

    npx install tailwindcss postcss autoprefixer -D && npx tailwindcss init
  2. Update the tailwind.config.js file to reflect the following:

    /** @type {import('tailwindcss').Config} */
    export default {
    content: ["./app/**/*.{js,jsx,ts,tsx}"],
    theme: {
    extend: {}
    },
    plugins: []
    };
  3. Create a postcss.config.cjs file in the root of your project with the following code:

    module.exports = {
    plugins: {
    tailwindcss: {},
    autoprefixer: {},
    },
    };
  4. Update the app/tailwind.css file (or create it if it doesn't exist), to import Tailwind's styles:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
  5. Finally, make sure to import the app/tailwind.css file in your app/root.jsx file:

    import "./tailwind.css";

Now, you should be able to use Tailwind CSS classes in your Remix app.

#Getting data from Hygraph

Now that you have created your Remix app, it's time to add some data from Hygraph. Start by cloning our demo Hygraph project:

Click here to clone the demo project

After cloning, you will have a simple project that contains one content model called Page that contains fields for Title, Slug, and Body; and one content entry.

If you navigate to the Schema builder and click on the Page model, you will see this:

Demo project - Page modelDemo project - Page model

And if you navigate to the Content editor and view the sample entry details, you'll see this:

Demo project - Sample content entryDemo project - Sample content entry

#Content API

Before you can connect Remix to Hygraph, you will need to configure Content API access permissions for unauthenticated requests.

To do this, go Project settings > Access > API Access > Content API in your Hygraph project, scroll to find the Content Permissions box that reads Would you like us to initialize some defaults?, and click Yes, initialize defaults:

Content API permissionsContent API permissions

Finally, copy the High Performance Content API endpoint from Project settings > Access > API Access > Endpoints. You use it to connect Remix to Hygraph later on.

#Testing a query in the API playground

Next, you should test if you can fetch the information in the sample content entry that we showed you earlier. To do this, navigate to the API Playground in your project and use the following query:

If you execute the query, the response should fetch the sample query in the demo project you cloned.

#Connecting Remix to Hygraph

In Remix, save your VITE_HYGRAPH_URL in an .env file on the project root.

As a result, you will be able to call this key with process.env.VITE_HYGRAPH_URL in any of your files.

This will be where we paste the endpoint URL we copied from Hygraph:

VITE_HYGRAPH_URL=https://<HYGRAPH_CDN_LOCATION>.cdn.hygraph.com/content/<ID>/master

Your root directory will include the following files:

remix/
┣ app/
┣ node_modules/
public/
.env
.eslintrc.cjs
.gitignore
README.md
package-lock.json
package.json
┣ postcss.config.cjs
┣ tailwind.config.js
┗ vite.config.js

Want to see Remix and Hygraph in action? Watch a quick video on how to connect Remix and Hygraph:

#Generating Hygraph content with Remix

After enabling API access, you can start using the Pages query with your Remix app to render content.

#Installing a GraphQL Client

GraphQL clients make communication easier by abstracting away small details and implementing additional features such as static typing of our query results.

We will use the npm package graphql-request because it is lightweight, has excellent TypeScript support, and supports both Node.js and browsers.

Use the terminal to go back to your Remix app, and type the following command:

npm i -D graphql-request graphql

This will install a GraphQL client.

#Getting a list of pages for the homepage

After installing the GraphQL client, go to the app/routes directory and modify or create a file called _index.jsx or _index.jsx if you are using TypeScript, and add the following code:

Code overview for the homepage

The code you just added creates a query function that fetches a list of pages from Hygraph and renders them on the homepage as a bulleted list of links.

When you run your Remix app by using the command npm run dev, you should get a list of pages on the homepage.

HomepageHomepage

#Creating dynamic page routes with Remix

Now, that we have a list of pages in our homepage, we need to create a dynamic route for each page. To do this, create a new file in the app/routes directory called page.$slug.jsx or page.$slug.tsx. When finished, your source directory should resemble the following structure:

// Remix app directory structure
app/
┣ routes/
┃ ┣ _index.tsx
┃ ┗ page.$slug.tsx
┣ entry.client.tsx
┣ entry.server.tsx
┣ root.tsx
┗ tailwind.css

Add the following code to your page.$slug.jsx or page.$slug.tsx file:

Code overview for dynamic page route

The code you just added will create a dynamic route for each page. It will fetch the page content from Hygraph and render it on the page.

When you run your Remix app by using the command npm run dev, you should be able to see the page content when you click on a page link.

Dynamic pageDynamic page

Congratulations! You have a homepage and a dynamic page route to render all pages and their content.