Frequently Asked Questions

Product Overview & Getting Started

What is Hygraph Examples and where can I find them?

Hygraph Examples is a dedicated collection of code samples and implementation guides available on GitHub. These examples demonstrate how to use Hygraph features with popular frontend frameworks like Next.js, Svelte, Gatsby, Vue.js, and more. They cover topics such as asset uploads, management SDK usage, remote fields, mutations, pagination, rich text rendering, union types, and integrations with tools like Algolia and Apollo Client. Learn more in the announcement blog post.

How can I get started with Hygraph?

You can get started with Hygraph by signing up for a free-forever account at app.hygraph.com. To help you onboard quickly, Hygraph provides comprehensive documentation, video tutorials, and onboarding guides. Explore the Hygraph Documentation and code examples for step-by-step instructions.

Features & Capabilities

What are the key features of Hygraph?

Hygraph offers a GraphQL-native architecture, content federation, scalability, and a fully typed GraphQL API for content management. Key features include asset uploads, management SDK, remote fields, mutations API, pagination, rich text rendering, union types, and integrations with popular frameworks and tools. For a full list, visit the Hygraph Features page.

Does Hygraph provide an API for content management?

Yes, Hygraph provides a powerful GraphQL API that allows you to fetch, create, update, delete, and publish content programmatically. The API is fully typed and supports advanced features like mutations, pagination, and remote fields. Learn more at the Hygraph API Reference.

What integrations are available with Hygraph?

Hygraph supports a wide range of integrations, including hosting and deployment (Netlify, Vercel), eCommerce (BigCommerce, commercetools, Shopify), localization (Lokalise, Crowdin, EasyTranslate, Smartling), digital asset management (Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot), personalization and AB testing (Ninetailed), artificial intelligence (AltText.ai), and more. For a full list, visit the Hygraph Integrations page.

What frameworks and libraries can I use with Hygraph?

Hygraph works seamlessly with popular frontend frameworks and libraries such as Next.js, Svelte, Gatsby, Vue.js, Nuxt.js, Express.js, Apollo Client, Apollo Server, Gridsome, Eleventy, Astro, Vanilla JS, and more. Example projects for each are available in the Hygraph Examples repository.

How does Hygraph optimize content delivery performance?

Hygraph emphasizes optimized content delivery performance, which directly impacts user experience, engagement, and search engine rankings. Rapid content distribution and responsiveness help reduce bounce rates and increase conversions. For more details, visit this page.

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 more details and to compare features, 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. These certifications ensure enterprise-grade security and data protection. Hygraph also offers SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments. For more details, visit the Hygraph Security Features page.

Use Cases & Customer Success

Who can benefit from using Hygraph?

Hygraph is ideal for developers, IT decision-makers, content creators, project/program managers, agencies, solution partners, and technology partners. Companies that benefit most include modern software companies, enterprises seeking to modernize their tech stack, and brands aiming to scale across geographies, improve development velocity, or re-platform from traditional solutions. See case studies.

What industries are represented in Hygraph's customer case studies?

Hygraph's case studies span industries such as food and beverage (Dr. Oetker), consumer electronics (Samsung), automotive (AutoWeb), healthcare (Vision Healthcare), travel and hospitality (HolidayCheck), media and publishing, eCommerce, SaaS (Bellhop), marketplace, education technology, and wellness and fitness. Explore all case studies.

Can you share specific customer success stories using Hygraph?

Yes. For example, Komax achieved a 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement with a scalable platform, and Dr. Oetker enhanced their digital experience using MACH architecture. Read more customer stories.

How long does it take to implement Hygraph and how easy is it to start?

Hygraph is designed for rapid implementation and ease of use. For instance, Top Villas launched a new project in just 2 months from the initial touchpoint. Customers can get started quickly by signing up for a free account and using onboarding resources. See documentation.

What feedback have customers given about Hygraph's ease of use?

Customers consistently praise Hygraph for its intuitive interface and ease of use. Feedback includes comments like "super easy to set up and use" and "even non-technical users can start using it right away." The user interface is described as logical and user-friendly, making it accessible for both technical and non-technical teams. Read more feedback.

Pain Points & Solutions

What problems does Hygraph solve?

