Conectando páginas y Static Site Generation (SSG)

Clase 9 de 16 • Curso de Next.js con GraphQL

Abel da Cunha

student•

A esta altura del curso me perdí... no puedo seguirlo porque voy 2 versiones adelante en next, el apollo del curso no funciona. Estoy mirando a ver si aprendo un par de trucos, pero me perdí, hace algo, lo borra, lo mueve... ME PERDÍ.

Nery Alberto Cano Ortigoza

student•

yo creo que no, el curso tiene tantas cosas rotas que ya no es viable

Giancarlo Culcay

student•

El branch del profe con la solución link

no olviden agregar el .env con la dirección url de los avocados

Jose Angel Morales Gonzalez

student•

Esto es algo que me confunde, si ya tengo la información de los aguacates en un arreglo. ¿No sería mejor enviar por parámetros ese arreglo a la página de detalle?

Camilo Perilla

student•

Cuando vas a la pagina detalle, se hace unmount de la pagina de home. Tendriamos que enviar la data de los avocados a la pagina de detalle antes de que eso suceda (talvez un estado global o un context) pero todo eso tomaria tiempo en el cliente, y como buscamos un sitio estatico con Next.js, podriamos pre-renderizar cada pagina de detalle para cada avocado cuando hacemos build con ayuda de getStaticPaths. De esa forma cuando damos click en un avocado, su pagina de detalle ya esta lista y se mostrara de forma casi inmediata, sin ningun tipo delay.

Elioenai Garcia

student•

yarn

yarn add @graphql-codegen/typed-document-node

npm

 npm i @graphql-codegen/typed-document-node

Conectando páginas y Static Site Generation (SSG)

Introducción

Arquitectura de nuestro frontend con GraphQL

Consumiendo una API GraphQL con JS puro

Herramientas de GraphQL en el frontend

Usando Axios y React Query

Usando Apollo Client

¿Qué hace diferente a Apollo Client?

#UnderTheHood: Tipos en las respuestas

Auto generación de código

GraphQL y Next.js

#UnderTheHood SSR con GraphQL en Next.js

Conectando páginas y Static Site Generation (SSG)

Autenticación y manejo de sesión

Operaciones con autenticación

Apollo Cache e Incremental Site Generation (ISG)

Próximos pasos

¿Qué quieres aprender? Ideas y retos

Suscripciones

Desventajas de GraphQL en el frontend

Sigue profundizando en Next.js