Hygraph is a GraphQL-native headless content management system (CMS) that enables you to model, manage, and deliver content via APIs. In the Hasura Fit tutorial, Hygraph is used to model editorial and product content, while Hasura acts as the application's backend, federating schemas and enabling seamless integration through GraphQL. This allows for composed, distributed APIs and services, leveraging both platforms' strengths in content management and backend automation. Source
What is the Hasura Fit tutorial and what does it demonstrate?
The Hasura Fit tutorial is a multi-part series that demonstrates how to build a fitness app using modern web technologies. It integrates user accounts via Auth0, user data via Hasura, editorial content via Hygraph, serverless functions via Vercel, and the React framework NextJs. The tutorial shows how to set up and federate schemas between Hasura and Hygraph for a composable, scalable application. Source
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, AWS S3, Cloudinary, and more. Hygraph also provides robust security features, including SOC 2 Type 2, ISO 27001, and GDPR compliance, as well as SSO, audit logs, and encryption. Learn more
Does Hygraph provide an API?
Yes, Hygraph provides a powerful GraphQL API for efficient content fetching and management. This API enables seamless integration with other platforms and supports advanced querying capabilities. API Reference
What integrations does Hygraph support?
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 (Ninetailed), AI (AltText.ai), and more. See all integrations
How does Hygraph ensure performance and scalability?
Hygraph is optimized for rapid content delivery, which improves user experience, engagement, and search engine rankings. Its architecture supports high scalability, enabling businesses to handle peak usage and growth without performance degradation. Learn more
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 detailed pricing and feature breakdowns, visit the Hygraph pricing page.
Use Cases & Benefits
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. It is especially beneficial for modern software companies, enterprises modernizing their tech stack, and brands looking to scale across geographies or re-platform from traditional solutions. Learn more
What business impact can customers expect from using Hygraph?
Customers can expect significant time savings, streamlined workflows, faster speed-to-market, and enhanced customer experience through consistent and scalable content delivery. These benefits help businesses modernize their tech stack and achieve operational efficiency. Source
What industries are represented in Hygraph's case studies?
Hygraph's case studies span industries such as food and beverage, consumer electronics, automotive, healthcare, travel and hospitality, media and publishing, eCommerce, SaaS, marketplace, education technology, and wellness and fitness. See case studies
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 with a scalable platform, and Dr. Oetker enhanced their digital experience using MACH architecture. Read more
Pain Points & Solutions
What problems does Hygraph solve?
Hygraph addresses operational pains (reducing reliance on developers, modernizing legacy tech stacks, supporting global teams, improving content creation UX), financial pains (lowering operational costs, speeding time-to-market, reducing maintenance, supporting scalability), and technical pains (simplifying development, streamlining queries, resolving cache and integration challenges). Learn more
How does Hygraph solve pain points for different personas?
For developers, Hygraph reduces boilerplate code and streamlines query management. For content creators and project managers, it offers an intuitive interface for independent content updates. For business stakeholders, it lowers operational costs, supports scalability, and accelerates speed to market. Details here
What KPIs and metrics are associated with the pain points Hygraph solves?
Key metrics include time saved on content updates, system uptime, content consistency across regions, user satisfaction scores, reduction in operational costs, time to market, maintenance costs, and scalability performance. See more on KPIs
Technical Requirements & Implementation
How easy is it to get started with Hygraph?
Hygraph is designed for quick setup, even for non-technical users. You can sign up for a free account and use documentation, video tutorials, and onboarding guides to get started. For example, Top Villas launched a new project in just 2 months. Documentation
What technical documentation is available for Hygraph?
Hygraph provides comprehensive technical documentation covering setup, API usage, integrations, and advanced features. Access the documentation at Hygraph Documentation.
How do you set up a schema with Hygraph?
Setting up a schema with Hygraph can be done in minutes, providing flexibility to support a wide range of applications. The platform allows you to connect data sources without complicated configuration, making it accessible for users of all technical backgrounds. Learn more
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 high levels of data protection and security for users. Security Features
How does Hygraph protect sensitive data?
Hygraph provides enterprise-grade security features, including SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments to protect sensitive data and meet regulatory standards. Learn more
Support & Implementation
What customer support is available after purchasing Hygraph?
Hygraph offers 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, and a community Slack channel. Contact Hygraph
What training and onboarding resources does Hygraph provide?
Hygraph provides onboarding sessions for enterprise customers, training resources such as video tutorials, documentation, webinars, and access to Customer Success Managers for expert guidance during onboarding. Learn more
Customer Proof
Who are some of Hygraph's customers?
Hygraph is trusted by leading brands such as Sennheiser, Holidaycheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. See customer stories
Competition & Comparison
How does Hygraph differentiate itself from other CMS solutions?
Hygraph stands out with its GraphQL-native architecture, content federation, and scalability. It empowers non-technical users, reduces operational costs, accelerates speed to market, and supports modern development practices, making it a strong choice for businesses seeking flexibility and efficiency. Learn more
In this step of our multi-part tutorial, we are going to configure Hasura as our application’s back-end. Hasura is an open-source, GraphQL flavored “back-end-as-a-service” which plays very well with Hygraph given they both share the GraphQL underpinnings.
Written by Jesse
on Aug 15, 2020
In this step of our multi-part tutorial, we are going to configure Hasura as our application’s back-end. Hasura is an open-source, GraphQL flavored “back-end-as-a-service” which plays very well with Hygraph given they both share the GraphQL underpinnings. The back-end-as-a-service simply means that we’ll get a thin UI sitting on top of our database and be offered some user-friendly features, such as taking advantage of Postgres’ hook system but with the convenience of a UI and some additional USPs from the BaaS provider.
Apart from the above-mentioned reason that Hasura has native support for GraphQL, Hasura also released a new feature called ‘remote joins’ which allows us to essentially federate our schemas without having to annotate the schemas. If you’re unfamiliar with the federation concept, it basically means that each “section” or “group of concerns” of our application would be split into multiple schemas. These schemas could be developed in isolation of each other since they are often maintained by different teams with a different set of concerns and stakeholders.
Typically, you’d need to provide some kind “decoration”, in GraphQL this is done with directives, to tell one schema when to look at another schema for the answers. In traditional database design, this would be identifying a foreign key when one table needs to look at another table.
In Hasura, we have the convenience of simply providing our API URL, and through the power of GraphQL’s introspection (the ability to understand everything an API makes available to us), the Hasura tooling lets us use a very convenient drop-down to identify which field needs to be connected to our schema. This will be covered a little more later.
Lastly, the reason we chose Hasura is that it has built-in support for authentication and user permissions, which will be important to this application since we have multiple users creating their own, private content.
To begin, we are going to use the newly released Hasura cloud to quickly set-up a new instance of Hasura. You could just as easily use their deployable solution on Heroku (our database will be hosted there, anyways) or any other server stack supported by them, but we’ll focus on the cloud version to keep things simple.
You’ll need to authenticate (or create an account with Heroku first) after which the Hasura Cloud interface will do automated provisioning for you.
Once you create the project, the app will go through a number of installation steps (all automated) and then prompt you to launch the console (main application) of Hasura. When you launch the console, it will open in a new tab, return to the Hasura Cloud UI to add our environment variables.
Note various values available to you here.
We will need to create a few variables for this project:
HYGRAPH_FULL_ACCESS_TOKEN
This is our access token from Hygraph which we defined in our Hygraph API. Note, you’ll need to use the format Bearer <TOKEN_VALUE> since we use the full string as Hasura’s env values don’t allow us to use string interpolation.
HASURA_GRAPHQL_ADMIN_SECRET
For protecting our console (if we aren’t using Hasura Cloud) and also for protecting synchronizing function from Auth0.
HASURA_GRAPHQL_JWT_SECRET
Our application will use tokens from Auth0 to authorize our requests to Hasura. We need to configure Hasura to recognize Auth0’s JWT format. To do this, provide the following value as the environment variable:
Replacing <YOUR_AUTH0_DOMAIN> with your actual Auth0 application domain.
HASURA_GRAPHQL_UNAUTHORIZED_ROLE
Define this as “public” - which means that users who attempt to access our API without authentication will be assigned the “public” role, which we can assign specific privileges for in our database.
The majority of our product or editorial content was modeled in Hygraph. We’ll simply use two models (or tables) in Hasura. Our user table, which is populated from Auth0 plus an additional array relationship called sessions to a table also called sessions.
An array relation simply means that we are defining a one-to-many or many-to-many relation. If we were creating a many-to-one or a one-to-one this would be an object relation.
You’ll note in the session table above, we defined a workout “slug” - this will serve as our foreign key for Hygraph when we define a remote schema relationship. Defining and federating a remote schema couldn’t be easier in Hasura. To enable our Remote schema, go to the “remote schema” tab at the top of the window, and add in the values, your settings should be similar to the attached graphic.
Note that for the Authorization header, we are using a value from our environment, our HYGRAPH_FULL_ACCESS_TOKEN.
Return to the relationship tab of the sessions table. At the bottom of the tab window, there’s a section called “Remote Relationships.”
Name the field “workout” and choose the Remote Schema of Hygraph (or whatever you labeled the remote schema in the previous step).
The trick here is that we are passing the value to the slug input argument of our where input type. The slug value is coming from the slug column of our session.
We use a webhook in the project to perform a sort of “pre-calculated aggregation” of the popularity of our workouts. This allows us to sort by popularity without needing to touch our user database if we were to distribute our Hygraph API to another location that was un-aware of our Hasura project. In Hasura, these are called “Events”.
We define the trigger to occur when the table sessions receive a new insert and then we send a payload to the Web-hook URL defined.
There are some limitations to the remote schema joins for now. One of which is that you cannot use secure roles in the fields of a remote join. That is, you can’t extend the access controls from Hasura to the fields of Hygraph. Hasura is working to enable this as is Hygraph.
There are also some notable gotchas:
No exposed ID Type
Their ID scalar is not exposed by Hasura so we wouldn’t be able to use the direct ID of the workout entry from Hygraph since meshing them would cause a type incompatibility error (even though both read as a text string.) That means we needed to create a slug entry in our Hygraph model to support matching a foreign key from Hasura.
Required Fields
Because the input argument type where is required by Hygraph for filtering by workout, we have to pass this value in as an empty argument when querying content, even though it is dynamically inserted at run-time. It’s less elegant than it could be, but a small price to pay for the amazing flexibility of adding a meshed-in third-party API.
That's it! You've made it to the end. Now you have all the pieces you need to create elegant, composed, distributed, and iterative APIs and services. Tweet out your success or check out Hygraph for even more great resources.
Blog Author
Jesse Martin
Share with others
Sign up for our newsletter!
Be the first to know about releases and industry news and insights.