Utilizar GraphQL con Gatsby y Oracle Content Management

Introducción

GraphQL es un lenguaje de consulta para las API y un tiempo de ejecución para satisfacer esas consultas con los datos existentes.

En este tutorial, se mostrará cómo utilizar GraphQL con Gatsby conectado a Oracle Content Management. En concreto, nos centraremos en la página "Personas" existente en el sitio de ejemplo mínimo de Gatsby consultando los datos necesarios mediante GraphQL conectado al plugin Gatsby Source GraphQL. Las otras páginas ('Inicio' y 'Contacto') están utilizando actualmente una API de REST conectada al plugin Gatsby Source OCE.

Requisitos

Antes de continuar con este tutorial, le recomendamos que lea primero la siguiente información:

Para seguir este tutorial, necesitará:

Lo que estamos creando

Con el sitio mínimo creado en Gatsby, puede recuperar fácilmente imágenes y otro contenido de su repositorio de Oracle Content Management.

Para echar un vistazo a lo que estamos creando, este es el estado final de nuestro tutorial, un sitio básico de Gatsby mínimo que consume contenido de Oracle Content Management:

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

Este tutorial se centrará únicamente en la página "Personas" de este sitio.

Este es el aspecto que tendrá la página People al final de este tutorial:

En esta imagen, se muestra la página de contacto para un sitio mínimo de Gatsby.

Para continuar, necesitará tener una suscripción activa a Oracle Content Management y estar conectado con el rol de administrador de contenido.

Tarea 1: Descripción de la taxonomía de la página Personas

El paquete de activos descargable contiene un activo denominado Minimal Main GraphQL con el slug 'minimalmaingraphql'.

El activo Mínimo principal GraphQL contiene una página de tipo PeoplePage denominada Personas. Esto es así:

En esta imagen se muestra la taxonomía GraphQL principal mínima.

El activo People es del tipo PeoplePage y contiene subtipos de personas. Esto es así:

En esta imagen se muestra la taxonomía de la página Personas.

Este es el aspecto de un activo people de ejemplo (tenga en cuenta todos los metadatos en el panel Atributos):

En esta imagen se muestra la taxonomía de personas.

Tarea 2: Conexión al plugin Gatsby Source GraphQL

Para consultar estos activos desde Oracle Content Management, debemos configurar el plugin Gatsby Source GraphQL en el archivo gatsby-config.js. Este plugin se debe agregar a las dependencias del archivo package.json.

A continuación, se muestra el código de esa configuración en 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`,
          },
        },

El punto final de la API GraphQL es la URL del servidor concatenada con /content/published/api/v1.1/graphql.

Tenga en cuenta que typeName y fieldName se utilizan para contener el tipo de consulta de esquema remoto y el campo en el que se puede acceder, respectivamente. La nomenclatura aquí no es demasiado importante siempre que sea coherente en la consulta.

Tarea 3: Ejecutar y procesar la consulta GraphQL

A continuación, se muestra una sección del archivo gatsby-node.js. Enruta la página con el segmento 'people' a la ruta de acceso adecuada con el componente y el contexto mediante el método createPage en Gatsby. Observe cómo transferimos los datos de la página, los fragmentos y channelToken en el contexto.

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

Una vez enviada a la plantilla de página Personas, se ejecuta la siguiente consulta para obtener todos los datos de la página Personas. Se necesita un fragmento y channelToken para acceder a la API GraphQL de esta página.

Puede encontrar más información sobre cómo consultar datos mediante Oracle Content Management en la documentación.

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

Observe cómo la consulta de nivel superior tiene ocm en ella y typeName en la imagen es OCM_Image. Debe ser coherente con typeName y fieldName asociados a las opciones proporcionadas en gatsby-config.js.

A continuación, el resultado devuelto se procesa para crear el HTML y mostrar la página Personas. Para ver la salida de la consulta, puede ir al explorador GraphQL, que se puede encontrar en http://localhost:8000/___graphql después de llamar a npm run develop en el terminal. Además, el IDE GraphQL está disponible en http://your_instance/content/published/api/v1.1/graphql/explorer.

En esta imagen se muestra el explorador.

Conclusión

En este tutorial, hemos agregado una página "Personas" al sitio de ejemplo mínimo de Gatsby mediante GraphQL para obtener los datos de esa página. Los datos obtenidos de GraphQL con Gatsby se conectaron a Oracle Content Management mediante el plugin Gatsby Source GraphQL. Las otras páginas ('Inicio' y 'Contacto') siguen utilizando la API de REST conectada al plugin Gatsby Source OCE. Tanto el plugin Gatsby Source OCE como el plugin Gatsby Source GraphQL son formas válidas de obtener datos de Oracle Content Management.

Puede encontrar información adicional sobre GraphQL en Oracle Content Management en la documentación.