Uso de GraphQL y Autogeneración en Next.js con Contentful

Curso de Next.js: Sitios Estáticos y Jamstack

Contenido del curso

Introducción: rendering modes de Next.js

Arquitectura del proyecto

Static Generation

Incremental Static Generation

Siguientes pasos

18
Despliegue de Next.js hacia Producción: Variables y Optimización
01:41 min

Bonus

19
Lectura de Archivos en Next.js con Node.js y File System
09:51 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0022:27

Uso de GraphQL y Autogeneración en Next.js con Contentful

Curso de Next.js: Sitios Estáticos y Jamstack

Clase 7 de 19

Clase 7 / 19

Recursos

¿Cómo utilizar GraphQL y autogeneración en Next.js?

GraphQL, una poderosa herramienta para interactuar con APIs, se integra en nuestros proyectos de Next.js, llevándonos a explorar un mundo de autogeneración mediante este tutorial. Veremos cómo conectar GraphQL con Contentful y cómo la autogeneración en TypeScript mejora la calidad de nuestro código.

¿Qué es la API de GraphQL y cómo se utiliza con Contentful?

Si no estás familiarizado con GraphQL, es esencial conocer que GraphQL nos permite interactuar directamente con APIs a través del navegador. Para este propósito, Contentful nos facilita un editor donde podemos escribir y ejecutar queries.

Configuración de la Session: Necesitarás el Space ID y el Content Delivery API Token, que previamente configuraste en Contentful.
Editor GraphiQL: Ofrece un entorno donde escribimos nuestras queries a la izquierda y vemos los resultados a la derecha.

¿Cómo ejecutar una query básica en GraphQL?

Para una mejor comprensión, podemos empezar con una query simple en GraphQL para obtener una colección de plantas y sus autores.

query {
  plantCollection {
    items {
      plantName
      author {
        fullName
      }
    }
  }
}

Esta query pide el nombre de las plantas y los nombres completos de los autores en cada item del conjunto de resultados.

¿Integración de GraphQL en un proyecto de Next.js?

Implementar queries de GraphQL en Next.js es más simple de lo que parece. Utilizamos window.fetch con el método POST para llamar al endpoint de GraphQL, y autenticamos mediante headers:

fetch('GRAPHQL_ENDPOINT_URL', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${accessToken}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    query: `query {
      plantCollection {
        items {
          plantName
        }
      }
    }`
  })
})
.then(response => response.json())
.then(data => console.log(data));

Esta estructura básica será la manera en que interactuamos de primera mano con la API desde nuestro proyecto en JavaScript.

¿Cuáles son las ventajas de la autogeneración de código en TypeScript?

Autogenerar código con GraphQL resulta esencial para un desarrollo más eficiente y seguro. Proporcionamos a TypeScript la capacidad de inferir tipos a partir de las respuestas de GraphQL, esto se logra a través de herramientas como GraphQL Code Generator.

Ventajas:
- Validación de Tipo: Nos protege de acceder a propiedades inexistentes en las responses.
- Type Safety: Facilita el trabajo del desarrollador mediante sugerencias de autocompletado precisas basadas en los tipos conocidos.

Este enfoque introduce la capacidad de desarrollar rápidamente con menos errores, confiando siempre en las herramientas automáticas para lidiar con estructuras complejas de datos.

¿Cómo configurar la autogeneración en TypeScript?

Para garantizar que las claves de API no se comparten, es primordial guardarlas en variables de entorno. Así, mantenemos la seguridad de nuestros proyectos:

NEXT_PUBLIC_SPACE_ID=<your_contentful_space_id>
NEXT_PUBLIC_ACCESS_TOKEN=<your_access_token>

Estas variables permiten que el script de generación de TypeScript se ejecute correctamente y aseguren que nuestro código respete las mejores prácticas de seguridad.

¿Qué sigue después de integrar GraphQL y TypeScript?

Con GraphQL y TypeScript configurados, Next.js nos invita a explorar más allá. La ejecución del código autogenerado propicia aplicaciones más rápidas y seguras. Te animamos a seguir practicando, incluso desafiarte a configurar tu propia API con GraphQL Code Generator. La clave está en experimentar y optimizar el poder de estas tecnologías integradas.

