Utiliser GraphQL avec React et Oracle Content Management

Introduction

GraphQL est un langage de requête pour les API et une exécution permettant d'exécuter ces requêtes avec vos données existantes.

Dans ce tutoriel, nous vous montrerons comment utiliser GraphQL avec React connecté à Oracle Content Management. Nous nous concentrerons notamment sur la page "Personnes" existante du site échantillon minimal en interrogeant les données nécessaires à l'aide du client GraphQL et Apollo. Les autres pages ('Accueil' et 'Nous contacter') utilisent actuellement une API REST.

Prérequis

Avant de poursuivre ce tutoriel, nous vous recommandons de lire les informations suivantes en premier :

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

Ce que nous construisons

Grâce au site minimal intégré React, vous pouvez facilement extraire des images et d'autres contenus de votre référentiel Oracle Content Management.

Pour regarder ce que nous construisons, voici l'état de fin de notre tutoriel, un site minimal React de base qui utilise le contenu d'Oracle Content Management :

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

Ce tutoriel se concentrera uniquement sur la page "Personnes" de ce site.

Voici à quoi ressemblera la page Personnes à la fin de ce tutoriel :

Cette image présente la page Nous contacter pour un site minimal React.

Pour continuer, vous devez disposer d'un abonnement actif à Oracle Content Management et être connecté avec le rôle Administrateur de contenu.

Tâche 1 : Comprendre la taxonomie de la page Personnes

Le pack de ressources téléchargeables contient une ressource appelée Minimal Main GraphQL avec le slug 'minimalmaingraphql'.

La ressource Minimal Main GraphQL contient une page de type PeoplePage appelée Personnes. Il se présente comme suit :

Cette image présente la taxonomie principale GraphQL minimale.

La ressource People est de type PeoplePage et contient des sous-types de personne. Il se présente comme suit :

Cette image présente la taxonomie de la page Personnes.

Voici un exemple de ressource people (notez toutes les métadonnées dans le panneau Attributes) :

Cette image présente la taxonomie des personnes.

Tâche 2 : utilisation du client Apollo

Pour interroger ces ressources à partir d'Oracle Content Management à l'aide de GraphQL, nous devons ajouter la dépendance "@apollo/client" dans le fichier package.json.

L'adresse de l'API GraphQL est l'URL du serveur concaténée avec /content/published/api/v1.1/graphql et définie dans le fichier src/scripts/services-graphql.js.

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

Tâche 3 : exécution et traitement de la requête GraphQL

Le fichier src/pages/Routes.js définit les routages de l'application. Le chemin /page/people est dirigé vers le composant Personnes.

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

Le composant Personnes est chargé d'afficher la page Personnes. Ouvrez le composant Personnes à l'adresse src/pages/People.jsx.

La fonction fetchInitialData est appelée lors du rendu côté serveur pour obtenir les données du serveur.

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

componentDidUpdate vérifie si l'emplacement pathname a changé, ce qui indique une modification de navigation, puis extrait les données en conséquence.

  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,
        }));
      }

Dans la méthode de rendu(), vous pouvez voir que les données à afficher sont obtenues à partir de l'état du composant. Ces données comportent une section d'annonce et une liste de personnes, de sorte que la méthode de rendu() du composant Personnes itére dans la liste et appelle le composant Personne pour chaque personne de la liste.

Le composant Personnes exporte un objet contenant la fonction fetchInitialData et le composant.

export default {
      fetchInitialData,
      component:  People,
    };

La méthode fetchPeople est définie dans le fichier src/scripts/services-graphql.js et utilise le client Apollo pour effectuer la requête ci-dessous afin d'obtenir toutes les données de la page Personnes.

Pour plus d'informations sur l'interrogation des données à l'aide d'Oracle Content Management, reportez-vous à la documentation.

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;
    }

Le résultat renvoyé est ensuite traité pour créer le code HTML afin d'afficher la page Personnes. L'IDE GraphQL est disponible à l'adresse http://your_instance/content/published/api/v1.1/graphql/explorer.

Cette image représente l'explorateur.

Conclusion

Dans ce tutoriel, nous avons ajouté une page "Personnes" au site échantillon minimal exact en utilisant GraphQL pour obtenir les données de cette page. Les autres pages ('Accueil' et 'Nous contacter') utilisent toujours l'API REST.

Pour plus d'informations sur GraphQL dans Oracle Content Management, reportez-vous à la documentation.