GraphQL mit Gatsby und Oracle Content Management verwenden

Einführung

GraphQL ist eine Abfragesprache für APIs und eine Laufzeit zur Erfüllung dieser Abfragen mit Ihren vorhandenen Daten.

In diesem Tutorial wird die Verwendung von GraphQL mit Gatsby gezeigt, das mit Oracle Content Management verbunden ist. Insbesondere konzentrieren wir uns auf die vorhandene "People"-Seite auf der Gatsby minimalen Beispielsite, indem wir die erforderlichen Daten mit GraphQL abfragen, die mit dem Gatsby Source GraphQL-Plug-in verbunden ist. Auf den anderen Seiten ("Home" und "Kontakt") wird derzeit eine REST-API verwendet, die mit dem Gatsby Source OCE-Plug-in verbunden ist.

Voraussetzungen

Bevor Sie mit diesem Tutorial fortfahren, sollten Sie zuerst die folgenden Informationen lesen:

Um diesem Tutorial zu folgen, benötigen Sie Folgendes:

Unser Aufbau

Mit der in Gatsby erstellten minimalen Site können Sie problemlos Bilder und andere Inhalte aus dem Oracle Content Management-Repository abrufen.

Im Folgenden finden Sie den Endstatus unseres Tutorials, eine minimale Gatsby-Site, die Inhalte von Oracle Content Management konsumiert:

https://headless.mycontentdemo.com/samples/oce-gatsby-minimal-sample

Dieses Tutorial konzentriert sich ausschließlich auf die Seite "Personen" dieser Site.

So sieht die Seite "Personen" am Ende dieses Tutorials aus:

Diese Abbildung zeigt die Kontaktseite für eine minimale Website von Gatsby.

Um fortzufahren, müssen Sie ein aktives Abonnement für Oracle Content Management haben und mit der Rolle "Inhaltsadministrator" angemeldet sein.

Aufgabe 1: Taxonomie der Seite "Personen"

Das herunterladbare Asset Pack enthält ein Asset namens "Minimal Main" GraphQL mit dem Slug "minimalmaingraphql".

Das Asset Minimal Main GraphQL enthält eine Seite des Typs PeoplePage mit dem Namen "Personen". So sieht es aus:

Diese Abbildung zeigt die Taxonomie "Minimal Main GraphQL".

Das People Asset hat den Typ PeoplePage und enthält Untertypen von Personen. So sieht es aus:

Diese Abbildung zeigt die Taxonomie der Seite "Personen".

So sieht ein Beispiel für ein people-Asset aus (beachten Sie alle Metadaten im Bereich "Attribute":

Diese Abbildung zeigt die Personentaxonomie.

Aufgabe 2: Verbindung zum Gatsby Source-Plug-in GraphQL herstellen

Um diese Assets aus Oracle Content Management abzufragen, müssen Sie das Plug-in Gatsby Source GraphQL in der Datei gatsby-config.js konfigurieren. Dieses Plug-in muss den Abhängigkeiten in der Datei package.json hinzugefügt werden.

Im Folgenden finden Sie den Code für diese Konfiguration in gatsby-config.js.

    {
          resolve: 'gatsby-source-graphql',
          options: {
            // This type will contain remote schema Query type
            typeName: 'OCM',
            // This is the field under which it's accessible
            fieldName: 'ocm',
            // URL to query from
            url: `${process.env.SERVER_URL}/content/published/api/v1.1/graphql`,
          },
        },

Der Endpunkt für die GraphQL-API ist die mit /content/published/api/v1.1/graphql verkettete Server-URL.

Beachten Sie, dass typeName und fieldName den Abfragetyp des Remoteschemas und das Feld enthalten, unter dem der Zugriff möglich ist. Die Benennung hier ist nicht zu wichtig, solange sie in der Abfrage konsistent ist.

Aufgabe 3: Abfrage GraphQL ausführen und verarbeiten

Im Folgenden finden Sie einen Abschnitt aus der Datei gatsby-node.js. Sie leitet die Seite mit Slug "people" an den richtigen Pfad mit Komponente und Kontext weiter, indem sie die Methode createPage in Gatsby verwendet. Beachten Sie, wie die Seitendaten, der Slug und channelToken im Kontext übergeben werden.

} else if (page.slug.localeCompare('people') === 0) {
        createPage({
            path: '/people',
            component: peopleTemplate,
            context: {
                page,
                slug: 'people',
                channelToken: process.env.CHANNEL_TOKEN,
            },
        });

Nachdem die Seite an die People-Vorlage weitergeleitet wurde, wird die folgende Abfrage ausgeführt, um alle Daten für die People-Seite abzurufen. Für den Zugriff auf die GraphQL-API für diese Seite sind ein Slug und channelToken erforderlich.

Weitere Informationen zum Abfragen von Daten mit Oracle Content Management finden Sie in der Dokumentation.

query ($slug: String!, $channelToken: String!) { 
      ocm {
        getPeoplePage(
          slug: $slug
          channelToken: $channelToken
        ) {
          id
          slug
          name
          fields {
            announcement {
              id
              fields {
                type: fieldType
                heading
                body
                actions
                image {
                  ... on OCM_image {
                    id
                    name
                    fields {
                      renditions {
                        file {
                          url
                        }
                      }
                    }
                  }
                }
              }
            }
            people {
              id
              fields {
                fullname
                title
                biodata
                file {
                  metadata {
                    width
                    height
                  }
                }
                renditions {
                  name
                  format
                  file {
                    url
                    metadata {
                      height
                      width
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

Beachten Sie, dass die Abfrage der obersten Ebene ocm enthält und typeName im Image OCM_Image lautet. Dies muss mit den typeName und fieldName konsistent sein, die mit den Optionen in gatsby-config.js verknüpft sind.

Das zurückgegebene Ergebnis wird dann verarbeitet, um die HTML zu erstellen und die Seite "Personen" anzuzeigen. Um die Ausgabe der Abfrage anzuzeigen, gehen Sie zum GraphQL-Explorer, der sich unter http://localhost:8000/___graphql befindet, nachdem Sie npm run develop im Terminal aufgerufen haben. Außerdem ist die GraphQL-IDE unter http://your_instance/content/published/api/v1.1/graphql/explorer verfügbar.

Diese Abbildung zeigt den Explorer.

Schlussfolgerung

In diesem Tutorial wurde der Gatsby minimales Beispielsite mit GraphQL eine "People"-Seite hinzugefügt, um die Daten für diese Seite abzurufen. Die von GraphQL mit Gatsby abgerufenen Daten wurden mit dem Plug-in Gatsby Source GraphQL mit Oracle Content Management verbunden. Auf den anderen Seiten ("Home" und "Kontakt") wird weiterhin die REST-API verwendet, die mit dem Gatsby Source OCE-Plug-in verbunden ist. Sowohl das Gatsby Source OCE-Plug-in als auch das Gatsby Source-Plug-in GraphQL sind gültige Methoden zum Abrufen von Daten aus Oracle Content Management.

Weitere Informationen zu GraphQL in Oracle Content Management finden Sie in der Dokumentation.