---
title: "Academy App"
canonical_url: "https://academy.laioutr.com/apps/hygraph-anbinden"
locale: de
meta:
"og:title": "Academy App"
---
[Zur Startseite](https://academy.laioutr.com/)
- [Apps](https://academy.laioutr.com/bereiche/apps)
- [CMS](https://academy.laioutr.com/leitfaeden/apps-cms)
- [Hygraph anbinden](https://academy.laioutr.com/apps/hygraph-anbinden)
# Hygraph anbinden
Die Hygraph-App verbindet ein Hygraph-Projekt über die Content API mit Laioutr. Inhalte aus Hygraph erscheinen über Orchestr in Studio, Hygraph-Assets stehen in der Mediathek bereit.
## Bevor du startest
- Tarif
- Jeder Laioutr-Plan, dazu ein Hygraph-Projekt
- Rolle
- Developer-Rolle in der Umgebung
- Dauer
- 10 Min.
### Voraussetzungen
- Hygraph-Projekt mit eigenem Content-Modell
- Lesezugriff auf die Content API
- Entwicklungsteam für die Abfragen
Zuletzt geprüft am 15. Oktober 2026
Verbindet ein Hygraph-Projekt über die Content API mit Laioutr: Orchestr holt die Inhalte und ordnet sie Laioutr-Typen zu, Hygraph-Assets erscheinen in der Studio-Mediathek, Bilder werden direkt aus Hygraph optimiert ausgeliefert. Beispielabfragen für ein Blog-Modell dienen als Startpunkt.
[Entwicklerdokumentation](https://docs.laioutr.com/apps/app-docs/hygraph)
## So funktioniert es
1. Endpunkt der Content API ermitteln und Lesezugriff einrichtenWo: Hygraph-Projekt · Rolle: Hygraph-Admin · Dauer: 10 min
2. Abfragen an das eigene Content-Modell anpassenWo: Projekt-Repository · Rolle: Developer · Dauer: 1 bis 2 h
3. App im Katalog installierenWo: Laioutr Cockpit, Apps · Rolle: Developer · Dauer: 2 min
4. Werte unter Configuration eintragen, testen und speichernWo: Laioutr Cockpit, Configuration · Rolle: Developer · Dauer: 5 min
5. Umgebung deployen und Inhalte in Studio prüfenWo: Laioutr Cockpit und Studio · Rolle: Developer, Content Manager · Dauer: 10 min
## Häufige Fehler
- Sections zeigen keine Hygraph-Inhalte.
- **Ursache:** Die Abfragen passen nicht zum Schema des Hygraph-Projekts.
- **Lösung:** Abfragen und Zuordnung an die eigenen Modelle und Felder anpassen.
- Test connection meldet abgelehnte Zugangsdaten.
- **Ursache:** Der Zugriff auf die Content API fehlt oder ist zu eng gefasst.
- **Lösung:** Lesezugriff im Hygraph-Projekt prüfen und Werte neu eintragen.
- Die Mediathek zeigt keine Hygraph-Assets.
- **Ursache:** Die App ist in der Umgebung nicht vollständig eingerichtet oder nicht deployt.
- **Lösung:** Configuration vervollständigen und die Umgebung deployen.
- Neue Zugangsdaten zeigen keine Wirkung auf der Storefront.
- **Ursache:** Gespeicherte Einstellungen gelten erst ab dem nächsten Deployment der Umgebung.
- **Lösung:** Die Umgebung mit Deploy neu bauen.
Hygraph ist ein Headless CMS mit GraphQL-Schnittstelle. Die Hygraph-App verbindet ein Hygraph-Projekt über die **Content API** mit Laioutr. Orchestr holt die Inhalte und übersetzt sie in Laioutr-Typen, damit Sections in Studio sie darstellen. Ein Medienanbieter bringt die Hygraph-Assets in die Mediathek von Studio, und die Bildauslieferung optimiert Bilder direkt aus Hygraph.
Jedes Hygraph-Projekt hat ein eigenes Schema. Die App bringt Beispielabfragen für ein blogartiges Modell mit Listen, Detailseiten nach Slug und Sammlungen mit. Diese Abfragen sind ein Startpunkt: Das Entwicklungsteam passt sie an die eigenen Modelle, Felder und Namen an. Das Muster bleibt gleich, nur die Abfragen und die Zuordnung zu den Laioutr-Typen folgen dem eigenen Modell.
Hygraph bleibt der Ort, an dem Redaktionen ihre Inhalte pflegen. Laioutr ergänzt Frontend, Studio und die Verbindung zu Commerce-Daten. Für Inhalte direkt in Laioutr gibt es zusätzlich die Content Collections im Cockpit.
## Schritt für Schritt
1. 1 ### Schritt 1: Content API vorbereiten
Im Hygraph-Projekt den Endpunkt der Content API ermitteln und Lesezugriff für die Storefront einrichten.
2. 2 ### Schritt 2: Abfragen anpassen
Das Entwicklungsteam passt die mitgelieferten Beispielabfragen an das eigene Content-Modell an und ordnet die Felder den Laioutr-Typen zu.
3. 3 ### Schritt 3: App installieren
Im Cockpit unter **Apps** die App Hygraph suchen und mit **Install** zum Projekt hinzufügen.
4. 4 ### Schritt 4: Werte eintragen und testen
Im Umgebungsmenü **Configuration** öffnen, die Werte eintragen, mit **Test connection** prüfen und mit **Save settings** speichern.
5. 5 ### Schritt 5: Deployen und prüfen
Die Umgebung mit **Deploy** neu bauen und in Studio prüfen, ob Inhalte und Assets aus dem CMS erscheinen.
## Ergebnis prüfen
Der Verbindungstest meldet Erfolg, die Mediathek in Studio zeigt Assets aus Hygraph, und Sections mit Hygraph-Inhalten zeigen dieselben Texte wie im Hygraph-Projekt.
## Häufige Fragen
Funktioniert die App mit jedem Hygraph-Schema?
Ja, nach Anpassung. Die mitgelieferten Abfragen folgen einem Beispielmodell. Für das eigene Schema passt das Entwicklungsteam Abfragen und Zuordnung an.
Wo werden Inhalte gepflegt?
In Hygraph. Laioutr liest die Inhalte über die Content API und stellt sie in Studio und auf der Storefront dar.
Lassen sich Entwürfe aus Hygraph vorab ansehen?
Ja. Die App unterstützt eine Vorschau, mit der Inhalte aus Hygraph vor der Veröffentlichung geprüft werden.
## Passend dazu
- [Inhalte in Content Collections pflegen](https://academy.laioutr.com/artikel/inhalte-in-content-collections-pflegen)6 Min.
Content Collections sind der Bereich für strukturierte Inhalte wie Blogartikel, Rezepte oder Autoren in Cockpit. Unter Content › Collections werden Einträge angelegt, je Sprache gepflegt, verknüpft und ohne Deployment veröffentlicht.
- [Medien in Cockpit und Studio verwalten](https://academy.laioutr.com/artikel/medien-in-cockpit-und-studio-verwalten)5 Min.
Bilder, Videos und Audiodateien werden zentral in der Media Library unter Content in Cockpit verwaltet. In Studio wählt der Medienwähler Dateien aus allen verbundenen Bibliotheken, etwa aus dem Shop-System, und lädt neue hoch, wo die Bibliothek es erlaubt.
- [Blog mit Übersicht und Artikelseiten aufbauen](https://academy.laioutr.com/artikel/blog-mit-uebersicht-und-artikelseiten-aufbauen)8 Min.
Ein Blog in Laioutr besteht aus der Section Blog Post Listing für die Übersicht und der Section Article Detail für einzelne Beiträge. Die Beiträge kommen über eine App aus dem angebundenen System, Studio legt Darstellung, Featured Post, Teilen-Leiste und Inhaltsverzeichnis fest.
- [Apps finden, installieren und konfigurieren](https://academy.laioutr.com/artikel/apps-finden-installieren-und-konfigurieren)6 Min.
Apps stehen im Cockpit unter Apps als Katalog bereit, werden je Umgebung installiert und unter Configuration eingerichtet. Die Storefront nutzt sie ab dem nächsten Deployment.
- [Entwürfe vor dem Veröffentlichen in der Vorschau prüfen](https://academy.laioutr.com/artikel/entwuerfe-in-der-vorschau-pruefen)5 Min.
Mit dem Content Preview Token des Projekts zeigt die echte Storefront unveröffentlichte Inhalte statt der veröffentlichten. Das Token steckt im Link open preview der Projekteinstellungen, im Studio-Befehl Show preview content oder im URL-Parameter preview\_token.
## In einer Lektion lernen
- [Hygraph als CMS verbinden](https://academy.laioutr.com/lektionen/live-gang-hygraph-verbinden)7 Min.
## [CMS](https://academy.laioutr.com/leitfaeden/apps-cms)
In diesem Leitfaden suchen
1. [Hygraph anbinden](https://academy.laioutr.com/apps/hygraph-anbinden)10 Min.
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "de",
"name": "Default",
"url": "https://academy.laioutr.com/",
"workTranslation": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/apps/hygraph-anbinden#webpage",
"name": "Academy App",
"url": "https://academy.laioutr.com/apps/hygraph-anbinden",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/apps/hygraph-anbinden#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/apps/hygraph-anbinden#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/apps/hygraph-anbinden#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/apps/hygraph-anbinden#/schema/question/3"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/apps/hygraph-anbinden"
]
}
]
},
{
"@id": "https://academy.laioutr.com/apps/hygraph-anbinden#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/",
"position": 1
},
{
"@type": "ListItem",
"name": "Apps",
"item": "https://academy.laioutr.com/bereiche/apps",
"position": 2
},
{
"@type": "ListItem",
"name": "CMS",
"item": "https://academy.laioutr.com/leitfaeden/apps-cms",
"position": 3
},
{
"@type": "ListItem",
"name": "Hygraph anbinden",
"item": "https://academy.laioutr.com/apps/hygraph-anbinden",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/apps/hygraph-anbinden#/schema/question/1",
"@type": "Question",
"inLanguage": "de",
"name": "Funktioniert die App mit jedem Hygraph-Schema?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Ja, nach Anpassung. Die mitgelieferten Abfragen folgen einem Beispielmodell. Für das eigene Schema passt das Entwicklungsteam Abfragen und Zuordnung an.
"
}
},
{
"@id": "https://academy.laioutr.com/apps/hygraph-anbinden#/schema/question/2",
"@type": "Question",
"inLanguage": "de",
"name": "Wo werden Inhalte gepflegt?",
"acceptedAnswer": {
"@type": "Answer",
"text": "In Hygraph. Laioutr liest die Inhalte über die Content API und stellt sie in Studio und auf der Storefront dar.
"
}
},
{
"@id": "https://academy.laioutr.com/apps/hygraph-anbinden#/schema/question/3",
"@type": "Question",
"inLanguage": "de",
"name": "Lassen sich Entwürfe aus Hygraph vorab ansehen?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Ja. Die App unterstützt eine Vorschau, mit der Inhalte aus Hygraph vor der Veröffentlichung geprüft werden.
"
}
}
]
}
```