Frequently Asked Questions

Product Information & Features

What is Hygraph?

Hygraph is a headless content management system (CMS) that leverages a GraphQL-native architecture for efficient data querying and content federation. It enables businesses to unify data, create impactful digital experiences, and modernize their tech stacks. Learn more at Hygraph Product Page.

What are the key features and capabilities of Hygraph?

Hygraph offers a GraphQL-native architecture, content federation, scalability, and an intuitive interface. Key capabilities include rapid content delivery, flexible schema evolution, strong typing, and efficient data querying. For a full list of features, visit Hygraph Features.

Does Hygraph provide an API?

Yes, Hygraph provides a powerful GraphQL API for efficient content management and data querying. You can learn more about the API at Hygraph API Reference.

What integrations does Hygraph support?

Hygraph supports a wide range of integrations, including Netlify, Vercel, BigCommerce, commercetools, Shopify, Lokalise, Crowdin, EasyTranslate, Smartling, Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot, Ninetailed, AltText.ai, Adminix, and Plasmic. For more details, visit Hygraph Integrations.

How does Hygraph optimize content delivery performance?

Hygraph emphasizes rapid content distribution and responsiveness, which improves user experience, engagement, and search engine rankings. Optimized delivery reduces bounce rates and increases conversions. For more details, visit this page.

What technical documentation is available for Hygraph?

Hygraph offers comprehensive technical documentation covering building and deploying projects. Access it at Hygraph Documentation.

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

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. More information is available at Hygraph Security Features.

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. Companies that benefit most include modern software companies, enterprises seeking to modernize, and brands aiming to scale across geographies or improve development velocity.

What business impact can customers expect from using Hygraph?

Customers can expect significant business impacts, including time-saving through streamlined workflows, ease of use with an intuitive interface, 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.

What problems does Hygraph solve?

Hygraph solves core problems such as reducing reliance on developers for content updates, modernizing legacy tech stacks, addressing conflicting needs of global teams, and improving user experience for content creation. Financially, it lowers operational costs, speeds up time-to-market, and supports scalability. Technically, it simplifies development workflows, streamlines query management, and resolves cache and integration challenges. For more details, visit our product page.

What pain points do Hygraph customers commonly face?

Customers often face operational pains (developer reliance, outdated tech stacks, global team conflicts, clunky content creation), financial pains (high costs, slow speed-to-market, expensive maintenance, scalability challenges), and technical pains (boilerplate code, overwhelming queries, evolving schemas, cache problems, OpenID integration challenges). Hygraph addresses these with tailored solutions. See our product page for more.

How does Hygraph solve these pain points?

Hygraph provides an intuitive interface for non-technical users, modernizes outdated systems with its GraphQL-native architecture, ensures consistent branding via content federation, and streamlines workflows to reduce costs and accelerate speed-to-market. Technical solutions include simplified development, streamlined query management, and robust security and integration features. For more, visit our product page.

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

KPIs include time saved on content updates, system uptime, consistency across regions, user satisfaction scores, reduction in operational costs, time to market, maintenance costs, scalability metrics, and performance during peak usage. For more details, visit CMS KPIs Blog.

Customer Success & Case Studies

Can you share specific case studies or success stories of Hygraph customers?

Yes. Komax achieved 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement, and Dr. Oetker enhanced their digital experience using MACH architecture. Explore more success stories at Hygraph Case Studies.

What industries are represented in Hygraph's case studies?

Industries include 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 Hygraph Case Studies.

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. For more details, visit Hygraph Case Studies.

Support & Implementation

How easy is it to get started with Hygraph?

Hygraph is designed for easy onboarding, even for non-technical users. For example, Top Villas launched a new project in just 2 months. Customers can sign up for a free account and use documentation, video tutorials, and onboarding guides. Learn more at Hygraph Documentation.

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 can access documentation, video tutorials, and the community Slack channel. For more details, visit Hygraph Contact Page.

What training and technical support does Hygraph provide for onboarding?

