Auto generación de código

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
    }
  }
}

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!

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"

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.

• 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
  

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:

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.

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