---
title: "Academy App"
canonical_url: "https://academy.laioutr.com/en/apps/connect-hygraph"
locale: en
meta:
"og:title": "Academy App"
---
[Go to home](https://academy.laioutr.com/en)
- [Apps](https://academy.laioutr.com/en/bereiche/apps)
- [CMS](https://academy.laioutr.com/en/leitfaeden/apps-cms)
- [Connect Hygraph](https://academy.laioutr.com/en/apps/connect-hygraph)
# Connect Hygraph
The Hygraph app connects a Hygraph project to Laioutr through the Content API. Hygraph content appears in Studio through Orchestr, and Hygraph assets are available in the media library.
## Before you start
- Plan
- Any Laioutr plan plus a Hygraph project
- Role
- Developer role on the environment
- Duration
- 10 min
### Prerequisites
- Hygraph project with its own content model
- Read access to the Content API
- Development team for the queries
Last reviewed on October 15, 2026
Connects a Hygraph project to Laioutr through the Content API: Orchestr fetches the content and maps it to Laioutr types, Hygraph assets appear in the Studio media library, and images are delivered optimised straight from Hygraph. Sample queries for a blog model serve as a starting point.
[Developer documentation](https://docs.laioutr.com/apps/app-docs/hygraph)
## How it works
1. Look up the Content API endpoint and set up read accessWhere: Hygraph project · Role: Hygraph admin · Duration: 10 min
2. Adapt the queries to the project content modelWhere: Project repository · Role: Developer · Duration: 1 bis 2 h
3. Install the app from the catalogueWhere: Laioutr Cockpit, Apps · Role: Developer · Duration: 2 min
4. Enter, test and save values under ConfigurationWhere: Laioutr Cockpit, Configuration · Role: Developer · Duration: 5 min
5. Deploy the environment and check content in StudioWhere: Laioutr Cockpit and Studio · Role: Developer, content manager · Duration: 10 min
## Common errors
- Sections show no Hygraph content.
- **Cause:** The queries do not match the schema of the Hygraph project.
- **Fix:** Adapt queries and mapping to the project models and fields.
- Test connection reports refused credentials.
- **Cause:** Access to the Content API is missing or too restricted.
- **Fix:** Check read access in the Hygraph project and enter the values again.
- The media library shows no Hygraph assets.
- **Cause:** The app is not fully set up in the environment or not deployed.
- **Fix:** Complete Configuration and deploy the environment.
- New credentials have no effect on the storefront.
- **Cause:** Saved settings only apply from the next deployment of the environment.
- **Fix:** Rebuild the environment with Deploy.
Hygraph is a headless CMS with a GraphQL API. The Hygraph app connects a Hygraph project to Laioutr through the **Content API**. Orchestr fetches the content and maps it to Laioutr types so Sections in Studio can render it. A media provider brings Hygraph assets into the Studio media library, and image delivery optimises images straight from Hygraph.
Every Hygraph project has its own schema. The app ships sample queries for a blog-style model with lists, detail pages by slug and collections. These queries are a starting point: the development team adapts them to its own models, fields and names. The pattern stays the same; only the queries and the mapping to Laioutr types follow the project model.
Hygraph remains the place where editorial teams maintain their content. Laioutr adds the frontend, Studio and the link to commerce data. For content managed directly in Laioutr, Content Collections in Cockpit are available as well.
## Step by step
1. 1 ### Step 1: Prepare the Content API
Look up the Content API endpoint in the Hygraph project and set up read access for the storefront.
2. 2 ### Step 2: Adapt the queries
The development team adapts the bundled sample queries to the project content model and maps the fields to Laioutr types.
3. 3 ### Step 3: Install the app
In Cockpit under **Apps**, find the Hygraph app and add it to the project with **Install**.
4. 4 ### Step 4: Enter and test the values
Open **Configuration** in the environment menu, enter the values, check them with **Test connection** and store them with **Save settings**.
5. 5 ### Step 5: Deploy and check
Rebuild the environment with **Deploy** and check in Studio that content and assets from the CMS appear.
## Check the result
The connection test reports success, the Studio media library shows Hygraph assets, and Sections with Hygraph content show the same text as the Hygraph project.
## Frequently asked questions
Does the app work with any Hygraph schema?
Yes, after adaptation. The bundled queries follow a sample model. For a project schema, the development team adapts queries and mapping.
Where is content maintained?
In Hygraph. Laioutr reads the content through the Content API and renders it in Studio and on the storefront.
Can Hygraph drafts be previewed?
Yes. The app supports a preview for checking Hygraph content before it is published.
## Related
- [Manage content in Content Collections](https://academy.laioutr.com/en/artikel/manage-content-in-content-collections)6 min
Content Collections are the place for structured content such as blog posts, recipes or authors in Cockpit. Under Content › Collections, entries are created, maintained per language, linked and published without a deployment.
- [Manage media in Cockpit and Studio](https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio)5 min
Images, videos and audio files are managed centrally in the Media Library under Content in Cockpit. In Studio, the media picker selects files from every connected library, such as the shop system, and uploads new ones where the library allows it.
- [Build a blog with overview and article pages](https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages)8 min
A blog in Laioutr consists of the Blog Post Listing section for the overview and the Article Detail section for single posts. Posts come from the connected system through an app, while Studio controls presentation, featured post, sharing row and table of contents.
- [Find, install and configure apps](https://academy.laioutr.com/en/artikel/find-install-and-configure-apps)6 min
Apps are listed in the Cockpit catalogue under Apps, installed per environment and set up under Configuration. The storefront uses them from the next deployment onwards.
- [Check drafts in the preview before publishing](https://academy.laioutr.com/en/artikel/check-drafts-in-the-preview)5 min
With the project's content preview token, the real storefront shows unpublished content instead of published content. The token is used by the open preview link in project settings, the Studio command Show preview content or the URL parameter preview\_token.
## Learn it in a lesson
- [Connect Hygraph as CMS](https://academy.laioutr.com/en/lektionen/go-live-connect-hygraph)7 min
## [CMS](https://academy.laioutr.com/en/leitfaeden/apps-cms)
Search this guide
1. [Connect Hygraph](https://academy.laioutr.com/en/apps/connect-hygraph)10 min
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "en",
"name": "Default",
"url": "https://academy.laioutr.com/",
"translationOfWork": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-hygraph#webpage",
"name": "Academy App",
"url": "https://academy.laioutr.com/en/apps/connect-hygraph",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/en/apps/connect-hygraph#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/en/apps/connect-hygraph#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-hygraph#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-hygraph#/schema/question/3"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/en/apps/connect-hygraph"
]
}
]
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-hygraph#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/en",
"position": 1
},
{
"@type": "ListItem",
"name": "Apps",
"item": "https://academy.laioutr.com/en/bereiche/apps",
"position": 2
},
{
"@type": "ListItem",
"name": "CMS",
"item": "https://academy.laioutr.com/en/leitfaeden/apps-cms",
"position": 3
},
{
"@type": "ListItem",
"name": "Connect Hygraph",
"item": "https://academy.laioutr.com/en/apps/connect-hygraph",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-hygraph#/schema/question/1",
"@type": "Question",
"inLanguage": "en",
"name": "Does the app work with any Hygraph schema?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, after adaptation. The bundled queries follow a sample model. For a project schema, the development team adapts queries and mapping.
"
}
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-hygraph#/schema/question/2",
"@type": "Question",
"inLanguage": "en",
"name": "Where is content maintained?",
"acceptedAnswer": {
"@type": "Answer",
"text": "In Hygraph. Laioutr reads the content through the Content API and renders it in Studio and on the storefront.
"
}
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-hygraph#/schema/question/3",
"@type": "Question",
"inLanguage": "en",
"name": "Can Hygraph drafts be previewed?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. The app supports a preview for checking Hygraph content before it is published.
"
}
}
]
}
```