Frequently Asked Questions

Product Information

What is Hygraph?

Hygraph is a GraphQL-native headless content management system (CMS) designed to unify data and enable content federation. It empowers businesses to create impactful digital experiences by removing traditional content management pain points and offering scalability, flexibility, and efficient data querying. Learn more.

What is the primary purpose of Hygraph?

The primary purpose of Hygraph is to unify data and enable content federation, allowing businesses to deliver modern digital experiences at scale. Its GraphQL-native architecture removes traditional CMS limitations and supports efficient, flexible content management. Source.

Does Hygraph provide an API?

Yes, Hygraph offers a powerful GraphQL API for efficient content fetching and management. You can find detailed API documentation at the Hygraph API Reference.

Where can I find technical documentation for Hygraph?

Comprehensive technical documentation for Hygraph is available at https://hygraph.com/docs. It covers everything from getting started to advanced integrations and deployment.

Features & Capabilities

What are the key features and capabilities of Hygraph?

Hygraph provides a GraphQL-native architecture, content federation, and scalability. Key benefits include faster speed-to-market, control at scale, and lower total cost of ownership. For a full list of features, visit the Hygraph Features page.

What integrations does Hygraph support?

Hygraph supports a wide range of integrations, including:
Hosting & Deployment: Netlify, Vercel
Headless Commerce & eCommerce: BigCommerce, commercetools, Shopify
Localization: Lokalise, Crowdin, EasyTranslate, Smartling
Digital Asset Management: Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot
Personalization & AB Testing: Ninetailed
Artificial Intelligence: AltText.ai
Miscellaneous: Adminix, Plasmic
For more details, visit the Hygraph Integrations page.

How does Hygraph ensure optimized content delivery performance?

Hygraph emphasizes rapid content distribution and responsiveness, which directly impacts user experience, engagement, and search engine rankings. Optimized delivery reduces bounce rates and increases conversions. Learn more.

Is Hygraph easy to use for non-technical users?

Yes, Hygraph is praised for its intuitive and user-friendly interface. Customers report that it is 'super easy to set up and use,' and even non-technical users can start using it right away. Source.

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. For more details, visit the Hygraph Security Features page.

How does Hygraph protect sensitive data?

Hygraph provides robust security features such as SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments to protect sensitive data and meet regulatory standards. 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 full details, 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 seeking to modernize their tech stack, and brands aiming to scale across geographies or re-platform from traditional solutions. Source.

What business impact can customers expect from using Hygraph?

Customers can expect significant time savings, faster speed-to-market, improved operational efficiency, and enhanced customer experience through consistent and scalable content delivery. Source.

What industries are represented in Hygraph's 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. 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.

Who are some of Hygraph's customers?

Notable customers include Sennheiser, Holidaycheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. See more.

Pain Points & Solutions

What problems does Hygraph solve?

Hygraph addresses operational pains (like reliance on developers for content updates, outdated tech stacks, and clunky content creation), financial pains (high operational costs, slow speed-to-market, expensive maintenance, and scalability challenges), and technical pains (boilerplate code, overwhelming queries, evolving schemas, cache problems, and OpenID integration challenges). Learn more.

How does Hygraph solve these pain points?

Hygraph provides an intuitive interface for non-technical users, modernizes legacy systems with its GraphQL-native, API-first architecture, ensures consistent branding across regions, streamlines workflows to reduce costs, accelerates project delivery, minimizes maintenance, and supports scalability. It also simplifies development by reducing boilerplate code and streamlining query management. Source.

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, time to market, maintenance costs, scalability metrics, and performance during peak usage. Read more.

Do the pain points solved by Hygraph differ by persona?

Yes. For developers, Hygraph reduces boilerplate code and streamlines queries. For content creators and project managers, it empowers non-technical users to update content independently. For business stakeholders, it reduces operational costs, supports scalability, and accelerates speed to market. Source.

Implementation & Onboarding

How easy is it to get started with Hygraph?

Customers can get started easily by signing up for a free-forever account. Resources like documentation, video tutorials, and onboarding guides are available. For example, Top Villas launched a new project in just 2 months from the initial touchpoint. Documentation | Case Study.

What training and technical support 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, webinars, and a community Slack channel. Contact Support.

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 detailed documentation and the community Slack channel. Learn more.

Competition & Differentiation

How does Hygraph differentiate itself from other CMS platforms?

Hygraph stands out with its GraphQL-native architecture, content federation, and scalability. It empowers non-technical users, modernizes legacy systems, ensures consistent branding across regions, and streamlines workflows to reduce costs and accelerate project delivery. Learn more.

Webinar Event: How to Avoid Personalization Tech Traps

Hasura Fit: Setting up the Auth Flow

In this part of our tutorial, we’ll be adding the authentication layer to our web app which lets us leverage the power of Auth0 and their social sign-on ecosystem of tooling to let us, onboard users, quickly and easily.
Jesse Martin

Written by Jesse 

Aug 11, 2020
Hygraph, Hasura, Auth0, NextJS, Vercel

Special thanks to Sam Bellen for helping me troubleshoot some tricky parts of the Auth0 ecosystem.

In this part of our tutorial, we’ll be adding the authentication layer to our web app which lets us leverage the power of Auth0 and their social sign-on ecosystem of tooling to let us, onboard users, quickly and easily.

A core tenant of modern web application architecture is “do not write your own authentication” - basically, it’s a problem that’s easy enough to get wrong and also easy enough to make you think you got it right. Find either an open-source platform where hundreds of developers contribute to the robustness of the code-base or a SaaS company for essentially the same reasons but when you need an SLA or a few convenience features behind it.

Prior Art:
https://github.com/auth0/nextjs-auth0

