GraphQL mit Vue 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 Vue gezeigt, das mit Oracle Content Management verbunden ist. Insbesondere konzentrieren wir uns auf die vorhandene "People"-Seite auf der Vue minimalen Beispielsite, indem wir die erforderlichen Daten mit GraphQL abfragen. Die anderen Seiten ("Home" und "Kontakt") verwenden derzeit eine REST-API.

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 Vue 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 Vue-Site, die Inhalte von Oracle Content Management konsumiert:

https://headless.mycontentdemo.com/samples/oce-vue-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 Vue-Website.

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: Schnittstelle mit GraphQL in Vue

Die ursprüngliche Absicht dieses Tutorials bestand darin, die vue-apollo-Bibliothek zu verwenden, um eine praktische Schnittstelle zwischen der Oracle Content Management-Oberfläche GraphQL und der minimalen Vue-Beispielanwendung bereitzustellen. Leider war die Implementierung von Vue-apollo zum Zeitpunkt des Schreibens dieses Beispiels nur für Vue 2.x-Anwendungen verfügbar, während das minimale Vue-Beispiel Vue 3.x verwendet. Die Unterstützung von Apollo in Vue 3 ist in Bearbeitung, war jedoch zum Zeitpunkt der Erstellung dieser Probe noch in der Entwicklung auf Alpha-Ebene. Aus diesem Grund wurde dieses Beispiel mit Crossfetch geschrieben, einer Library, die eine Fetch-Implementierung für die serverseitige und clientseitige Verwendung bereitstellt. Da es sich bei einer GraphQL-Abfrage letztendlich nur um eine POST-Anforderung handelt, ist dies zwar noch möglich, erfordert aber eine etwas niedrigere Datenmanipulation als bei einer Vue-apollo-Implementierung.

Vorhandenes Anwendungslayout

Datenabfrage

Das ursprüngliche minimale Vue-Beispiel füllt zwei Seiten mit REST-Aufrufen auf: die Homepage und eine dynamische Seite, die über einen eindeutigen Slug-Wert referenziert wurde. Beide Seiten enthalten einen oder mehrere "Abschnittseinträge", die HTML-Blöcke darstellen, die auf der Seite angezeigt werden sollen. Aufgrund dieses gemeinsamen Layouts können beide Seiten dasselbe Seiten-Template verwenden: Page.vue, um ihre Daten anzuzeigen. Die Seite "Personen", die im Beispiel hinzugefügt wird, weist eine sehr ähnliche Struktur auf, basiert jedoch auf Daten, die mit GraphQL abgerufen werden.

Seitenrouting

Das Routing der Seiten in der Anwendung wird mit der Erweiterung Vue Router verarbeitet. Auf diese Weise können die Seiten in zwei Sonderfälle unterteilt werden: eine Homepage und eine beliebige Anzahl von Seiten, die von eindeutigen Slug-Werten referenziert werden. Auf diese Weise können der Anwendung weitere untergeordnete Seiten hinzugefügt werden, indem einfach im Hauptasset der Anwendung eine Referenz hinzugefügt und dann ein Personenasset wie oben beschrieben definiert wird.

VueX Statusverwaltung

Alle auf den Seiten angezeigten Daten werden mit einem VueX-Speicher verwaltet. Dies ist für die Aufrufe des Content-SDK verantwortlich, mit dem der Inhalt jeder Seite abgerufen wird.

Updates zur Integration von GraphQL Support

Installationsabhängigkeiten

Der erste Schritt besteht in der Installation der Bibliotheken, die wir für die Unterstützung GraphQL benötigen. Wir müssen Crossfetch installieren, um sowohl Browser- als auch serverseitigen Netzwerkzugriff und https-proxy-agent bereitzustellen und bei Bedarf Proxyunterstützung bereitzustellen. Führen Sie dazu den folgenden Befehl aus:

npm install cross-fetch https-proxy-agent

In neuen Code hinzufügen, um die GraphQL-Abfragen auszuführen