Hygraph addresses operational pains (reliance on developers for content updates, outdated tech stacks, conflicting needs from global teams, clunky user experiences), financial pains (high operational costs, slow speed-to-market, expensive maintenance, scalability challenges), and technical pains (boilerplate code, overwhelming queries, evolving schemas, cache problems, OpenID integration challenges). For more details, visit the product page.

How does Hygraph solve these pain points?

Hygraph provides an intuitive interface for non-technical users, modernizes legacy tech stacks with its GraphQL-native architecture, ensures consistent branding via content federation, streamlines workflows to reduce costs, accelerates speed-to-market, and supports scalability. Technically, it simplifies development, streamlines query management, and resolves cache and integration challenges. Learn more.

What KPIs and metrics are associated with the pain points Hygraph solves?

Key metrics include time saved on content updates, number of updates made without developer intervention, system uptime, speed of deployment, consistency in content across regions, user satisfaction scores, reduction in operational costs, ROI on CMS investment, time to market for new products, maintenance costs, scalability metrics, and performance during peak usage. Read more about CMS KPIs.

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 detailed documentation, video tutorials, webinars, and a community Slack channel. Customer Success Managers are available to assist during onboarding. Contact Hygraph.

How does Hygraph handle maintenance, upgrades, and troubleshooting?

Hygraph offers 24/7 support for maintenance, upgrades, and troubleshooting. Enterprise customers benefit from dedicated onboarding and expert guidance, while all users can access documentation and community resources for self-service support. Learn more.

Company Vision & Mission

What is Hygraph's vision and mission?

Hygraph's vision is to unify data and enable content federation, empowering businesses to create impactful digital experiences. Its mission is to remove traditional content management pain points through a GraphQL-native architecture, providing tools for efficient data querying, scalability, and content federation. Learn more about Hygraph.

Documentation & Learning Resources

Where can I find technical documentation for Hygraph?

Comprehensive technical documentation is available at hygraph.com/docs. It covers everything you need to know about building and deploying projects with Hygraph.

Where can I find example projects for Hygraph?

Example projects are available in the Hygraph Examples repository on GitHub. These projects showcase how to use Hygraph with various tools and frameworks.

What resources does Hygraph offer for learning?

Hygraph offers code examples, quick video tutorials, webinars, and comprehensive documentation. Explore code examples and quick videos for hands-on learning.

Customer Proof & Case Studies

Who are some of Hygraph's customers?

Hygraph is trusted by companies such as Sennheiser, HolidayCheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. See more customer stories.

Webinar Event: How to Avoid Personalization Tech Traps

Announcing Hygraph Examples

In this post, we take an in-depth look at the Hygraph examples repo on Github and some of the tools that can work in tandem with Hygraph.
Jamie Barton

Written by Jamie 

Jan 11, 2022
announcing hygraph examples

With a growing ecosystem of frontend frameworks to pick from, thousands of APIs to connect with, and Hygraph features to use, our team has put together an ever-growing, dedicated collection of code examples on GitHub.

These examples cover everything from mutating and paginating content, to rendering images with popular JavaScript frameworks like Next.js, Svelte, and more.

Let’s take a look at what each of them do, where you can find them, and how you can get started.

#Hygraph Content API Features & Recipes

Asset Uploads

Hygraph exposes a content API asset upload endpoint that you can use to add assets to your project from outside of the Hygraph content editor.

This example uses a popular Node.js queue called Bee-Queue to process uploads. Teams who are uploading a lot of assets but are running into rate limiting may find this example useful to automatically retry their upload at a later time.

Management SDK

Everything you do once logged into Hygraph is powered by the Management API. This Management API is also used to create models, add fields, add enumerations, and more.

Hygraph provides a JavaScript SDK that lets you programmatically manage your Hygraph schema. This example demonstrates how you can instantiate the SDK, create models, add fields, and connect a relation between two models.

Using Remote Fields

When we introduced Content Federation, we realized developers also wanted the control to create remote fields using the Management SDK.

In this example, we did just that. We connect Hygraph with Stripe to automatically make a request to Stripe to get the data for a remote type we’ve created using the Management SDK.

As well as adding the field, you can specify the endpoint it should resolve to and any headers (such as Authorization) to go along with it.

Mutations API

Not many Headless Content Management Systems let you create, update, delete, and publish content from outside of their UI. Hygraph however goes a step further and provides a fully typed GraphQL API for you to do this.

