WPGraphQL und REST API für Headless WordPress

In der heutigen Webentwicklung hat die Entkopplung von Frontend- und Backend-Systemen stark an Bedeutung gewonnen und zu Headless Websites geführt.

Traditionell waren Content Management Systeme (CMS) immer miteinander gekoppelt, aber das brachte viele Einschränkungen mit sich, wie z. B. eine eingeschränkte Flexibilität und Skalierbarkeit. Moderne Headless CMS ermöglichen es Entwicklern jedoch, das Frontend, das mit einem beliebigen Framework erstellt wurde, vom Backend zu entkoppeln.

Was ist ein Headless CMS?

Ein Headless CMS ist ein spezielles Content Management System, das ausschließlich das Backend deiner Website verwaltet. Im Gegensatz zu herkömmlichen CMS bestimmt es nicht, wie die Inhalte auf dem Frontend erscheinen. Stattdessen bietet es Entwicklern eine Anwendungsprogrammierschnittstelle (API), über die sie Inhalte für jedes Gerät oder jede Plattform abrufen und bereitstellen können.

Heute gibt es zahlreiche Headless-CMS-Plattformen. Die Umstellung deiner Inhalte von WordPress, mit dem du bereits vertraut bist, mag jedoch unnötig erscheinen. Zum Glück gibt es eine Alternative — Headless WordPress.

Headless WordPress

WordPress in seiner traditionellen Form ist nicht von Natur aus ein Headless CMS. WordPress ist ein beliebtes und leistungsstarkes CMS, das für seine Benutzerfreundlichkeit und Flexibilität bei der Erstellung und Verwaltung von Inhalten bekannt ist. Es kombiniert jedoch traditionell die Verwaltung von Inhalten und deren Präsentation in einem einzigen System.

Heutzutage haben Entwickler/innen Headless-Implementierungen von WordPress entwickelt, indem sie die REST-API nutzen. In diesen Fällen funktioniert WordPress immer noch als CMS, in dem du Inhalte erstellst, verwaltest und speicherst. Anstatt jedoch das Frontend oder die Website direkt über WordPress-Templates und -Themes darzustellen, wird die Frontend-Präsentation vom Backend entkoppelt oder losgelöst.

So können Entwickler/innen Anwendungen mit unterschiedlichen Technologien und Frameworks entwickeln und gleichzeitig die vertrauten Content-Management-Funktionen von WordPress nutzen. Es ist eine Möglichkeit, WordPress etwas mehr „headless“ werden zu lassen, auch wenn es nicht die Standardkonfiguration ist.

In diesem Artikel werden zwei Methoden vorgestellt, mit denen du Daten aus deinem Headless WordPress CMS in dein Frontend-Framework einspeisen kannst, wobei der Schwerpunkt auf zwei Methoden liegt: WPGraphQL und REST API.

Die REST-API für Headless WordPress verstehen

Die REST-API ist ein Grundpfeiler der WordPress-Entwicklung, der das Abrufen von Daten im JSON-Format ermöglicht. Seit WordPress 4.7 ist sie in WordPress integriert und erfordert kein Plugin, damit sie funktioniert.

Sie ermöglicht den Datenzugriff auf die Inhalte deiner Website und setzt dieselben Authentifizierungsbeschränkungen um: Öffentliche Inhalte auf deiner Website sind in der Regel über die REST-API öffentlich zugänglich, während private Inhalte, passwortgeschützte Inhalte, interne Benutzer, benutzerdefinierte Beitragstypen und Metadaten nur mit Authentifizierung verfügbar sind oder wenn du sie ausdrücklich so einstellst.

Um deine WordPress-Daten im JSON-Format zu erhalten, hänge /wp-json an die URL deiner WordPress-Website an:

http://yoursite.com/wp-json

Wenn die JSON-API nicht standardmäßig aktiviert ist, wenn du http://yoursite.com/wp-json besuchst, kannst du sie aktivieren, indem du deine Permalinks unter WordPress-Einstellungen öffnest und Post Name oder eine andere Option deiner Wahl außer Plain auswählst:

Dies funktioniert für lokale und öffentliche WordPress-Seiten und bietet Endpunkte für Beiträge, Seiten, Kommentare, Medien usw.

http://yoursite.com/wp-json/wp/v2/posts
http://yoursite.com/wp-json/wp/v2/comments
http://yoursite.com/wp-json/wp/v2/media