#Why Auth0?

Auth0 has been one of the mainstay players in the authentication space for a while, they support nearly every type of “single sign-on” - which just means re-using an account from something like your workplace or Facebook - and they have excellent developer tooling to help us integrate with our stack. They handle password resets/forgets, generating custom scope in our Auth tokens (we’ll cover this in a few moments) and more.

If you need an enterprise-grade Auth library (or a generous free tier with reasonable pricing for your side projects) - Auth0 is a great solution.

#Creating an Account

The first thing you need to do is create an account with Auth0, after that, you need to create an Application. From the applications tab of your project, you can click on “Create Application”.

Note: It’s critical you choose “Regular Web Application” as we’ll be working with server-side authorization and the library we are using expects “Authorization Code

Understanding the different types of authentication flows

Choosing SPA would result in a PKCE flow, which returns a shape of data our library isn’t expecting and is also not needed since we are authorizing server side. PKCE simply adds an additional layer of indirection before the exchange of tokens occurs.

#Account Settings

The “variables” will differ for production context, but all things held constant, your localhost will stay the same.

We only need to handle the settings for Allowed Callback URLs (where we return to after authentication) and the allowed Logout URLs (where we return to after logging out.)

Web origins is only for contexts where the Sign-On form is EMBEDDED in the application and by default, all our allowed URLs are included in CORS.

Allowed CallbackURL. Localhost: http://localhost:3000/api/callback. Vercel: https://gcms-hasura-fit-*.vercel.app/api/callback.

Using an asterisk (*) in the URL is known as a wildcard and this allows you to match all urls that match the first-half before the asterisk and the last half after the asterisk and anything in the middle. This is done so that if you want to use continuous deployment (where you get a deploy every time you push code to a code repository like Github) you’ll get previews in both your master branch and any other branches where you might test out new features.

 Allowed Logout URLs. Localhost: http://localhost:3000. Vercel: https://gcms-hasura-fit-*.vercel.app.

#Understanding our Auth Config

In our NextJS project we have abstracted the authentication service as a library under our /lib directory where we can call our auth service from multiple places in our application. To communicate with Auth0 - we will use their SDK (software development kit) to send requests to Auth0 in the correct shape.

The init method looks like this:

const auth0Instance = initAuth0({
clientId: config.AUTH0_CLIENT_ID,
clientSecret: config.AUTH0_CLIENT_SECRET,
scope: config.AUTH0_SCOPE,
domain: config.AUTH0_DOMAIN,
redirectUri: config.REDIRECT_URI,
audience: "https://hasura-fit.herokuapp.com",
postLogoutRedirectUri: config.POST_LOGOUT_REDIRECT_URI,
session: {
cookieSecret: config.SESSION_COOKIE_SECRET,
cookieLifetime: config.SESSION_COOKIE_LIFETIME,
storeIdToken: true,
storeRefreshToken: true,
storeAccessToken: true,
},
});

Client Secrets and IDs

Auth0 is a hosted application (SaaS) which has many different projects in their database. To tell Auth0 which one is yours, you need to use the ID and the Secret they gave you in your signup process to properly identify which project in their servers is yours.

Scopes

In our application, when we call our login service, we need to tell our Authorization service (Auth0) what kind of permissions the holder of the returned token should have. In our case - we are asking for the profile and opened information about the user. Different services around the web might have other scopes such as “reading e-mails” or “updating calendar” - it’s common for services to restrict the permissions available to the token key they give you based on these scopes you are asking for.

Audience

Because we will be using the access token provided to access a DIFFERENT service (our hosted Heroku app) we need to tell Auth0 that the token we are asking for will be used at a different site. hasura-fit-token-req.png

Redirects

See the information above about the redirect URLs.

Session

The session configuration allows us to define which tokens should be saved in the browser, if at all, when it should expire and a secret key to encrypt the data.

#Custom Rules

Auth0 allows specific rules (or functions) to be executed when certain things happen in Auth0. We need to create a special function for when we send a token to our web app and we need to create a special rule for creating a copy of our Auth0 user in our Hasura database.

auth0-rules.png

Modify Token: hasura-jwt-claim

To modify the token we send to our client which will in turn be used to access Hasura, we’ll use the following rule

function (user, context, callback) {
const namespace = "https://hasura.io/jwt/claims";
context.idToken[namespace] =
{
'x-hasura-default-role': 'user',
// do some custom logic to decide allowed roles
'x-hasura-allowed-roles': ['user'],
'x-hasura-user-id': user.user_id
};
callback(null, user, context);
}

Synchronize Users: insert-user

To synchronize our users, we’ll need an additional rule which creates a mutation in Hasura every time a new user signs up.

function (user, context, callback) {
const userId = user.user_id;
const hasuraAdminSecret = "xxxx";
const url = "YOUR_HASURA_ENDPOINT";
const upsertUserQuery = `
mutation($userId: String!){
insert_users(objects: [{ id: $userId }], on_conflict: { constraint: users_pkey, update_columns: [] }) {
affected_rows
}
}`
const graphqlReq = { "query": upsertUserQuery, "variables": { "userId": userId } }
request.post({
headers: {'content-type' : 'application/json', 'x-hasura-admin-secret': hasuraAdminSecret},
url: url,
body: JSON.stringify(graphqlReq)
}, function(error, response, body){
console.log(body);
callback(null, user, context);
});
}

hasura-fit-copy-user.png

#Next Steps

To continue this tutorial, our next step will be to configure NextJs to be up and running which will be needed to configure Auth0 to work with Hasura.

Next: Set up NextJs

Blog Author

Jesse Martin

Jesse Martin

Share with others

Sign up for our newsletter!

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