The Hygraph API Playground is an interactive environment that allows users to practice and run GraphQL queries against their Hygraph project schema. It automatically generates queries for fetching single and multiple entries for each content type. Users can select fields using the schema tree or manually type queries, making it easy to explore and test data retrieval. For more details, visit the API Playground documentation.
When you add a new model to your Hygraph project, two GraphQL queries are automatically generated: one for fetching a single entry (using the model's API ID) and one for fetching multiple entries (using the Plural API ID). These queries are accessible in the API Playground and can be customized to retrieve specific fields and relationships.
Yes, you can use filters such as where conditions to fetch specific entries and their related data. For example, you can retrieve all products in a category by filtering with the category's slug, or fetch related products and components by specifying relationships in your query. The API Playground supports these advanced queries, making it easy to explore complex data structures.
Remote Fields in Hygraph allow you to fetch data from external APIs and integrate it into your content models. Once a Remote Field is added to a schema, you can query it just like any other field, retrieving data relevant to the associated model. For example, you can fetch product reviews from an external API and display them alongside your product data. Learn more in the Remote Fields documentation.
Top-level Remote Fields are added to the Query system model in Hygraph, allowing you to fetch data from external sources independently of your project models. This enables you to retrieve information such as reviews or analytics in the same API call as your content data, streamlining data integration for your frontend applications.
Hygraph offers a GraphQL-native Headless CMS with features such as Smart Edge Cache for fast content delivery, content federation for integrating multiple data sources, granular permissions, custom roles, rich text formatting, project backups, and robust API Playground for query testing. These features enable operational efficiency, scalability, and flexibility for modern digital experiences. Source: Hygraph Features
Hygraph delivers exceptional performance through its Smart Edge Cache, high-performance endpoints, and optimized GraphQL API. These features ensure fast, reliable content delivery for global audiences and high-traffic sites. For more details, see the performance improvements blog.
Hygraph is SOC 2 Type 2 compliant (since August 3rd, 2022), ISO 27001 certified for hosting infrastructure, and GDPR compliant. It offers granular permissions, SSO integrations, audit logs, encryption at rest and in transit, and regular backups. For more details, see the security features page and security report.
Hygraph is a cloud-based platform that manages all deployment, updates, and infrastructure maintenance. Upgrades are rolled out seamlessly, and troubleshooting is supported via 24/7 chat, email, phone, Intercom chat, and extensive documentation. Enterprise customers receive a dedicated Customer Success Manager. Source: Hygraph Documentation
Hygraph is ideal for developers, product managers, and marketing teams in industries such as ecommerce, automotive, technology, food and beverage, and manufacturing. It is especially suited for organizations modernizing legacy tech stacks, global enterprises needing localization and asset management, and businesses seeking scalable, future-proof content management. Source: ICPVersion2_Hailey.pdf
Hygraph addresses operational inefficiencies (reducing developer dependency, streamlining workflows), financial challenges (lowering operational costs, accelerating speed-to-market), and technical issues (simplifying schema evolution, integrating third-party systems, optimizing performance, and improving localization and asset management). Source: Hailey Feed.pdf
Hygraph customers have achieved significant results, including Komax's 3X faster time-to-market for 20,000+ product variations across 40+ markets, Samsung's 15% improvement in customer engagement, and Stobag's increase in online revenue share from 15% to 70%. For more stories, visit Hygraph customer stories.
Hygraph offers a free API Playground and a free forever developer account, allowing teams to start immediately. The structured onboarding process includes introduction calls, account provisioning, business and technical kickoffs, and content schema setup. Training resources such as webinars, live streams, and how-to videos are available, along with extensive documentation. Source: Hygraph Documentation
Implementation time varies by project scope. For example, Top Villas launched a new project within 2 months, and Si Vale met aggressive deadlines during their initial implementation. The onboarding process is designed for efficiency, with immediate access via the API Playground and developer account. Source: Top Villas Case Study
Hygraph provides structured onboarding, training resources (webinars, live streams, how-to videos), extensive documentation, 24/7 support via chat, email, and phone, Intercom chat for real-time troubleshooting, and a community Slack channel. Enterprise customers receive a dedicated Customer Success Manager. Source: Hygraph Documentation
Hygraph protects customer data through SOC 2 Type 2 and ISO 27001 certifications, GDPR compliance, granular permissions, SSO integrations, audit logs, encryption, regular backups, and transparent reporting. Enterprise-grade compliance features include dedicated hosting and custom SLAs. For more, see the security features page.
Customers consistently praise Hygraph's intuitive editor UI, accessibility for non-technical users, and ease of setup. Hygraph was recognized for "Best Usability" in Summer 2023, and users appreciate features like custom app integration for content quality checks. Source: Hygraph Reviews
Hygraph offers 24/7 support via chat, email, and phone, real-time troubleshooting through Intercom chat, a community Slack channel, extensive documentation, training resources, and a dedicated Customer Success Manager for enterprise clients. Source: Hygraph Documentation
Key metrics include time saved on content updates, system uptime, content consistency across regions, user satisfaction scores, reduction in operational costs, speed to market, maintenance costs, scalability metrics, and performance during peak usage. For more, see the CMS KPIs blog.
This document contains exercises to provide queries practice in our API Playground.
Hygraph automatically generates queries for fetching single and multiple entries for each defined content type belonging to your project.
When a new model is added to your project, there are two generated GraphQL queries added to your schema. The queries are named after the API ID and Plural API ID. The API ID will be used to fetch a single entry, and the Plural API ID to fetch multiple entries.
Would you like to learn more about GraphQL? Take a look at our Learn GraphQL article. You can also check out this external resource.
Let's use our Product category model as an example here. If you look at the API Playground, you'll find productCategory - the model's API ID - and productCategories - the model's Plural API ID - in the tree. If you display productCategories, you'll find items for the system fields but also for all the fields we added to this model. We have categoryName, slug, description, and products.
API Playground with displayed tree
You can write your queries using the tree - by selecting items - or you can type them manually.
This simple query fetches information about all our product categories. Remember that we are using the Plural API ID to fetch multiple entries. You can copy it and try it in your API Playground:
Now let's try to fetch all the products in the New Arrival category. We will be using the slug with a where filter as our entry identifier for this:
Now try this by yourself: Find out the productName and productSlug of all the products inside the urban category
Let's try a query that fetches the related products connected to a product content entry.
We'll include a where condition with our entry slug and request the title of the related products component, as well as the productName and productSlug of the related products. It should look something like this:
The response shows us the 4 related entries, including the information we requested.
Let's try another one. We want to find out which products have been assigned to the Sportswear category. To achieve this, we will query the products reference inside the productCategory model. We want to find out the productName, productSlug, and productDescription of those products. Since the product description was added with an RTE field, we need to select an output format; we'll select HTML.
You can try the following query yourself:
If you followed our tutorial to create the additional content entries, your response should look like the one shown above. Remember that if you did not create the related content entries then they can't be fetched.
The response shows us that there are only two products assigned to this category: the green hoodie and the blue running shoes.
If we go to the Product category model in the content editor and access the edit view of the Sportswear category by clicking on the pencil icon, we'll see that these same two products are listed in the Products reference.
Items in the sportswear category
Now try this by yourself: Query the sellerInformation reference in the Landing page entry we created using the entry ID to find out the businessName and businessDescription.
Let's query the Product variant component that we created for our Product model earlier.
In a previous step in the Content editor, we created a sample entry that used this component for a headband. If you go into the Content editor, select the Product model, and access the edit view of that entry by clicking on the pencil icon, you'll see that the entry slug is "headband".
The following query looks into the Product model for an entry with the slug we provided and fetches the productName & productDescription, along with the productVariant component with the productType component field nested in it, containing the color for this item of type Accessory.
You can try this in your project's API Playground:
Let's also query the Related products component for our content entry whose slug is "blue-running-shoes". Remember, we are using the slug to identify it. We'll go ahead and replace the productVariant component with the relatedProducts one, and we'll request the productDescription in HTML, which we created using the RTE in the content editor.
Here's our sample query:
The response you get may contain less content than what we show here, depending on whether you followed the provided practice or not.
Now imagine we want to find out the productName, productSlug, and productDescription of all the products with the accessories product type, where the color white was selected in the productVariant component.
Let's try this query:
The response you get may contain less content than what we show here, depending on whether you followed the provided practice or not.
Now try this by yourself: Query the productGrid component in the landing page entry we created earlier using the entry ID. Find out the productName and productSlug of all the products that were added there.
You can use the API to query Remote Fields as soon as you add them to the Schema. Bear in mind that a Remote Field will be related to a specific model and only fetch data related to it.
The Product model that we created contains data that lives in Hygraph - such as business productName and productDescription - as well as a Remote Field that fetches reviews from an external API.
Try using the following query in your API Playground:
Our front end can use this information to enrich our product listings with these reviews. We'll be able to show our products, along with all the reviews we have received from the people who purchased our them, to encourage new customers.
Let's take a look at another example where it's even more noticeable how this information is connected to the model the Remote Field is a part of. We'll query the Remote Field inside the Product model while also using a where filter with the "colorful-socks" slug, so we can fetch all reviews that are about one of our products.
Copy it and paste it into your API Playground:
As you can see, the response only contains one review this time, and it's about our “plaid shirt” product.
Now try this by yourself: Query the reviews Remote Field inside the Products model to find out the rating values of all the reviews we've received.
Let's test the Top-level Remote Field that we added to the Query system model.
In the example where we tested our Top-level Remote field earlier, we used an example query that fetched all our reviews. Now let's try something a bit different; we'll query our landing page, and also the reviews, all in the same API call.
Copy it and paste it into your API Playground:
As you can see in the query above, landingPage and reviews are at the same level in our query, but we never built a Reviews model in our Schema. Here, you can clearly see how we're querying a Top-level Remote Field outside the context of a project model.
When we built our schema, we did not include a Remote Field to fetch reviews into the landing page. However, we did create a Top-level Remote Field in the Query system model. This example shows how we fetch some information from the landing page, and in the same call, we fetch our reviews through that Top-level Remote Field.
Now try this by yourself: Query the reviews Top-level Remote field but this time we only want to fetch the productSlug and the rating.
Once you're done with the queries practice, move on to our next lesson:
6.2 API Playground: Mutations practice