Invitamos a todos a sumergirse y jugar con estas herramientas. Con GraphQL, la autogeneración y Next.js, estás construyendo aplicaciones que no solo son modernas, sino escalables y robustas. ¡Buena suerte en tu camino hacia más conocimiento!

Israel Hernández Galicia

Hace 2 años

Para aquellos en 2024 que esten siguiendo los pasos, les van a salir varios errores, si tienes una IA como copilot, los puede ir guiando, pero si no, algunos pasos:

1.- En el archivo next.config.js, así tienen que tenerlo, ya que da un error con una clave de webpack 5

const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true',}) const config = { // Otras configuraciones si las hay} module.exports = withBundleAnalyzer(config)

2.- Tienes que tener instalado una dependencia llamada cross-env, es para las variables de entorno : npm install cross-env --save-dev

3.- Tambien tienen que tener en su package.json asi:

{

"scripts": {

"dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider next dev",

"build": "cross-env NODE_OPTIONS=--openssl-legacy-provider next build",

"start": "cross-env NODE_OPTIONS=--openssl-legacy-provider next start",

"test": "yarn type-check",

"type-check": "tsc --noEmit",

"build:schema": "graphql-codegen --config codegen.yml"

}

4.-La version de react y react-dom tienen que actualizarlas: npm install react@latest react-dom@latest

5.- Hagan un npm audit fix --force para que todas las dependencias de compongan.

Ahora si corre tu proyecto con npm run dev, el curso ya tiene sus años, entonces es algo complejo hacer que funcione en 2024, si no hacen esos pasos les va a salir que cambien de version de node a la 16.

Espero les sirve alguno.

Comentarios (21)21 comentarios

Eduardo Fortuna

Hace 5 años

Francisco Sarria

Luis Berenguer

Richard Espinoza

Yadurani Lopez Rivera

Sebastián Sánchez

Rony Porraz Vargas

Carlos Eduardo Magallon Zepeda

Pol Valle

Hace 3 años

William Cortes

Hace 4 años

Marcelo Oggero

Christian Diaz Portela Flores

Jair Neri

Anthony Quintero

Ulqernesh Karvenae

Hace un año

Alexander Silvera

Jonathan 🦑 Alvarez

Profesor

Alejandro Mejia Escobar

Erick Fariñas

Victor Marquez

Francisco Enrique Giménez Vera

Nilson Diaz

Gonzalo Quispe

Jhunior Eduardo Guevara Lázaro

Reynaldo Francisco Moreno Briceño

Introducción: rendering modes de Next.js

Creación de sitios estáticos con Next.js y Jamstack

Modos de Rendering en Next.js: Cliente, Servidor y Estático

Arquitectura del proyecto

Arquitectura Jam Stack con Next.js y GraphQL

Configuración de Contentful: Creación de Cuenta y API Tokens

Importación de Datos y Configuración en Contentful

Configuración y uso inicial de un proyecto Next.js con Contentful

Uso de GraphQL y Autogeneración en Next.js con Contentful

Static Generation

Renderizado de Listas con Next.js y Contentful

"Uso de getStaticProps en Next.js para Renderizado en Servidor"

Páginas Dinámicas en Next.js: Renderizado de Plantas y Entradas

Uso de getStaticPaths y getStaticProps en Next.js para páginas dinámicas

Ventajas y desventajas de Static Site Generation en Next.js

Incremental Static Generation

Configuración de Incremental Static Generation en Next.js

Uso del Fallback en Next.js: Estrategias y Aplicaciones

Estrategia Stale-While-Revalidate en Next.js

Ventajas y desventajas del Incremental Static Generation en Next.js

Server Side Rendering con Next.js: Ventajas y Desventajas

Siguientes pasos

Despliegue de Next.js hacia Producción: Variables y Optimización

Bonus

Lectura de Archivos en Next.js con Node.js y File System

Uso de GraphQL y Autogeneración en Next.js con Contentful

Progreso del curso

Introducción: rendering modes de Next.js

Arquitectura del proyecto

Static Generation

Incremental Static Generation

Siguientes pasos

Bonus

Recursos

Recursos