This powerful API lends itself to all sorts of implementation ideas when it comes to publishing via an API. In this example, we let users vote on their favorite product, and each Vote is stored in Hygraph. The frontend code in this example uses a serverless function to relay the request onto Hygraph, so your API tokens are safe and secure.

Pagination

There will no doubt be a time where you need to paginate through data. Hygraph has made this very easy with built-in support for filtering the Content API.

Hygraph has a default result set size, which can be configured to a maximum of 1000 entries per page. In this example, we show how you can use the pagination filters to create typical prev/next page links you’d see on most paginated pages.

Using Rich Text

One of the most used Hygraph field types is Rich Text. I’ve previously written about working with the Rich Text field, but this example shows how you can use our Rich Text Renderer, a custom React package to render, and set custom embed components.

Union Types

Hygraph supports one of the more advanced GraphQL primitives called a union type. You may be familiar with polymorphic relations with other APIs, but being a headless GraphQL CMS, we provide the same familiarity with GraphQL by baking in native support for union types.

This example demonstrates how you can build a page using different Hygraph models (with their own fields) on a page as “blocks.”

This is extremely useful and powerful for those building marketing sites and enriching content with content from other models.

#Frameworks & Libraries

The examples below show how Hygraph works with some of the most popular frontend frameworks, libraries, and tooling.

Algolia

Quite often you’ll want blazing fast search. Algolia is a great choice for indexing your Hygraph content. Algolia has a UI library for a variety of languages and frameworks.

In this example, we show how you can use a serverless function (Next.js API route used here) to update your Algolia indices.

Apollo Client 3

For those with public content APIs, you can use Apollo Client to query data from Hygraph right inside of the browser, without the need for any middleware, or server side build.

Apollo Server

We’ve got the perfect example for those who already have their own GraphQL server and want to integrate Hygraph.

In this example, we use Apollo datasources to create a custom Hygraph datasource to fetch products from Hygraph using your API endpoint.

Express.js with Awesome GraphQL Client

If you’re working with a more traditional Node.js setup, libraries like Express.js make it really easy to create routes, fetch data, and render it using a variety of templating languages.

In this example, we’ll fetch all products from our example Hygraph project and link to individual product pages. We’ll use Express.js to handle routing, and Awesome GraphQL Client to fetch data from Hygraph.

Gatsby

If you’re working with the popular React Static Site Generator Gatsby, this example shows how you can use the native gatsby-source-hygraph plugin to query your project's content.

Gatsby projects are mostly built using plugins. It’s a quick install, and configuration with your project details. It also supports localization, content stages, and more.

Gatsby File System Route API

Gatsby gives developers great tools to build pages without much configuration. In this example, we’ll use the File System Route API with Gatsby to create pages automatically. This is done by following a naming convention that matches our Hygraph node types in our pages directory.

Gatsby Image

Gatsby has extensive support for remote and local images. In this example, we use the gatsby-image plugin to show image assets from Hygraph right inside of our Gatsby pages.

This example uses the gatsby-source-grahcms plugin to source data.

Gatsby with MDX