Mit der REST-API kannst du noch mehr machen. Lies unseren vollständigen Leitfaden, um mehr zu erfahren.

WPGraphQL für Headless WordPress erforschen

Im Jahr 2012 führte Facebook GraphQL ein, einen revolutionären Ansatz für die Datenabfrage über APIs. Seine deklarative Natur und der selektive Datenabruf boten eine robuste Alternative zu traditionellen REST-APIs.

Im Jahr 2015 erkannte Jason Bahl die Nachfrage nach einer Lösung, die die Flexibilität von GraphQL mit den inhaltlichen Möglichkeiten von WordPress kombiniert, und brachte WPGraphQL heraus, eine revolutionäre Lösung für WordPress-Entwickler.

WPGraphQL ist ein GraphQL-basiertes Plugin, das einen effizienteren und maßgeschneiderten Ansatz zur Datenabfrage bietet. Es stellt einen einzigen Endpunkt dar, der einen präzisen Datenabruf ermöglicht und das Problem des Überholens, das bei REST-APIs häufig auftritt, reduziert.

Wie man WPGraphQL verwendet

Um WPGraphQL zu verwenden, befolge diese Schritte:

1. Installiere das WPGraphQL Plugin: Installiere zunächst das WPGraphQL-Plugin auf deiner WordPress-Website. Du kannst dies über das WordPress-Dashboard tun oder es aus dem offiziellen WordPress-Plugin-Repository herunterladen.

   

2. Erforsche den GraphQL Playground: Nach der Installation bietet WPGraphQL einen eingebauten GraphQL Playground. Um darauf zuzugreifen, navigiere zum Reiter GraphQL in deinem WordPress Dashboard:

   

   Mit dem Playground kannst du das Schema erkunden, Abfragen ausführen und Mutationen interaktiv testen.

3. Gestalte deine Abfragen: Nutze die Leistungsfähigkeit von GraphQL, indem du Abfragen erstellst, die auf deine spezifischen Datenanforderungen zugeschnitten sind. Nutze das selbstdokumentierende Schema, um die verfügbaren Daten und Beziehungen zu verstehen.

   

Du kannst WPGraphQL jetzt in deine Frontend-Anwendung integrieren, ganz gleich, ob sie mit React, Vue oder einem anderen Framework erstellt wurde, indem du einen einzigen GraphQL-Endpunkt nutzt, um Daten effizient abzurufen und deine Benutzeroberfläche dynamisch zu aktualisieren.

Die wichtigsten Funktionen von WPGraphQL

WPGraphQL verfügt über wichtige Funktionen für eine optimierte und zielgerichtete Datenabfrage, wie unten dargestellt.

Ein einziger Endpunkt für präzisen Datenabruf

WPGraphQL bietet einen einheitlichen Endpunkt, typischerweise /graphql, mit dem du bestimmte Daten effizient abrufen kannst. Dies steht im Gegensatz zur REST-API, bei der du mehrere Endpunkte benötigst, um dieselben Informationen zu erhalten.

Angenommen, du möchtest über die REST-API Details zu einem bestimmten Beitrag und seinen Kommentaren abrufen. Du musst mehrere Anfragen an verschiedene Endpunkte stellen, zum Beispiel:

Um Informationen über einen Beitrag zu erhalten:

http://yoursite.com/wp-json/wp/v2/posts/123

Um Kommentare zu einem Beitrag zu erhalten:

http://yoursite.com/wp-json/wp/v2/comments?post=123

Mit WPGraphQL hingegen kannst du das gleiche Ergebnis mit einer einzigen, gezielten Abfrage erzielen:

{
  post(id: "123") {
    title
    content
    comments {
      edges {
        node {
          content
        }
      }
    }
  }
}

In diesem Beispiel wird die GraphQL-Abfrage an einen einzigen Endpunkt gesendet. Die Abfrage gibt an, dass wir Informationen über den Beitrag mit der ID „123“ benötigen, einschließlich Titel, Inhalt und zugehörige Kommentare. WPGraphQL verarbeitet diese Abfrage und liefert eine Antwort mit genau den Daten, die wir angefordert haben, und zwar in einem Rutsch.

Gezielte Abfragen für einen effizienten Abruf

Mit GraphQL kannst du spezifische Abfragen erstellen, die auf deine Bedürfnisse zugeschnitten sind. So kannst du nur die notwendigen Daten abfragen und überflüssige Abfragen vermeiden.