Erstellen Sie dann eine neue Datei namens "src/scripts/graphql-service.js". Diese Datei führt eine GraphQL-Abfrage aus und extrahiert dann die nützlichen Felder aus dem Ergebnis. Dazu erstellen Sie eine Cross-Fetch-Abfrage, um einen POST-Aufruf an Oracle Content Management durchzuführen. Die GraphQL-Daten werden im Text des POST-Aufrufs übergeben.

export default async function fetchPeopleData(peopleSlug) {
      try {
        const channelToken = `${process.env.CHANNEL_TOKEN}`;
        const fetchParams = {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            query: `
          {
            getPeoplePage(slug: "${peopleSlug}", channelToken: "${channelToken}" ) {
              id
              slug
              name
              fields {
                announcement {
                  id
                  fields {
                    type: fieldType
                    heading
                    body
                    actions
                    image {
                      ...sectionImages
                    }
                  }
                }
                people {
                  id
                  fields {
                    fullname
                    title
                    biodata
                    file {
                      metadata {
                        width
                        height
                      }
                    }
                    renditions {
                      name
                      format
                      file {
                        url
                        metadata {
                          height
                          width
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          fragment sectionImages on image {
            id
            fields {
              file {
                metadata {
                  width
                  height
                }
              }
              renditions {
                name
                format
                file {
                  url
                  metadata {
                    height
                    width
                  }
                }
              }
            }
          }
          `,
          }),
        };
    
        // Figure out if we need a proxy. Only needed on server-side render
        if (typeof window === 'undefined' && typeof process === 'object') {
          const proxyServer = process.env.SERVER_URL.startsWith('https')
            ? process.env.oce_https_proxy : process.env.oce_https_proxy;
          if (proxyServer) {
            const proxy = createHttpsProxyAgent(proxyServer);
            fetchParams.agent = proxy;
          }
        }
    
        const response = await fetch(`${process.env.SERVER_URL}/content/published/api/v1.1/graphql`, fetchParams);
        const queryResult = await response.json();
        return extractRequiredPeopleFields(queryResult);
      } catch (error) {
        console.log(error);
        return ('');
      }
    }

Außerdem gibt es eine kleine Utilityfunktion, mit der das vom Aufruf zurückgegebene JavaScript-Objekt vereinfacht wird. Dadurch wird das unnötige Verschachteln von Daten im Ergebnis reduziert.

function extractRequiredPeopleFields(queryResult) {
      const result = { announcement: {}, people: [] };
    
      result.slug = queryResult.data.getPeoplePage.slug;
      result.name = queryResult.data.getPeoplePage.name;
      const base = queryResult.data.getPeoplePage.fields;
      if (base.announcement) {
        result.announcement = base.announcement.fields;
      }
      if (base.people) {
        result.people = base.people;
      }
      return result;
    }

Abfragecode in den VueX Store integrieren

Nachdem die Daten abgerufen werden können, müssen Sie sie im VueX-Speicher speichern, mit dem die Anwendung ihre Daten verwaltet. Dies geschieht in src/vuex/index.js, indem die folgenden Utilityfunktionen und Speicher hinzugefügt werden:

    state.peoplePageData // storage for the object data
        // get the data for the People Page given its slug
        fetchPeoplePage({ commit }, pageSlug) {
          return fetchPeopleData(pageSlug).then((data) => {
            commit('setPeoplePageData', data);
          });
        },
        // setter function used to update the state
        setPeoplePageData(state, data) {
          state.peoplePageData = data;
        },

Code verzweigen, um die Seite "Personen" wiederzugeben

