Auto generación de código
Contenido del curso
Herramientas de GraphQL en el frontend
GraphQL y Next.js
Próximos pasos
Auto generación de código
Contenido del curso
Auto generación de código
Luciano Cavallo
Estudiante
Cristian Mauricio Cavanzo Arias
Estudiante
Alfredo Olmedo
Estudiante
Gabriel Hernández Valdez
EstudianteLuciano Cavallo
Estudiante
Kike Vanegas
Estudiante
Jhunior Eduardo Guevara Lázaro
Estudiante
David Prado
Estudiante
Pablo Solana
Estudiante
Diego Reyes Cabrera
Estudiante
Elioenai Garcia
EstudianteElioenai Garcia
Estudiante
Irving Juárez
EstudianteJhunior Eduardo Guevara Lázaro
Estudiante
Jorge Arteaga
EstudianteLa 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 } } }
Que significa ese "ID!"?
ID! = ! Campo obligatorio
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"
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!
Pues, fácil no me pareció para nada jeje
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.
React“https://your-website.com/graphql"‘service/queries.graphql’TypescriptTypescript operationsTypescript React Apolloservice/graphql.tsxnocodegen.ymlgenerateinstall…
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
Gracias Eduardo, gran resumen de curso!
Alguien sabe como le hace para tener fragmentos de código listos solapar pegar?
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
Faltó contexto para crear la carpeta de client en el proyecto 🥲, para los que no clonamos el repo del profe.
npm i -D @graphql-codegen/cli
Enamorado de Graphql, type generation y sus caching features
Lo que hace codegen tras bambalinas:
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.
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