Utilizzare GraphQL con React e Oracle Content Management

Introduzione

GraphQL è un linguaggio di query per le API e un runtime per soddisfare tali query ai dati esistenti.

In questa esercitazione verrà illustrato come utilizzare GraphQL con React connesso a Oracle Content Management. In particolare, ci concentreremo sulla pagina 'Persone' esistente sul reazione del sito di esempio minimo eseguendo una query sui dati necessari utilizzando GraphQL e il client Apollo. Le altre pagine ('Home' e 'Contattaci') utilizzano attualmente un'API REST.

Prerequisiti

Prima di procedere con questa esercitazione, si consiglia di leggere le seguenti informazioni:

Per seguire questa esercitazione, sono necessari:

Cosa stiamo costruendo

Grazie al sito minimo creato in React, è possibile recuperare facilmente immagini e altri contenuti dal repository di Oracle Content Management.

Per dare un'occhiata a ciò che stiamo creando, ecco lo stato finale della nostra esercitazione, un sito di base React minimo che utilizza i contenuti di Oracle Content Management:

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

Questa esercitazione si concentrerà solo sulla pagina 'Persone' di questo sito.

Questo è l'aspetto della pagina Persone alla fine di questa esercitazione:

Questa immagine mostra la pagina di contatto per un sito React minimo.

Per continuare, sarà necessario disporre di una sottoscrizione attiva a Oracle Content Management ed eseguire il login con il ruolo Amministratore contenuto.

Task 1: Comprendere la tassonomia della pagina Persone

Il pacchetto di asset scaricabile contiene un asset denominato Minimal Main GraphQL con slug 'minimalmaingraphql'.

L'asset Minimal Main GraphQL contiene una pagina di tipo PeoplePage denominata Persone. Questo è l'aspetto:

Questa immagine mostra la tassonomia Minimal Main GraphQL.

L'asset Persone è di tipo PeoplePage e contiene sottotipi di persone. Questo è l'aspetto:

Questa immagine mostra la tassonomia della pagina Persone.

Questo è l'aspetto di un asset persone di esempio (notare tutti i metadati nel pannello Attributi):

Questa immagine mostra la tassonomia delle persone.

Task 2: Usa Apollo Client

Per eseguire una query su questi asset da Oracle Content Management utilizzando GraphQL, è necessario aggiungere la dipendenza "@apollo/client" nel file package.json.

L'endpoint per l'API GraphQL è l'URL del server concatenato con /content/published/api/v1.1/graphql ed è definito nel file src/scripts/services-graphql.js.

const SERVER_URL_GRAPHQL = `${process.env.SERVER_URL}/content/published/api/v1.1/graphql`;

Task 3: eseguire ed elaborare la query GraphQL

Il file src/pages/Routes.js definisce gli instradamenti per l'applicazione. Il percorso /page/people viene indirizzato al componente Persone.

export default [
      {
        ...App,
        routes: [
          {
            ...People,
            path: '/page/people',
            exact: true,
            title: 'People',
          },
          {
            ...Page,
            path: '/page/:slug',
            exact: true,
            title: 'Page',
          },
        ],
      },
    ];

Il componente Persone è responsabile della visualizzazione della pagina Persone. Aprire il componente Persone, disponibile in src/pages/People.jsx.

La funzione fetchInitialData viene chiamata durante il rendering lato server per ottenere i dati dal server.

import fetchPeople from '../scripts/services-graphql';
    
    function fetchInitialData(req) {
      const pageslug = req.path.split('/').pop();
      return fetchPeople(pageslug);
    }

componentDidUpdate verifica se la posizione pathname è stata modificata, che indica una modifica alla navigazione, quindi recupera i dati di conseguenza.

  componentDidUpdate() {
        const { pageSlug } = this.state;
        const { location } = this.props;
        const { pathname } = location;
        const newSlug = pathname.split('/').pop();
        if (pageSlug !== newSlug) {
          this.fetchData(newSlug);
        }
      }
      // Client Side Data Fetching: called from Client when doing client side routing/hydration
      async fetchData(slug) {
        const pageData = await fetchPeople(slug);
        document.title = pageData.name;
        this.setState(() => ({
          pageData,
          pageSlug: slug,
        }));
      }

Nel metodo render() è possibile vedere che i dati da visualizzare vengono ottenuti dallo stato del componente. Questi dati contengono una sezione di annuncio e un elenco di persone, pertanto il metodo rendering() del componente Persone esegue l'iterazione attraverso l'elenco e chiama il componente Persona per ogni persona nell'elenco.

Il componente Persone esporta un oggetto contenente la funzione fetchInitialData e il componente.

export default {
      fetchInitialData,
      component:  People,
    };

Il metodo fetchPeople è definito nel file src/scripts/services-graphql.js e utilizza il client Apollo per effettuare la query riportata di seguito per ottenere tutti i dati per la pagina Persone.

Ulteriori informazioni su come eseguire query sui dati mediante Oracle Content Management sono reperibili nella documentazione.

const GET_PEOPLE_PAGE = gql`
      query ($peopleSlug: String!, $channelToken: String!){
        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
              }
            }
          }
        }
      }`;
    
    export default async function fetchPeople(peopleSlug) {
      // Get the page details
      const channelToken = `${process.env.CHANNEL_TOKEN}`;
      const client = new ApolloClient(
        {
          link: new HttpLink({ uri: SERVER_URL_GRAPHQL, fetch }),
          cache: new InMemoryCache(),
        },
      );
      const page = await client.query({
        query: GET_PEOPLE_PAGE,
        variables: { peopleSlug, channelToken },
      });
    
      const pageData = process.env.IS_BROWSER
        ? page.data.getPeoplePage
        : JSON.parse(JSON.stringify(page.data.getPeoplePage));
      const { people, announcement } = pageData.fields;
      if (announcement.fields.image) {
        announcement.renditionURLs = getSourceSetGraphQL(announcement.fields.image);
      }
      if (people) {
        people.forEach((person) => {
          person.renditionURLs = getSourceSetGraphQL(person);
        });
      }
      return pageData;
    }

Il risultato restituito viene quindi elaborato per creare l'HTML per visualizzare la pagina Persone. L'IDE GraphQL è disponibile all'indirizzo http://your_instance/content/published/api/v1.1/graphql/explorer.

Questa immagine mostra l'esploratore.

Conclusione

In questa esercitazione è stata aggiunta una pagina 'Persone' al sito di esempio React minimal utilizzando GraphQL per ottenere i dati per tale pagina. Le altre pagine ('Home' e 'Contattaci') utilizzano ancora l'API REST.

Ulteriori informazioni su GraphQL in Oracle Content Management sono reperibili nella documentazione.