Als Nächstes wird der Integrationspunkt erstellt, an dem die Anwendung den Code zur Wiedergabe einer Personenseite aufrufen kann. Dies geschieht, indem der vorhandene Code in Page.vue geändert wird, sodass er bedingt auf dem Slug-Wert angezeigt wird. Diese finden Sie in src/pages/Page.vue.


    <!-- Component for the Page. -->
    // The template will conditionally render different sections depending 
    // on the value of the unique slug of the current page. 
    <template>
      <div v-if="data.hasError">
        <Error :errorObj="data" />
      </div>
      <div v-else-if="data.slug === 'people'">
        <Person :gqldata ="data"/>
      </div>
      <div v-else>
        <section :class="`content ${section.fields.type}`" :key="section.id"
          v-for="(section) in data.fields.sections">
          <Section :section="section" />
        </section>
      </div>
    </template>
    
    ....
    // Likewise, the fetch data call will seek out different data from the VueX store depending on 
    // the desired slug
    methods: {
        fetchData() {
          let data = {};
          // People is a special case and is handled by GraphQL in the store
          if (this.slug === 'people') {
            data = this.$store.dispatch('fetchPeoplePage', this.slug);
          } else {
          // return the Promise from the action
            data = this.$store.dispatch('fetchPage', this.slug);
          }
          return data;
        },
      },

Code hinzufügen, um den Inhalt der People-Seite wiederzugeben

Als Nächstes erstellen wir die Komponente, die den Inhalt der Seite "Personen" generiert. Dieser Code befindet sich in src/components/Person.vue. Rendering ist recht einfach. Der ausführbare Code in der Komponente verwendet den übergebenen Seiten-Slug (in diesem Fall immer "Personen") und ruft dann die entsprechenden Daten aus dem VueX-Cache ab. Dies gibt ein einfaches JavaScript-Objekt zurück, das dann in der folgenden Vorlage verwendet wird.

<template>
      <div >
        <section  class="announcement">
            <div>
          <picture v-if="gqldata.announcement.image && renditionURLs">
          <source type="image/webp" :srcSet="renditionURLs.srcset" />
          <source :srcSet="renditionURLs.jpgSrcset" />
          <img
            id="header-image"
            :src="renditionURLs.large"
            alt="Company Logo"
            :width="renditionURLs.width"
            :height="renditionURLs.height"
          />
          </picture>
              <div class="textcontent">
                <h1>{{gqldata.announcement.heading}}</h1>
              </div>
              <div class="text">
                <div v-html=cleanContent></div>
              </div>
            </div>
        </section>
          <div class="all_people">
          <div v-for="person in gqldata.people" :key="person.id" >
            <section className="person">
              <img className="profile_picture"
              :src="person.fields.renditions[0].file.url" :alt="person.fields.fullname" />
              <div className="profile">
                <div className="profile_name">{{person.fields.fullname}}</div>
                <div className="profile_position">{{person.fields.title}}</div>
                <div className="profile_description">{{person.fields.biodata}}</div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </template>

Der verbleibende Code in der Komponente wird verwendet, um die Daten aus dem VueX-Speicher abzurufen.

Neues CSS hinzufügen

Schließlich fügen wir der Anwendung die erforderliche CSS-Formatierung hinzu. Diese finden Sie in src/assets/global.css.

/*
    * Styles for the people cards
    */
    .all_people {
      margin: 0 auto;
      max-width: 1000px;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 50px;
      margin-top: 50px;
      margin-bottom: 50px;
    }
    
    .person {
      margin: 0 auto;
      width: 300px;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 2px 4px rgba(0, 0, 0, 0.5), 0px -2px 2px rgba(0, 0, 0, 0.15);
      height: 100%;
    }
    
    .profile {
      padding: 20px 15px;
    }
    
    .profile_picture {
      width: 100%;
      height: 200px;
      object-fit: cover;
      display: block;
    }
    
    .profile_name {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
    }
    
    .profile_position {
      text-align: center;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.7);
      margin-bottom: 18px;
    }
    
    .profile_description {
      font-size: 14px;
      display: flex;
      justify-content: center;
    }

Schlussfolgerung

In diesem Tutorial wurde der Vue minimalen Beispielsite mit GraphQL eine "People"-Seite hinzugefügt, um die Daten für diese Seite abzurufen. Die anderen Seiten ("Home" und "Kontakt") verwenden weiterhin die REST-API.

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