Hygraph provides 24/7 support, onboarding sessions for enterprise customers, training resources (video tutorials, documentation, webinars), and Customer Success Managers for expert guidance. For more details, visit Hygraph Contact Page.

How does Hygraph handle maintenance, upgrades, and troubleshooting?

Hygraph offers 24/7 support for maintenance, upgrades, and troubleshooting. Enterprise customers receive dedicated onboarding and expert guidance, and all users can access documentation and the community Slack channel for additional support.

GraphQL Advantages & Disadvantages

What are the top advantages of GraphQL?

Top advantages include declarative data fetching, responses with only the data needed (reducing under- and over-fetching), strong typing for type safety, flexible schema evolution, and efficient data querying. These features improve readability, performance, and developer experience. Source: GraphQL Advantages Blog.

What are the disadvantages of GraphQL?

Disadvantages include potential performance issues with complex data structures, lack of in-built caching mechanisms, and the possibility of inefficient requests if queries are not optimized. Hygraph mitigates these with distributed edge caches and schema builder tools. Source: GraphQL Advantages Blog.

How does Hygraph address GraphQL's lack of built-in caching?

Hygraph provides a caching mechanism through its Content APIs, delivered globally via distributed edge caches. This improves performance and scalability for frequent requests and updates. More information at Hygraph Caching Documentation.

Blog & Community

Where can I find the Hygraph blog?

The Hygraph Blog provides the latest updates, developer tutorials, and essential guides to content modeling. Visit the Blog section on the Hygraph website.

Who authored the blog post 'Top advantages and disadvantages of GraphQL'?

The blog post was written by Motunrayo Moronfolu, Senior Frontend Engineer and Technical Writer at Hygraph. Source: GraphQL Advantages Blog.

What does the blog post encourage readers to do?

The blog post encourages readers to sign up for the newsletter to stay informed about releases and industry news.

Webinar Event: How to Avoid Personalization Tech Traps

Top advantages and disadvantages of GraphQL

Let's explore the advantages and potential pitfalls of GraphQL.
Motunrayo Moronfolu

Written by Motunrayo 

Apr 18, 2024
Top advantages and disadvantages of GraphQL

Efficient data fetching isn’t just desirable for developing modern and data-driven applications — it’s essential. GraphQL bridges the gap between applications and data, eliminating the overhead of bulky data exchange and cumbersome API interactions.

We outline the top advantages of GraphQL in this article for developers considering adopting the query language. Meanwhile, we will also discuss GraphQL's disadvantages.

As a summary of this article, the top advantages of GraphQL are:

  • Declarative nature, which improves readability and enhances performance
  • Responses are only the data you need, reducing data under-fetching and over-fetching
  • Strong typing, ensuring type safety and consistency through the development phase
  • Flexible schema evolution, which provides backward compatibility for existing client apps

And, the disadvantages include:

  • Performance issues arising from managing complex data structures
  • Lack of in-built caching mechanism

We will explore this topic by analyzing query examples using Hygraph, a headless content management system (CMS) that leverages GraphQL API for data querying. Continue reading to uncover these benefits and pitfalls as they manifest in real scenarios.

#Advantages of GraphQL

To illustrate GraphQL's practical applications, we will use SKNCRE, an eCommerce starter powered by Hygraph.

Setting up an example application

Let’s set up Hypgraph’s SKNCRE project.

To begin, let’s navigate to the SKNCRE project starter:

The SKNCRE page

Next, click "Clone the Hygraph project," redirecting us to a view where we’ll set the name and region for our SKNCRE project clone.

If you don’t yet have an account, you’ll be prompted to a free sign up.

View to set name and region for the SKNCRE project clone

After filling in the necessary fields, click "Clone now" to finalize the process. This action leads us to the project statistics page.

The Hygraph SKNCRE dashboard view

Now, checking your Hygraph account shows the SKNCRE project clone in the dashboard — it’s ready for use!

GraphQL’s declarative nature

GraphQL simplifies data querying by allowing developers to specify what data they need in a single query via a single GraphQL endpoint.

