Seite 2: Der Einsatz von Apollo GraphQL

Inhaltsverzeichnis

Eine Antwort auf die Problemstellungen verspricht die Plattform Apollo GraphQL. Apollo ist Open Source und stellt eine ganze Reihe an Frameworks und Tools zur Entwicklung von GraphQL-Server- und Clientanwendungen in JavaScript und TypeScript zur Verfügung. Der Apollo Client erschien ursprünglich für React, mittlerweile existiert er ebenfalls für andere Frameworks wie Angular und Vue.js. Er arbeitet mit jeder serverseitigen GraphQL API zusammen. Sie muss nicht mit Apollo und nicht in JavaScript implementiert sein.

Die Query-Komponente von Apollo führt GraphQL-Abfragen aus. Im simpelsten Fall erhält die Komponente lediglich eine GraphQL Query, die unmittelbar nach dem Rendern der Komponente ausgeführt wird . Entwickler können GraphQL Queries in separaten Dateien oder direkt im JavaScript Sourcecode mit der gql-Funktion notieren:

import gql from "graphql-tag";
const OVERVIEW_PAGE_QUERY = gql`
  query BeerOverviewQuery {
    beers {
      id name averageStars
    }
  }
`;

Die GraphQL-Extension von Visual Studio Code kann übrigens die GraphQL Queries im Code erkennen und erlaubt es, sie direkt aus der IDE heraus auszuführen. Außerdem stellt die Extension Code Completion für die Queries auf Basis der Schema Beschreibung der abgefragten API zur Verfügung.

Zur Darstellung des Ergebnisses erhält die Komponente als Child eine Funktion übergeben ("Function as a Child"-Pattern, die in den verschiedenen Stadien der Query-Ausführung von Apollo mit unterschiedlichen Parametern aufgerufen wird. Während der Ausführung der Query setzt ist beispielsweise der loading-Parameter auf true gesetzt, wenn ein Fehler auftritt, der error-Parameter entsprechend befüllt. Wenn die Query erfolgreich ausgeführt wurde, erfolgt die Übergabe der gelesenen Daten mit dem data-Parameter.

Abhängig von den übergebenen Parametern liefert die Funktion eine dafür passende Komponente zurück. Das folgende Beispiel zeigt den Einsatz der Query-Komponente ebenfalls an Hand der Abfrage, die in der Anwendung die erste Seite darstellen soll.

function OverviewPage(props) {
  return (
    <Query query={OVERVIEW_PAGE_QUERY}>
      {({ data, error, loading }) => {
        if (error) {
          return <h1>Error while loading Beers</h1>;
        }

        if (loading) {
          return <h1>Please stay tuned - Beers are loading . . .</h1>;
        }

        return (
          data.beers.map(beer => (
            <BeerImage
              key={beer.id}
              name={beer.name}
              stars={beer.averageStars}
              beerId={beer.id}  
            />
          ))
        );
      }}
    </Query>
  );
}

Sofern die ausgeführte GraphQL-Abfrage Variablen erwartet, werden diese mit der Property variables an die Query-Komponente übergeben.