Contenido del curso
Herramientas de GraphQL en el frontend
GraphQL y Next.js
Próximos pasos
Auto generación de código
Luciano Cavallo
student
Cristian Mauricio Cavanzo Arias
student
Alfredo Olmedo
studentContenido del curso
Auto generación de código
Luciano Cavallo
studentCristian Mauricio Cavanzo Arias
studentAlfredo Olmedo
student
Gabriel Hernández Valdez
studentLuciano Cavallo
student
Kike Vanegas
student
Jhunior Eduardo Guevara Lázaro
student
David Prado
student
Pablo Solana
student
Diego Reyes Cabrera
student
Elioenai Garcia
studentElioenai Garcia
student
Irving Juárez
studentJhunior Eduardo Guevara Lázaro
student
Jorge Arteaga
studentLa 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