MDX is Markdown for the component era. It gives you the ability to render React components (or JSX as it's known) within your Markdown.

Since Hygraph supports the Markdown field, we can invoke it and let Gatsby + MDX render these inside of our pages.

Hygraph React Image

Those who are working with React and looking for a way to render images with optimized lazy loading and “blur up” out of the box should consider adding @hygraph/react-image to your application.

This example uses our example Hygraph project for products, and shows product images on a page.

GraphQL Code Generator

Writing types for all of your GraphQL queries by hand is time consuming. Thankfully the GraphQL Code Generator can take care of this and more.

This example demonstrates how to automatically generate code for Apollo Client and TypeScript.

GraphQL Mesh

GraphQL Mesh is a popular project that lets you query data from anywhere. It automatically builds a GraphQL API for any specification you throw at it. Whether it be a Mongoose model, or a OpenAPI spec, you’ll get a fully functional GraphQL API with transport taken care of.

In this example, we use GraphQL Mesh to stitch the Hygraph schema with 2 other GraphQL APIs. You can then query GraphQL Mesh directly or using the SDK (with baked in GraphQL Code Generator).

Gridsome

The popular Jamstack framework for Vue.js “Gridsome” works with Hygraph via the GraphQL plugin. Similar to Gatsby, Gridsome is a Static Site Generator that works with plugins to compile a static output on deployment, giving users a blazing fast experience when navigating your site.

In this example, we’ll query for some products and a product by slug on its own page.

Next.js

React continues to dominate the JavaScript ecosystem for front-end framework options. Next.js is an excellent minimalist framework for React that gives you all of the tools to build static, and dynamic sites.

If you’re used to building with a full stack framework, Next.js combined with Hygraph offers a similar experience. In this example, Hygraph will take care of the backend, and Next.js will take care of creating static pages for all products and individual product pages, all of which rebuild on-demand after a period of time.

Next.js with MDX

Similar to the example with Gatsby, here we’ll use Next.js and the packages next-mdx-remote & he to build MDX nodes from Hygraph to render in your Next.js application.

In this example, we’ll render our product pages and show a custom <Test /> component inside of the product description on the product display page.

Next.js Internationalized Routing

Next.js features built-in internationalized routing capabilities that can work with Hygraph localizations. This example shows how we can have products in several locales inside of Hygraph and configure them with Next.js to use the same locales

We can prefix routes for our products and show the applicable localized content.

Next.js Image

The next/image component is a popular choice for Next.js developers to render images that are sourced locally or in our case, remotely.

This component enables improved performance, visual stability, faster page loads, and much more.

In this example, we’ll render some product images using the Next.js image component.

Next.js Image with custom loader

Similar to the Next.js Image component above to render images, in this example we’ll use the Hygraph Asset CDN to deliver images. This gives us the ability to use Hygraph asset transformations, instead of relying on Next.js to do it.

Nuxt.js

Similar to React, Vue has its fair share of frontend frameworks to help organize, and structure well written apps. In this example, we’ll use our example products Hygraph project to automatically list out all products, and our single product pages using the Nuxt.js routing conventions.

Create React App

If you’ve been working with React long enough you’ll remember when Dan first introduced us to Create React App, removing all of the configuration, and giving us some strong React conventions to follow.

In this example we’ll do the same as what we’ve done previously, but this time load data on the client, similar to how we do with Apollo Client, and render it with React.

Vue.js

Similar to what we did with Create React App, we’ll use the native Vue primitives to build an app that can serve products on a single page, as well as individual pages with some built-in routing support.

In this example, we bind a Hygraph instance of graphql-request as a mixin inside of our app. We can then use this to make any queries by hooking into Vue on each of our routes.

SvelteKit

The increasingly popular Svelte application framework SvelteKit is great if you want to build apps with a smaller footprint.

In this example, we’ll create an instance of graphql-request and use this to query Hygraph on the server inside of the load hooks provided by SvelteKit.

SvelteKit with URQL

The dependency we used above with the graphql-request example is very barebones. Here we use a powerful GraphQL Client, “URQL” to handle communication between our app, and Hygraph.

SvelteKit with Houdini

Simply install the Houdini plugin with your Svelte application, and instantly see results when working with GraphQL thanks to its impressive fast compiler, and type generation support.

If you like working with GraphQL Code Generator, and having the type safety when building Svelte apps, Houdini is a great alternative.

Eleventy

Eleventy promises a simpler Static Site Generator. If you’re used to working with traditional, battle tested template languages and need to source GraphQL data for your pages, this example shows how you can do that.

Astro

Astro is another static site builder built for the modern web, priding itself on powerful developer experience and less JavaScript output builds.

In this example, we’ll use our Hygraph project for sourcing products and fetch them inside of an Astro build using native fetch.

Vanilla JS

If you have been around long enough before the frontend framework wars, you’ll remember what it was like to ship JavaScript you write (and minify if you’re lucky) to the browser.

In this example, we’ll fetch a list of products inside of the browser using the native fetch API.

NextAuth.js

Using the Hygraph Mutations API, and combined with the Mutations example above, we can build a user facing app with Next.js + NextAuth.js that allows users to register and login using Hygraph as a database.

#Contributing

There are over a dozen examples and growing. If you don’t see something you’re looking for, let us know, and if you’re working with any Hygraph features, or tools not listed above, you can contribute to this list by opening a Pull Request on GitHub.

Blog Author

Jamie Barton

Jamie Barton

Jamie is a software engineer turned developer advocate. Born and bred in North East England, he loves learning and teaching others through video and written tutorials. Jamie currently publishes Weekly GraphQL Screencasts.

Share with others

Sign up for our newsletter!

Be the first to know about releases and industry news and insights.