Vendure Shop API + Laioutr: So funktioniert die Anbindung

Wer Vendure betreibt und ein modernes Frontend will, ohne es in React von Grund auf zu bauen, stellt sich eine einfache Frage: Wie spricht der Frontend-Layer mit Vendure? Dieser Artikel zeigt, wie Laioutr die GraphQL-Shop-API anbindet und was wo bleibt.

Was die Shop-API liefert

Die Vendure Shop-API ist eine GraphQL-API für kundenseitige Anwendungen. Sie liefert Produkt- und Collection-Daten, Suche, Warenkorb-Operationen, Kundenkonten und den Checkout-Flow. Vendure stellt eine zweite API bereit, die Admin-API, für die Administration. Weil die Shop-API ein typisierter GraphQL-Vertrag ist, kann jedes Frontend sie konsumieren, auch Laioutr.

Laioutr ist der Konsument, Vendure ist die Wahrheitsquelle

Laioutr bindet die vorhandene Shop-API als konfigurierten Layer an, nicht als Custom-Integrationsprojekt. Vendure bleibt die einzige Wahrheitsquelle: Katalog, Preisfindung, Promotions, Bestand, Bestellungen und jede Plugin-Logik bleiben im Backend. Es gibt kein Datenduplikat und keine Sync-Schicht, die konsistent gehalten werden muss. Das Frontend fragt Daten beim Rendern ab und schickt Warenkorb- und Checkout-Mutationen über die Shop-API zurück.

Was das in der Praxis bedeutet

• Produkt- und Collection-Seiten rendern aus Live-Queries der Shop-API
• Warenkorb- und Checkout-Aktionen sind GraphQL-Mutationen, Order-Logik bleibt in Vendure
• Kundenkonten, Adressen und Bestellhistorie kommen aus der Shop-API
• B2B-Spezifika wie kundenspezifische Preise und Freigabe-Flows, in Vendure-Plugins modelliert, werden über die Shop-API geliefert und in Laioutr-Komponenten gerendert

Ein konfigurierter Layer, kein Greenfield-Build

Vendures Next.js-Storefront gibt euch einen Code-Startpunkt, aber das UI setzt ihr weiterhin selbst zusammen und wartet es. Laioutr liefert die Commerce-Komponenten und ihr GraphQL-Verhalten vorgefertigt, der Connect-Schritt ist also Konfiguration gegen euer Shop-API-Schema. Marketing-Teams komponieren danach Seiten und Kampagnen darauf, ohne die Integration oder die GraphQL-Schicht anzufassen.

Performance und Hosting

Laioutr liefert das Frontend aus einem EU-CDN mit einem Lighthouse-100-Ziel und Server-Side-Rendering für SEO aus. Query-Level-Caching auf der Frontend-Ebene reduziert die Last auf den Vendure-Server bei lese-intensivem Katalog-Traffic.

Häufige Fragen

Behalten wir unsere Vendure-Plugins?

Ja. Custom-Logik in euren Plugins wird über die Shop-API bereitgestellt und von Laioutr-Komponenten konsumiert. Das Backend bleibt unangetastet.

Speichert Laioutr unsere Produktdaten?

Nein. Die Daten bleiben in Vendure. Laioutr fragt sie zur Render-Zeit über die Shop-API ab, es gibt keinen Duplikat-Datenspeicher zu pflegen.

Wird das Backend beim Setup angefasst?

Keine Backend-Neuarchitektur ist nötig. Ihr nutzt die GraphQL-Shop-API und konfiguriert den Laioutr-Connect-Layer. Sprich mit unserem Team, um euer Vendure-Setup zu klären.

Mehr bei Laioutr: Personalization.

Mehr dazu: SCAYLE Storefront API + Laioutr: So funktioniert die Anbindung und SAP Commerce Cloud OCC-API + Laioutr: So funktioniert die Anbindung.