Unlike traditional REST APIs, where developers write intricate requests, GraphQL queries are concise and use a single API endpoint. This approach enhances readability and reduces the complexity of multiple REST requests for different data elements.

Let's use Hygraph’s API playground to see GraphQL’s declarative nature in action.

First, navigate to Content > Product Focus**; here, you’ll see some information in the form fields of the “Product Focus”** view:

The Product focus view for the SKNCRE project

After carefully inspecting the information in the fields above, navigate to the "API Playground" to craft a GraphQL query, given below the image, to fetch the data we saw in the “Product Focus” view.

Here‘s the query you’ll enter into the playground:

query MyQuery {
page(where: {slug: "home"}) {
components {
... on ProductHighlight {
id
productFocus {
cta
description
id
product {
id
ingredients
name
price
}
title
}
}
}
slug
}
}

In this query, we achieved the following:

  • We specified the page with the slug "home" using page(where: { slug: "home" })
  • We requested all components associated with that page using components
  • The ... on ProductHighlight fragment ensured we only focus on components of that type
  • Within each ProductHighlight, we fetched specific fields like id, title, and productFocus
  • The nested productFocus and product sections retrieved detailed product information
  • Finally, we also grabbed the page's slug

We can see that the query is structured clearly and concisely, specifying the exact data requirements, such as page components and specific GraphQL fields (id, title, etc.), without worrying about how the data is fetched or combined.

Responses are only the data you need

This is a key advantage of GraphQL: the server returns only the data explicitly requested in a query, including persistent queries.

This contrasts with traditional RESTful APIs, where responses often include a fixed set of data fields for a particular endpoint, potentially including more data than the client requires.

This approach offers several benefits:

1. Reduced overfetching: Frontend developers receive only the data they explicitly request, eliminating unnecessary data transfer and reducing response sizes compared to typical REST responses. This particularly benefits mobile applications or low-bandwidth environments where minimizing data transfer is crucial.

2. Eliminating underfetching: Clients can retrieve all required data in a single request, not making multiple round trips to the server for related data. This streamlines the development process and improves performance by reducing latency.

3. Improved performance: By minimizing the amount of data transferred over the network, GraphQL can enhance the performance of all applications, leading to faster response times and a smoother user experience.

4. Flexible query structure: Clients have control over the structure and content of the data they receive, allowing them to tailor queries to their specific requirements. This flexibility enables more efficient and precise data retrieval, reducing the need for additional requests to fetch missing or related data.

Let’s consider an example by querying the assets found in the SKNCRE project. In the playground shown below, we fetch the essential details for all assets, including their IDs, filenames, URLs, MIME types, sizes, widths, and heights.

Here is the query in the above playground:

query GetAllAssets {
assetsConnection {
edges {
node {
id
fileName
url
mimeType
size
width
height
}
}
}
}

Now, let’s try a minimized query where we only fetch the id **and fileName** for the assets in the project:

query GetAllAssets {
assetsConnection {
edges {
node {
id
fileName
}
}
}
}

As observed in the view above, GraphQL facilitates effortless modification of queries to retrieve specific fields or components based on our requirements without affecting the overall structure.

We can utilize our browser's built-in developer tools to assess the impact of this precise response return. By navigating to the network tab and filtering requests by type (e.g., XHR for GraphQL requests), we can examine the size of each response alongside the request details.

Upon inspection using my browser, the extensive query for all assets returned a size of 1.1 KB, whereas the lighter query showed 570 bytes. To determine the efficiency gained by the minimized query over the extensive query, we can employ the following formula:

Efficiency % = ((Extensive query size - Minimized query size) / Extensive query size) * 100

Substituting the values:

Efficiency % = ((1.1 - 0.57)/1.1) * 100
Efficiency % = (0.53/1.1) * 100
Efficiency % = 0.4818 * 100
Efficiency % = 48.18%

Therefore, the efficiency gained by the minimized query over the extensive query is approximately 48.18%.

Strong typing

GraphQL embraces strong typing principles at its core.

