Usar GraphQL com o React e o Oracle Content Management

Introdução

GraphQL é uma linguagem de consulta para APIs e um runtime para atendimento dessas consultas com seus dados existentes.

Neste tutorial, mostraremos como usar GraphQL com o React conectado ao Oracle Content Management. Em particular, focaremos na página 'Pessoas' existente no Site de amostra mínimo de Reação consultando os dados necessários usando GraphQL e o cliente Apollo. No momento, as outras páginas ('Início' e 'Fale Conosco') estão usando uma API REST.

Pré-requisitos

Antes de prosseguir com este tutorial, recomendamos que você leia as seguintes informações primeiro:

Para seguir este tutorial, você precisará:

O que estamos construindo

Com o site mínimo incorporado no React, você pode recuperar facilmente imagens e outro conteúdo do seu repositório do Oracle Content Management.

Para dar uma olhada no que estamos construindo, aqui está o estado final de nosso tutorial, um site básico do React que consome conteúdo do Oracle Content Management:

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

Este tutorial focará somente na página 'Pessoas' deste site.

Esta é a aparência da página Pessoas no final deste tutorial:

Esta imagem mostra a página de contato conosco para um site mínimo React.

Para continuar, será necessário ter uma inscrição ativa no Oracle Content Management e fazer log-in com a função Administrador de Conteúdo.

Tarefa 1: Compreender a Taxonomia da Página Pessoas

O pacote de ativos para download contém um ativo chamado Mínimo Principal GraphQL com a barra 'minimalmaingraphql'.

O ativo Mínimo Principal GraphQL contém uma página do tipo PeoplePage chamada Pessoas. Parecerá com o seguinte:

Esta imagem mostra a taxonomia Mínima Principal GraphQL.

O ativo Pessoas é do tipo PeoplePage e contém subtipos de pessoas. Parecerá com o seguinte:

Esta imagem mostra a taxonomia da página Pessoas.

É assim que um exemplo de ativo de pessoas se parece (observe todos os metadados no painel Atributos):

Esta imagem mostra a taxonomia das pessoas.

Tarefa 2: Usar Cliente Apollo

Para consultar esses ativos no Oracle Content Management usando GraphQL, precisamos adicionar a dependência "@apollo/client" no arquivo package.json.

O ponto final da API GraphQL é o URL do servidor concatenado com /content/published/api/v1.1/graphql e é definido no arquivo src/scripts/services-graphql.js.

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

Tarefa 3: Executar e Processar a consulta GraphQL

O arquivo src/ Pages/Routes.js define as rotas para o aplicativo. O caminho /page/people é direcionado para o componente Pessoas.

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

O componente Pessoas é responsável por processar a Página Pessoas. Abra o componente Pessoas, localizado em src/ Pages/People.jsx.

A função fetchInitialData é chamada durante a renderização do servidor para obter os dados do servidor.

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

componentDidUpdate verifica se o local pathname foi alterado, o que indica uma alteração de navegação e extrai dados adequadamente.

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

No método render(), você pode ver que os dados a serem renderizados são obtidos do estado do componente. Esses dados têm uma seção de anúncio e uma lista de pessoas, de modo que o método render() do componente Pessoas se repete na lista e chama o componente Pessoa para cada pessoa na lista.

O componente Pessoas exporta um objeto contendo a função fetchInitialData e o componente.

export default {
      fetchInitialData,
      component:  People,
    };

O método fetchPeople é definido no arquivo src/scripts/services-graphql.js e usa o cliente Apollo para fazer a consulta abaixo para obter todos os dados da página Pessoas.

Mais informações sobre como consultar dados usando o Oracle Content Management podem ser encontradas na documentação.

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

O resultado retornado é processado para criar o HTML para exibir a página Pessoas. O IDE GraphQL está disponível em http://your_instance/content/published/api/v1.1/graphql/explorer.

Esta imagem mostra o explorador.

Conclusão

Neste tutorial, adicionamos uma página 'Pessoas' ao site de amostra mínimo React usando GraphQL para obter os dados dessa página. As outras páginas ('Início' e 'Fale Conosco') ainda usam a API REST.

Informações adicionais sobre GraphQL no Oracle Content Management podem ser encontradas na documentação.