Auto generación de código

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

Luciano Cavallo

student•

La autogeneración de código también es una locura!, como anteriormente Prisma! 👌

Agregué la siguiente query para traer un solo avo:

query GetAvo($id: ID!) {
  avo(id: $id) {
    id
    image
    name
    createdAt
    sku
    price
    attributes {
      description
      taste
      shape
      hardiness
    }
  }
}

Cristian Mauricio Cavanzo Arias

student•

Que significa ese "ID!"?

Alfredo Olmedo

student•

ID! = ! Campo obligatorio

Gabriel Hernández Valdez

student•

Hola compañeros, si sale el caso de que usan NPM (o npx) y al tratar de ejecutar el comando para hacer init les sale el siguiente error:

Solo agreguen el script en el package.json (no necesariamente se debe de llamar asi)

    "codeGen-init": "graphql-codegen init"

Luciano Cavallo

student•

Te ví usar el Source Control de vs code y me hizo un click en la cabeza 🤯, como que de repente entendí de que va la cosa. Y la verdad es un super poder el ver git desde el editor! Muy bueno! Saludos!

Kike Vanegas

student•

Pues, fácil no me pareció para nada jeje

Jhunior Eduardo Guevara Lázaro

student•

Comience instalando las básicas de GraphQL Codegen:

yarn add graphql

yarn add -D @graphql-codegen/cli

GraphQL Code Generator le permite configurar todo simplemente ejecutando el siguiente comando:

yarn graphql-codegen init

Pregunta por pregunta, lo guiará a través de todo el proceso de configuración de un esquema, selección de complementos, elección del destino de un archivo generado y mucho más.

Tipo de framework ⇒ React
¿Donde esta tu esquema? ⇒ endpoint: “https://your-website.com/graphql"
¿Donde estan los fragmentos(queries)? ⇒ ‘service/queries.graphql’
¿Que autogeneradores desea?
- Typescript
- Typescript operations
- Typescript React Apollo
¿Donde se escribira el output? ⇒ service/graphql.tsx
¿Desea generar un archivo de introspeccion? ⇒ no
¿Como se llamara el archivo de configuracion? ⇒ codegen.yml
¿Como se llamara el script de codegen en package.json? ⇒ generate

install…

Se crea la carpeta dentro de src/client/service/queries.graphql

Dentro de ese archivo escribir las queries requeridas:

 query GetDogs {
    dogs {
      id
      breed
    }
  }

Instalamos los paquetes que el wisard nos brindó:
```
yarn
```
Corremos el comando generado en el package.json:
```
yarn generate
```

David Prado

student•

Gracias Eduardo, gran resumen de curso!

Pablo Solana

student•

Alguien sabe como le hace para tener fragmentos de código listos solapar pegar?

Diego Reyes Cabrera

student•

Me he estado matanco con el App Router de Next 13 y los cambios de codegen. Recomiendo estos dos recursos: Using Apollo Client with Next.js 13: releasing an official library to support the App Router The new GraphQL Code Generator Client Preset

Elioenai Garcia

student•

Faltó contexto para crear la carpeta de client en el proyecto 🥲, para los que no clonamos el repo del profe.

Elioenai Garcia

student•

npm i -D @graphql-codegen/cli

Irving Juárez

student•

Enamorado de Graphql, type generation y sus caching features

Jhunior Eduardo Guevara Lázaro

student•

Lo que hace codegen tras bambalinas:

Dado:

Unos esquemas: esquema.graphql
Unas queries en el cliente: operation.graphql
Y con un archivo de configuracion: codegen.ts

Se generará unos tipados en typescript y unos custom hooks en react para su respectivo uso.

Jorge Arteaga

student•

Han cambiado algunas cosas en graphql-codegen. Ya no podemos escoger si estamos trabajando con Apollo Client.

Pero se puede continuar con la clase sin problema

Auto generación de código

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