GraphQL's strong typing system is reflected in its Schema Definition Language (SDL) and enforced by GraphQL servers. The GraphQL schema field explicitly defines strict data types like String, Int, and Boolean for every field we query or mutate, guaranteeing that we only perform valid GraphQL operations.

GraphQL clients and tools leverage this schema, especially in complex systems, to provide type safety and inference, facilitate good error management, ensure consistency between client and server, and enable end-to-end typing.

Let’s look at the following query, which retrieves the assets in our SKNCRE project, and how it demonstrates GraphQL’s strong typing.

query GetAssests($first: Int, $skip: Int, $stage: Stage!, $where: AssetWhereInput, $orderBy: AssetOrderByInput, $locales: [Locale!]!) {
page: assetsConnection(
first: $first
skip: $skip
stage: $stage
where: $where
orderBy: $orderBy
locales: $locales
) {
edges {
node {
id
stage
updatedAt
createdAt
fileName
handle
height
id
mimeType
size
updatedAt
width
url
createdBy {
entryId: id
name
picture
kind
isActive
}
updatedBy {
entryId: id
name
picture
kind
isActive
}
localizations(includeCurrent: true) {
locale
updatedAt(variation: LOCALIZATION)
}
documentInStages(includeCurrent: true) {
id
stage
updatedAt
publishedAt
localizations(includeCurrent: true) {
locale
updatedAt(variation: LOCALIZATION)
}
}
}
}
aggregate {
count
}
}
}

From the query above, we saw the following on display:

1. Variable declarations

The query declares several variables ($first, $skip, $stage, $where, $orderBy, and $locales), each with specific data types (Int, Stage!, [Locale!]!, etc.). This enforces strong typing by specifying the expected data types for each variable.

2. Argument usage

These variables are used as arguments in the assetsConnection field. The types of these arguments must adhere to the schema's definition. For example, $stage is marked as non-nullable (Stage!), indicating that it must be provided and be of type Stage.

3. Field selection:

The query requests specific fields for assets (id, stage, updatedAt, etc.). These fields are predefined in the GraphQL schema, and their types are strictly defined.

The query achieves type safety and client-side code alignment with the schema through the above.

Similarly, on the server side, the GraphQL server enforces the types defined in the schema for these variables, guaranteeing that only valid operations are executed. This approach ensures that the server-side code operates with well-defined types, thus maintaining consistency and type safety within the server-side logic.

Both ends adhere to the same schema and utilize identical types for variables and fields between client and server, resulting in comprehensive end-to-end typing.

Simplification of complex queries

By crafting concise GraphQL queries tailored to specific requirements, developers can minimize network overhead and reduce the complexity of data fetching logic. This enhances performance by minimizing round trips to the server and improves developer productivity by providing a more intuitive and streamlined approach to querying data.

Let’s look at some examples demonstrating how GraphQL simplifies complex queries.

Filtering

query MyQuery {
pages(first: 10, where: {title_not_contains: "test"}) {
title
slug
description
createdAt
}
}

The query above retrieves pages with specific filtering criteria: it fetches the first 10 pages (if available) where the title does not contain the substring "test". It will return the available pages if we have below ten pages.

Sorting

query MyQuery {
pages(first: 10, orderBy: createdAt_ASC) {
title
slug
description
createdAt
}
}

This query retrieves the first 10 pages sorted by their creation date in ascending order (createdAt_ASC).

Combining filtering and sorting

query MyQuery {
pages(first: 10, where: {title_not_contains: "test"}, orderBy: createdAt_ASC) {
title
slug
description
createdAt
}
}
  • This query combines filtering and sorting logic to fetch pages.
  • It retrieves the first 10 pages where the title does not contain "test", sorted by creation date in ascending order.

In the examples provided above, we witnessed how GraphQL streamlines the complexity of queries by offering an intuitive syntax. This syntax seamlessly integrates filtering, sorting, and combining multiple logic within a single query and eliminates the need for additional endpoints or sorting logic on the client side. As a result, developers can craft queries with precision, specifying the exact response format expected by the client.