Angenommen, du möchtest ein paar Details (Titel, Autor und Datum) zu allen Beiträgen abrufen. Das kann die REST-API nicht leisten. Um diese Details abzurufen, musst du einen Endpunkt wie diesen verwenden:

http://yoursite.com/wp-json/wp/v2/posts

Dieser Endpunkt ruft den gesamten Datensatz für alle Beiträge ab, einschließlich Inhalt, Kategorien und zugehörige Daten. Mit WPGraphQL kannst du eine gezielte Abfrage erstellen, um nur die Daten abzurufen, die du brauchst:

{
  posts {
    title
    date
    author {
      name
    }
  }
}

In diesem Beispiel ist die GraphQL-Abfrage so konzipiert, dass sie Details zu den Beiträgen abfragt. Wir fragen jedoch nur nach dem Titel, dem Datum und dem Namen des Autors. Mit WPGraphQL kannst du nur die Felder abfragen, die dich interessieren, was zu einer effizienteren und schlankeren Antwort führt.

Mehrere Root-Ressourcen

In WPGraphQL kannst du mehrere Stammdaten in einer einzigen Anfrage abfragen, was sie flexibel und effizient macht:

{
  posts {
    edges {
      node {
        title
        content
      }
    }
  }

  pages {
    edges {
      node {
        title
        content
      }
    }
  }
}

Die Wahl des idealen Head für Headless WordPress

Wenn du dich auf die Reise zu einem Headless-WordPress-Setup begibst, ist eine der wichtigsten Entscheidungen, die du treffen musst, die Wahl des idealen Head – der Frontend-Technologie, die deine Benutzeroberfläche betreibt und das Benutzererlebnis bestimmt.

Diese Entscheidung ist immens wichtig, da sie sich direkt auf die Leistung, Skalierbarkeit und Wartbarkeit deiner Webanwendung auswirkt. Es gibt mehrere Frontend-Frameworks und -Technologien, die mit Headless WordPress kompatibel sind, und jede hat ihre Stärken und Besonderheiten.

Du kannst dich zum Beispiel für einen Static Site Generator (SSG) entscheiden und ihn kostenlos auf dem Statischen Seiten Hosting von Kinsta bereitstellen, so dass du dich nur um das Hosting von WordPress (dem Backend) kümmern musst und kostenloses Hosting für den Head (das Frontend) genießen kannst.

Du kannst auch einen robusteren Ansatz wählen, z. B. eine JavaScript-Bibliothek wie React verwenden, um dein Frontend zu betreiben und WordPress das Backend bearbeiten zu lassen.

Zusammenfassung

Sowohl WPGraphQL als auch die REST-API bieten leistungsstarke Möglichkeiten, um Daten aus einem headless WordPress CMS zu holen und sie nahtlos in Frontend-Anwendungen zu integrieren. Die Wahl zwischen beiden hängt von den spezifischen Anforderungen deines Projekts und deinem bevorzugten Datenabrufverfahren ab.

Wenn du dich für die REST-API entscheidest, erhältst du Zugang zu einer in WordPress integrierten Lösung, mit der du ganz einfach Daten im JSON-Format abrufen kannst. WPGraphQL hingegen bietet einen moderneren und effizienteren Ansatz, der die Leistungsfähigkeit von GraphQL nutzt.

Da sich der Headless-Trend immer weiter entwickelt, können Entwickler/innen das Tool wählen, das am besten zu ihren Arbeitsabläufen und Projektzielen passt und eine nahtlose und effiziente Integration zwischen WordPress und dem Frontend-Framework ihrer Wahl gewährleistet.

Bei Kinsta ist die Erstellung und Verwaltung deines WordPress (Backend) mit unserem spezialisierten WordPress Hosting ein Kinderspiel. Es verfügt über wertvolle Funktionen wie Edge Caching, Website-Backups, kostenlose Cloudflare SSL-Zertifikate, Kinsta CDN und mehr.

Außerdem kannst du dein Frontend mit unserem Anwendungs-Hosting oder Statische Seite Hosting für SSGs bereitstellen. Dieser einheitliche Ansatz ermöglicht es dir, sowohl dein Frontend als auch dein Backend über ein einziges Dashboard zu hosten und darauf zuzugreifen.

Joel Olawanle Kinsta

Joel ist Frontend-Entwickler und arbeitet bei Kinsta als Technical Editor. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 200 technische Artikel geschrieben, die sich hauptsächlich um JavaScript und seine Frameworks drehen.

• Webseite
• LinkedIn
• Twitter
• YouTube