Flexible schema evolution

In contrast to traditional REST architecture, where changes often require versioning and can disrupt existing clients, GraphQL's schema flexibility enables developers to seamlessly modify and enhance the schema without disrupting existing client apps.

To see this in action, let’s retrieve all pages within the SKNCRE project. We begin by crafting a query within the Hygraph API playground like so:

query GetPages {
pages {
description
createdAt
title
slug
}
}

This initial query fetches page data, including descriptions, creation dates, titles, and slugs.

What about a scenario where the client requests additional information about page publication and updates? With GraphQL's flexibility, we can seamlessly integrate these new requirements into the existing query:

query GetPages {
pages {
description
createdAt
title
slug
publishedAt
updatedAt
}
}

By adding the additional fields publishedAt and updatedAt clients can access the updated data without disruption. Moreover, thanks to GraphQL's backward compatibility, clients that don't require these new fields can continue to make queries without modification. This ensures uninterrupted functionality for existing queries using the GetPages initial schema structure.

Data introspection

GraphQL empowers developers with immediate access to schema information, leading to several rapid developer experience upgrades, such as:

1. Streamlined exploration:

Powerful tools like GraphiQL and Hygraph's built-in API playground act as interactive sandboxes for developers to instantly query the schema and explore available types, fields, and relationships without relying on external documentation. This intuitive discovery process reduces exploration time and fosters a deeper understanding of the data landscape.

2. Error prevention at warp speed:

Introspection enables early error detection. Instead of waiting for runtime errors, the GraphQL server, equipped with schema knowledge, can flag the issue immediately, saving precious debugging time and frustration.

3. Efficient documentation generation:

Manually documenting extensive APIs can be tedious. But with introspection, tools can automatically generate interactive, up-to-date documentation based on the live schema. This ensures that documentation always reflects the latest data structure, saving developers the burden of manual maintenance.

4. Seamless collaboration:

Introspection promotes a shared understanding of the data model. Team members can easily explore the schema, discuss data structures, and share queries through interactive tools, fostering efficient collaboration and knowledge sharing.

#Disadvantages of GraphQL

GraphQL offers numerous advantages, but like almost every technology, its pitfalls must be acknowledged to avoid unintended consequences.

Performance issue

One challenge with GraphQL as stated in the 2024 GraphQL Report is managing potential performance issues caused by complex data structures, relationships, and nested field selections. This leads to excessive data processing overhead and performance bottlenecks for frontend applications.

By using the "x-inspect-complexity": true header in the API playground, Hygraph analyzes the query complexity weighting regarding the computational resource consumption and optimization prompts to improve performance.

Inefficient requests

Another potential challenge is related to accidental over-fetching and under-fetching of data. GraphQL allows precise querying, but inexperienced developers might request more data than necessary, causing inefficient requests. However, with Hygraph’s schema builder, developers of all skill levels can eliminate these potential “accidents” and create efficient queries.

Lack of in-built caching mechanism

The lack of built-in caching methods in GraphQL can lead to suboptimal performance, especially in scenarios with frequent requests and updates. Hygraph mitigates this issue by providing a caching mechanism through its Content APIs delivered globally via distributed edge caches.

#Conclusion

By closely examining its practical applications using Hygraph’s SKNCRE project, we gained valuable insights into GraphQL’s strengths and weaknesses.

GraphQL is a robust query language liked by developers for its structured data, ease of use, type-checking, and many other strengths. If you are considering using GraphQL in production, check out our GraphQL Report 2024, where we learn how the community solves obstacles and best practices from GraphQL experts.

The GraphQL Report 2024

Statistics and best practices from prominent GraphQL users.

#References

Here are a few additional resources that could prove helpful:

Blog Author

Motunrayo Moronfolu

Motunrayo Moronfolu

Technical writer

Motunrayo Moronfolu is a Senior Frontend Engineer and Technical writer passionate about building and writing about great user experiences.

Share with others

Sign up for our newsletter!

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