Seguridad de tipo de extremo a extremo con React, GraphQL y Prisma

♪♪ Muy bien, creo que vamos a empezar. Bueno, en primer lugar, bienvenidos a todos. Gracias por unirse a mí. Para mí es por la mañana en este momento, pero sé que probablemente sea por la noche para muchos de ustedes o media tarde, así que gracias por tomarse el tiempo para venir y pasar un rato conmigo.

En este masterclass, vamos a aprender sobre seguridad de tipo de extremo a extremo con React, GraphQL y Prisma, como sugiere el título. Y vamos a pasar por todas las diferentes piezas de configurar una aplicación de pila completa, configurando seguridad de tipo de extremo a extremo para hacer todo esto. Pero antes de meternos en el trabajo real de todo esto, mientras ustedes se unen, repasaré los detalles de cómo será hoy. Vamos a utilizar este documento de Notion que he preparado como nuestra guía. Será nuestro mapa de ruta durante todo el masterclass. Y está configurado en diferentes secciones. Y las iremos tomando una a la vez.

Por ejemplo, al principio, vamos a ver nuestra configuración de base de datos. Vamos a modelar algunos datos utilizando Prisma. Y luego pasaremos a las siguientes secciones. Y a medida que avancemos, lo que verán es que haré una demostración. Así que voy a recorrer parte del código una sección a la vez, y voy a explicar toda la sección y a codificarla frente a ustedes, explicando mi proceso de pensamiento mientras lo hago. Y durante estos períodos, les animo a simplemente observar y escuchar, absorber la información que estoy compartiendo, y tratar de no codificar al mismo tiempo durante esos momentos.

Esto es realmente para que pueda explicar detalles interesantes que pueden aparecer en su editor o algo así y explicar cómo funcionan las piezas individuales. Y si están codificando al mismo tiempo, aunque sea tentador, es posible que se pierdan parte de esa información. Así que les animo a no hacerlo durante esos momentos y simplemente escuchar. Y después de eso, les daré, creo que 30 minutos para cada sección, para que lo hagan por su cuenta y hagan preguntas mientras lo hacen.

Un poco sobre mí. Mi nombre es Sabin Adams. Soy un defensor del desarrollador en Prisma. Y como dice esto, he pasado los últimos años trabajando como desarrollador de pila completa en varios equipos diferentes. Así que he tenido la oportunidad de trabajar con varias tecnologías. Y mientras avanzaba en mi carrera de desarrollo de software, descubrí que realmente disfrutaba enseñando. Por lo tanto, hacer cosas como esta siempre fue algo que disfruté hacer. Así que me convertí en un defensor del desarrollador y ahora puedo hacer esto a tiempo completo. Estoy muy emocionado de estar aquí esta mañana y hacer más cosas con ustedes.

Si quieres encontrarme para cualquier pregunta que puedas tener sobre este masterclass antes o después del mismo, no dudes en enviarme un mensaje en cualquiera de estos medios aquí. Y mientras lo hago, en realidad voy a desplazarme hacia arriba. Y voy a publicar un enlace a este documento de Notion en el Discord. De esa manera, ustedes tendrán acceso a esto porque esto es lo que van a seguir durante todo este proceso.

Entonces, lo que vamos a hacer en este masterclass, como mencioné, es construir una aplicación de pila completa. Por lo tanto, vamos a implementar seguridad de tipo de extremo a extremo en esta aplicación utilizando varias herramientas diferentes. Comenzaremos haciendo el backend y más específicamente, vamos a modelar nuestra base de datos y configurar Prisma en nuestro servidor. Luego, construiremos un servidor GraphQL utilizando un par de herramientas diferentes que hacen que esta seguridad de tipo de extremo a extremo se integre. Bueno, y si aún no entiendes qué es la seguridad de tipo de extremo a extremo, no te preocupes, lo explicaré a lo largo del masterclass. Y una vez que hayamos construido el servidor, vamos a construir nuestro esquema GraphQL y luego lo utilizaremos desde una aplicación de frontend que he preparado. Y finalmente, vamos a unir el backend y el frontend con algunas herramientas adicionales que unen este rompecabezas de seguridad de tipo de extremo a extremo. Y si estás interesado en la agenda del masterclass, debería estar aquí. Voy a tratar de seguirla lo más cerca posible, pero siempre hay alguna variación. He dado este masterclass varias veces. Y siempre hay algo que surge con lo que tenemos que lidiar. Y puede agregar un par de minutos aquí, o puedo ir rápido en algunas secciones. Así que el tiempo varía, pero debería ser aproximadamente de dos horas y 40 minutos.

Eso es lo que ha sido en el pasado generalmente. Así que les daré a ustedes tal vez dos o tres minutos para asegurarse de que tengan el documento de Notion y estén en el servidor de Discord. Y luego, si quieren, en el servidor de Discord, si quieren dejar una reacción en mi último mensaje con el documento de Notion, solo para asegurarme de que estén listos para mí, volveré en unos tres minutos solo para asegurarme de que todos estén allí. Si tienen alguna pregunta, pónganla en el chat y les ayudaremos, seguro. Ya veo que la gente está reaccionando, así que eso es bueno. Parece que la gente puede acceder a él. Buena señal. Además, si mi voz se apaga un poco durante esta charla, no se preocupen, he estado luchando contra un resfriado. Ya casi lo supero, pero me quedó la garganta un poco afectada. Así que tengan paciencia conmigo, por favor. Muy bien, cada vez más reacciones allí. Y no veo ningún comentario o pregunta, así que creo que simplemente seguiré adelante.

La primera parte que vamos a hacer es entrar en la primera lección. Como mencioné antes, esto está organizado en lecciones y vamos a abrir la primera lección aquí. Y cada lección, como verán, tiene un objetivo, que es una descripción general de lo que se va a lograr en la lección. También tiene un paso de configuración, que son los pasos necesarios para ponerse al día hasta este punto, en caso de que alguien se una al masterclass tarde, o si están viendo una grabación y solo quieren hacer ciertas partes. Cada paso se inicia con una rama asociada al paso en el repositorio de GitHub. Después del paso de configuración, habrá una serie de tareas que vamos a realizar en cada paso. Y esta es la parte en la que trabajarán durante el tiempo que les dé.

En este primer paso, vamos a configurar Prisma. Ya tenemos un repositorio de GitHub con un proyecto de servidor y un proyecto de frontend. Vamos a clonarlo en un momento, pero en esta sección vamos a utilizar Prisma para modelar nuestra base de datos. Vamos a crear nuestra base de datos SQLite y luego realizar una migración para tener ese esquema listo y esa base de datos lista para empezar a hacer consultas y agregar datos. Así que para la configuración, sigamos estos pasos. También quiero mencionar aquí que si el tamaño de fuente en alguna de mis ventanas o documentos es demasiado pequeño, envíenme un mensaje en Discord y me aseguraré de ajustarlo. Pero por ahora, el proyecto inicial, debemos clonar el repositorio. Así que voy a abrir este enlace que está en el documento de Notion, y voy a copiar el enlace aquí. Solo tienen que ir a la página de GitHub, ir a la pestaña de código y copiar el enlace. Y a partir de ahí, lo que voy a hacer es clonar el repositorio, y esto nos llevará a nuestro punto de partida. Así que voy a hacer git clone y clonar el repositorio. Esto nos dará nuestro punto de partida, vamos a entrar en el directorio y les mostraré lo que contiene. Verán dos carpetas aquí, verán una carpeta de cliente y una carpeta de servidor. Vamos a trabajar en la carpeta de servidor durante las primeras lecciones, aquí es donde tendremos nuestra API de GraphQL. Aquí es donde vamos a configurar Prisma y modelar nuestros datos. Y hacia el final del masterclass, nos moveremos a esta carpeta de cliente que tiene una aplicación preconstruida que utilizaremos para hacer consultas a nuestra API de GraphQL. Así que empecemos a ver lo que vamos a hacer en esta carpeta de servidor. Creo que voy a aumentar un poco el tamaño de fuente. Tengo que volver a mi documento de Notion. Y aquí están nuestras tareas. Después de clonar el repositorio, tenemos este punto de partida y ahora necesitamos configurar Prisma. En esta sección, vamos a configurar la base de datos, vamos a modelar los datos. Así que necesitamos Prisma para hacer eso. Y para usar Prisma, lo que necesitamos hacer es instalar la dependencia de la CLI de Prisma. La CLI de Prisma. Así que si van a una terminal dentro de su proyecto, voy a entrar en el directorio del servidor, porque estamos configurando Prisma dentro del directorio del servidor, y voy a instalar Prisma con npm. Y esto debería ser una instalación bastante rápida. Y ahora que está instalado, lo que necesitamos hacer es inicializar Prisma. Y voy a hacer esto desde VS Code para que podamos ver qué sucede al inicializar Prisma. Para hacer esto, hay un comando llamado npx prisma init y lo que esto hará es inicializar una carpeta de Prisma en su proyecto, que será donde estará su esquema de Prisma. Y el esquema de Prisma es donde realmente modelamos el esquema de nuestra base de datos. Así que ejecuté esto, ejecuté npx prisma init, y obtenemos este bonito esquema de Prisma aquí dentro de una carpeta de Prisma. Y vamos a utilizar una base de datos SQLite. Así que si abren el archivo de esquema, vamos a cambiar el proveedor a SQLite y lo que verán debajo es una URL. Esta será la cadena de conexión a nuestra base de datos SQLite. Pero actualmente, esto se encuentra en una variable de entorno llamada database URL. Y eso estará en la carpeta env que Prisma creó para ustedes. Y aquí, simplemente voy a poner file dev.db. Esto indicará que la base de datos SQLite se encuentra en la ruta actual, que estará en el directorio de Prisma, y será un archivo llamado dev.db. Así que eso es todo lo que necesitamos hacer para esa configuración. Y si volvemos a nuestro documento de Notion, ahora podemos pasar a los siguientes pasos. Estos pasos son bastante pequeños, son bastante simples. Trato de dividirlos en partes pequeñas, fáciles de entender, que cubren solo un concepto principal como ese. Así que en el siguiente, ahora que tenemos Prisma inicializado, esto es lo que vamos a usar para modelar el esquema de nuestra base de datos. Vamos a modelar toda nuestra base de datos. Usando esto, vamos a realizar una migración y crear la base de datos. Pero antes de hacer eso, lo que necesitamos hacer es modelar el esquema. Como vimos en el código, si puedo volver a él, comenzamos con un esquema que se ve así. Tenemos un generador, que le dice a Prisma cómo generar el cliente de Prisma para que podamos hacer consultas a nuestra base de datos. Y tenemos los detalles de nuestra fuente de datos. A continuación, lo que necesitamos hacer es definir el esquema de nuestra base de datos. Y esta aplicación que estamos construyendo va a tener una lista de usuarios que pueden ser cualquier usuario que agreguemos a nuestra base de datos. Y luego, cada usuario va a tener una lista de notas asociadas. Así que simplemente pueden establecer una relación entre los usuarios y las notas. Cada usuario va a tener varias notas. Entonces, lo primero que vamos a hacer es crear el usuario. Y en las instrucciones aquí, he especificado qué campos queremos para cada usuario. Por ahora, todo lo que necesitamos es un ID, que será un entero que se incrementa automáticamente y un nombre, que será el nombre de cada usuario. Así que volvamos al código aquí. Y vamos a empezar a modelarlo. Para hacer esto, van a utilizar la palabra clave model que establece un modelo de base de datos, que básicamente es una tabla de base de datos. Y vamos a llamarlo usuario. Y lo que necesitamos es el campo de ID, que dijimos que iba a ser un entero.

Podemos usar el tipo de dato entero (int). Y si tienes la extensión de Prisma para VS Code, obtendrás un autocompletado muy útil como este. Esto autocompletará algunas de estas cosas y facilitará un poco las cosas. Definitivamente recomiendo instalarlo si aún no lo has hecho. Pero esto será un entero, y será la clave primaria de nuestra tabla. Así que voy a poner ID solo para especificarlo. También queremos establecer un valor predeterminado. Y este valor será autocompletado. Esta es una función dentro del esquema de Prisma que indica que cada vez que se agrega un nuevo registro, podemos rellenar esta columna con un entero que se incrementa automáticamente. Así que eso es el ID, ahora tenemos nuestra clave primaria, y podemos configurar nuestro nombre. Y el nombre es un poco más simple que ese. Vamos a llamar a esta columna nombre, y será una cadena. Creo que eso es todo lo que necesitamos para nuestro modelo de usuario. Así que ahora hemos modelado nuestra tabla de usuarios.

Y ahora necesitamos modelar la nota. La nota será muy similar, excepto que tiene un par de columnas adicionales. Luego, necesitaremos configurar una relación para poder vincular las notas a sus usuarios. Una vez más, vamos a nuestro esquema y creamos otro modelo llamado 'note'. Copiaré este ID, porque será exactamente el mismo. Definitivamente queremos un ID con un entero de incremento automático. Luego, podemos ver el resto de las columnas. Necesitamos un mensaje, una fecha de creación, una fecha de actualización y un ID de usuario, que será cómo vinculamos cada usuario. Podemos trabajar en esto ahora. Vamos al modelo y creamos el mensaje. Esto es solo otra cadena, así que es otro fácil. El siguiente es una columna de fecha de creación. La llamaré 'created at' y será una fecha y hora. Esto será un poco diferente. Usaremos la palabra clave 'default' nuevamente para establecer un valor predeterminado. Queremos que el valor predeterminado sea 'now'. Esto hará que Prisma complete automáticamente este campo 'created at' con una marca de tiempo actual cada vez que se agregue un nuevo registro, creando esencialmente una fecha de creación. Y de manera similar, tenemos 'updated at'. También será una fecha y hora. Pero con este, en realidad tenemos una palabra clave especial. Tenemos un atributo 'updated at' aquí. Y lo que esto hará es actualizar automáticamente esto con la marca de tiempo actual cada vez que se actualice o cambie un registro de nota. De esta manera, obtenemos una especie de historial de cuándo se actualizó por última vez el registro. Por último, necesitamos un ID de usuario, que será un entero. La razón por la que elijo un entero es porque debe coincidir con esto aquí arriba. Así es como vamos a vincular los registros. Esas son todas las columnas, ahora tenemos dos tablas separadas con todas sus columnas configuradas. Sin embargo, todavía necesitamos una forma de vincularlas. Cada usuario tiene varias notas. Cada nota tiene un usuario. Por lo tanto, necesitamos configurar una relación de uno a muchos para mostrar esto. Y para hacer eso, vamos a crear un campo de usuario en este modelo. Será del tipo usuario, que apunta a este modelo aquí arriba, estamos usando el tipo de modelo usuario. Y diremos que este campo es en realidad un campo de relación. Luego, proporcionaremos un poco de información, que son los campos y las referencias. Y eso es cómo, o lo siento, qué columnas estamos usando para crear este vínculo. Ahora, los campos serán los campos en el modelo actual que deben apuntar a una referencia en el modelo de referencia. Nuestro campo es el ID de usuario, que es este campo que configuramos. Y queremos que el ID de usuario haga referencia a un ID en nuestro modelo de usuario. Y ahora que hemos hecho eso, esto aún se quejará. Y eso se debe a que también necesitamos crear la relación opuesta. Dentro de nuestro modelo de usuario, necesitamos una forma de profundizar en una nota. Y Prisma va a hacer cumplir esto solo para asegurarse de que tengas tus relaciones configuradas correctamente. Así que vamos a crear 'notes'. Y simplemente diremos que esto será una matriz de notas. Ahí lo tienes. Ahora tenemos nuestro modelo de base de datos configurado. Es un modelo de datos bastante simple. Simplemente tenemos el usuario, tenemos nuestra nota y luego tenemos el vínculo entre los dos. Y esto es en lo que vamos a basar toda nuestra aplicación. Pero antes de adelantarnos, volvamos a nuestras tareas y veamos qué sigue. Sí, la migración. Hemos configurado nuestro esquema de base de datos. Pero actualmente, esto es básicamente una definición de cómo debería ser el esquema. Aún no hay una base de datos asociada a esto. Y esto no se ha aplicado en ningún lugar. Entonces, lo que debemos hacer es aplicarlo utilizando Prisma migrate, que es un conjunto de herramientas de migración que Prisma proporciona para manejar estas migraciones de la base de datos por ti. Y simplemente para facilitarte un poco las cosas. Y para hacer eso, vamos a ejecutar 'npx Prisma migrate dev'. Y luego usaré esta bandera llamada 'name' para que podamos nombrar nuestra migración. Y simplemente lo llamaré 'init' porque esta es nuestra primera migración. Una vez que eso suceda, veremos que obtenemos este archivo 'dev.db', que es nuestra base de datos SQLite. Esto se encuentra en el sistema de archivos. Por lo tanto, se mueve junto con tu código. Y luego tenemos esta carpeta de migraciones. Y esta es la migración que se realizó. En realidad, puedes ingresar y ver el SQL que Prisma generó para ti. Creó tu base de datos y luego aplicó el SQL a tu base de datos.

Entonces, ahora tenemos una base de datos con estas tablas y las restricciones que definen las relaciones configuradas. Todo está listo para continuar. Ahora tenemos una buena base de datos funcional y podemos pasar al siguiente paso, que es darle algunos datos con los que podamos trabajar en nuestra aplicación.

Para esto, vamos a hacer trampa porque no quiero que tengan que escribir todo un archivo de carga de datos. Crearé un nuevo archivo en la carpeta de Prisma llamado seed.ts y luego lo pegaré aquí. Copiemos esto, veamos si puedo hacerlo. Ahí vamos, genial. Copiemos eso, vayamos a la carpeta de Prisma y creemos un archivo seed.ts. Luego lo pegaré aquí. Creo que copió todo el bloque de Notion, así que tuve que quitar eso. Esto es lo que se ejecutará cuando ejecutemos nuestro comando de carga de datos. Lo que estamos haciendo es importar Prisma Client, que si no lo viste en la salida aquí abajo, cuando ejecutamos Prisma Migrate, después de crear nuestra base de datos y aplicar nuestra migración, también se ejecutó el comando llamado Prisma generate, que genera Prisma Client y eso es lo que usas para consultar e interactuar con tu base de datos. Lo estamos importando aquí, lo estamos instanciando y luego estamos ejecutando una función que borra nuestra base de datos y luego agrega nuevos datos utilizando Prisma Client. Podemos ver que aquí estamos creando un usuario, prisma.user.create, le estamos dando un nombre y luego le estamos dando un par de notas, que crearán estas notas y configurarán automáticamente las relaciones. Con eso en su lugar, lo que necesitamos hacer para ejecutar realmente este script de carga de datos es ir a nuestro package.json y vamos a agregar una clave prisma, y dentro de eso, vamos a tener una clave seed, y esto se ejecutará, ts-node-dev-prisma-seed.ts. Simplemente estamos diciendo que cuando se ejecute nuestro comando, simplemente queremos ejecutar el archivo de carga de datos. Y para ejecutar esto, ahora que está en package.json, puedes hacer npx prisma db seed. Ahí vamos, podemos ver que nuestros datos se cargaron y se ejecutó el comando de carga de datos. En este punto, lo que ha sucedido es que has modelado tus datos, has creado tu base de datos y luego has realizado una migración para aplicar el esquema de tu base de datos a la base de datos y ahora has cargado tu base de datos con los datos que necesitas. En este punto, hemos terminado con la primera sección y lo que voy a hacer es dejárselo a ustedes para que comiencen a hacerlo por su cuenta. Les daré 30 minutos, así que volveré aproximadamente a las 10 a.m. PST. Sí, dentro de unos 30 minutos. Vamos a sumergirnos en esto. Abriré la segunda lección aquí. Y el objetivo de esto será configurar el servidor GraphQL. Así que tenemos la carpeta del servidor. Tenemos la configuración de Prisma, pero aún no tenemos un servidor GraphQL. Eso es lo que vamos a hacer en esta sección. También quiero señalar que si no lo notaron en la primera parte, olvidé mencionar que también hay soluciones disponibles al final de cada tarea. Entonces, si te quedas atascado y si lo discutimos en Discord y no podemos encontrar una solución para ti, también puedes abrir esto como una especie de trampa para ver dónde puede haber algo mal. Además, a partir de ahora en el taller, cada paso de configuración tendrá instrucciones sobre cómo ponerse al día hasta el punto en el que estamos. Entonces, si te quedaste atascado en una sección y luego avanzamos, puedes consultar la rama asociada con la siguiente sección. Y debería tener una carpeta de trabajo en este punto de partida. Las instrucciones para eso estarán aquí. Pero vamos a comenzar, comenzar con las tareas. Lo primero que quiero que hagamos es realmente instanciar y exportar Prisma Client desde un módulo dentro de nuestro proyecto del servidor. De esa manera, podemos hacerlo de una vez. Lo vamos a usar mucho. Entonces, sigamos adelante y hagámoslo. Para hacer esto, vamos a crear una nueva carpeta llamada source, que es donde vivirá todo nuestro código. Y vamos a crear un archivo llamado db.ts. Y luego vamos a instanciar nuestro Prisma Client como lo hicimos en el archivo de carga de datos. Y lo exportaremos para que esté en un estado utilizable. Volveré al código. Como sugirieron las instrucciones, estoy creando una nueva carpeta aquí llamada source. Y dentro de ella, tendremos un eb.ts. Y esto simplemente va a importar Prisma Client. Va a exportar una constante llamada Prisma. Y esta constante será un nuevo Prisma Client. Y luego también exportaré el tipo de Prisma Client. Creo que sí, sí. Porque lo necesitaremos más adelante. Y también podría hacerlo ahora. Todo lo que hace esto es instanciar nuestro Prisma Client y exportarlo para que podamos usarlo en toda nuestra aplicación. Y eso es todo de la primera parte de este paso. Hemos instanciado y exportado y deberíamos estar listos para pasar a la siguiente parte. Y eso es agregar una herramienta llamada Pathos a nuestro proyecto. Y esta herramienta es la que vamos a usar para construir nuestro esquema de GraphQL más adelante. Es un generador de esquemas basado en código. Entonces, a través de nuestro código, vamos a construir nuestros tipos de GraphQL. Pero lo interesante de esta herramienta es que viene con un complemento muy útil para Prisma específicamente que te brinda seguridad de tipo basada en el esquema de Prisma dentro de tus resolutores de GraphQL. Si no estás seguro de lo que significan estas cosas, las iremos viendo a lo largo del taller, así que no te preocupes. Pero solo debes saber que estamos agregando esta herramienta para que podamos generar algunos tipos adicionales cuando ejecutemos Prisma Generate que nos ayudarán a medida que desarrollemos nuestro esquema de GraphQL. Sin embargo, para poner esto en marcha, lo que necesitamos hacer es instalarlos. Así que vamos a copiar esto. Creo que puedo simplemente copiar eso en realidad y volver a nuestro proyecto. Y luego lo pegaré aquí. Esto está instalando Pathos y el complemento real que necesitamos para que funcione con Prisma. Una vez que se instalen estos, vamos a ir a nuestro esquema de Prisma y voy a cerrar todo aquí para que esté limpio.

Y volveremos a nuestro esquema de Prisma. Ahora, lo que hace el complemento es proporcionarnos un segundo generador y estos generadores son los que generan activos para nosotros basados en nuestro esquema de Prisma cuando ejecutamos npx prisma generate o cuando ejecutamos una migración que ejecuta el comando Generate. Entonces vamos a agregar un nuevo generador aquí y simplemente lo llamaremos Pothos. Y el proveedor para esto es, en realidad, olvidé cuál es el nombre del proveedor, déjame buscarlo rápidamente. Prisma Pothos types, Prisma-pothos-types. Entonces esto va a decir que ahora que hemos instalado el complemento Pothos que viene con el generador Prisma, que es un generador personalizado construido para Prisma, y estamos diciendo que cuando ejecutemos Prisma generate, queremos usar ese generador personalizado que Pothos proporciona para generar alguna salida. Estos serán algunos tipos que Pothos usará para nosotros. Pero ahora que hemos hecho eso, necesitamos generarlos realmente. Así que podemos ejecutar MPX Prisma generate. Y esto va a generar todas nuestras cosas nuevamente. Así que si expando esto un poco, vamos a ver que el cliente Prisma se generó nuevamente, como antes, pero ahora también tenemos el segundo, la integración de Pothos. Así que en realidad puedes proporcionar diferentes generadores en tu esquema de Prisma para generar diferentes tipos de activos. Pero con eso en su lugar, ahora podemos pasar a la siguiente parte. Y eso será configurar un constructor de esquemas. Entonces, esta es la clase que Pothos proporciona que nos permite acceder a muchas funciones diferentes que construyen el esquema de GraphQL. Y necesitamos instanciar un constructor y configurarlo para que podamos usarlo como queramos. Entonces, lo que vamos a hacer es crear un archivo builder.ts en ese directorio de origen que creamos, y luego vamos a instanciar el constructor de esquemas y exportarlo. Y luego lo vamos a configurar un poco a medida que avanzamos en esto. Así que vamos a seguir adelante y comenzar con eso. Abre el código nuevamente y ve a la carpeta de origen. Y vamos a hacer builder.ts. Y luego, como sugiere el documento de Notion, debemos importar el constructor de esquemas y muchas otras cosas aquí. Y creo que copiaré y pegaré eso por cuestión de tiempo. Vamos a importar. Ahí vamos. Así que he importado todas esas cosas. Estos son el constructor de esquemas, el complemento Prisma que instalamos, los tipos de Prisma, que son los tipos que se generaron a partir del generador de complementos Prisma Pothos que acabamos de agregar, y luego, por supuesto, nuestra instancia de base de datos Prisma aquí. Lo estamos exportando porque lo usaremos en otras partes de nuestra aplicación. Y esto va a ser un nuevo constructor de esquemas. Y el constructor de esquemas en realidad tiene un parámetro de tipo genérico. Ahora, si no sabes qué son, no te preocupes. Explicaré lo que hace. Lo que esto va a hacer es permitirnos proporcionar algunos tipos a Pothos. Y estos tipos son los que nos permitirán tener cierta seguridad de tipos dentro de nuestros resolvers reales. Entonces, los tipos que ponemos aquí nos darán seguridad de tipos dentro de los resolvers de GraphQL donde realmente ejecutamos nuestras consultas y exponemos datos. Entonces, lo que estamos haciendo con esto es que vamos a decir tipos de Prisma aquí. Esta es una clave que Pothos buscará. Y le pasaremos nuestros tipos de Prisma. Esto va a decir que... Oh, lo siento, esto es lo que Pothos va a usar para saber cómo se ve nuestro esquema de Prisma. Entonces, a medida que construimos nuestros resolvers de GraphQL y accedemos a campos de nuestra base de datos dentro de Prisma allí. Nos permitirá hacer eso de una manera segura en términos de tipos. Entonces, si intentamos exponer un campo a través de GraphQL que en realidad no existe en nuestra base de datos, ahora nos dará un error, porque estamos configurando esto. Y eso es lo que hace que esta integración con Pothos y Prisma sea muy interesante aquí. Pero para hacer esto, también necesitamos tener un complemento, que instalamos. Entonces, esto va a ser el complemento Prisma. Y luego necesitamos proporcionar el cliente Prisma. Es por eso que todavía nos está mostrando un subrayado rojo, porque necesitamos proporcionar un cliente real. Ahora tenemos nuestro constructor de esquemas instanciado y sabe acerca de nuestros tipos de Prisma. Entonces, cuando escribimos resolvers, nos dará esa buena seguridad de tipos con nuestra base de datos dentro de nuestra API de GraphQL real. Entonces, eso ya es una gran cantidad de los pasos geniales de seguridad de tipos de extremo a extremo solo dentro de la base de datos y la capa de API. Y vamos a ponerlo en uso en un momento aquí para que podamos ver por qué es tan poderoso. Pero antes de hacer eso, tenemos algunas otras cosas que hacer. Si recuerdas nuestro esquema de Prisma, teníamos un par de campos de fecha. Teníamos la fecha de creación en la nota, y también teníamos la fecha de actualización. Y desafortunadamente, GraphQL no admite de forma predeterminada una fecha. Admite estos aquí, un booleano, un flotante, un ID, un entero y una cadena. Entonces, para poder usar una fecha en nuestra API de GraphQL, necesitamos instalar un tipo escalar personalizado para manejar una fecha y hora. De esa manera, nuestros resolvers de GraphQL sabrán cómo convertirlo en una fecha. Para hacerlo, necesitamos copiar este comando de instalación. Estamos utilizando una biblioteca llamada GraphQL Scalers. Este es solo un proyecto popular liderado por la comunidad que proporciona resolvers para diferentes tipos de datos, y lo instalaremos. Y luego necesitaremos aplicarlo al constructor de esquemas para que el constructor de esquemas sepa qué es una fecha. Y luego también necesitamos proporcionar el resolver al constructor de esquemas. Así que vamos a seguir todos esos pasos ahora mismo. Primero, voy a instalar GraphQL Scalers. Y ahora que está instalado, podemos importarlo aquí. Vamos a importar algo de GraphQL Scalers. Y lo que vamos a importar se llama date resolver. Esto es lo que va a resolver algún valor a una fecha para nosotros.

Entonces, lo he importado. Y lo que necesitamos hacer es configurar cómo se verán estos tipos escalares en nuestros resolvers. Como mencioné antes, este es en realidad el índice. Como mencioné antes, este parámetro genérico le indica a nuestro Resolver de GraphQL específicamente acerca de los diferentes tipos con los que podría tener que lidiar. Y esta es otra clave que buscará. Buscará escalares. Y aquí podemos proporcionar escalares para diferentes tipos. Así que voy a proporcionar una fecha. Y queremos decir que una entrada será del tipo fecha, un JavaScript Date. Y una salida será del tipo JavaScript Date. Y esto se refiere simplemente a los datos que entran y salen de un resolver. Necesita saber cómo debe verse una fecha al entrar y salir de tus resolvers de GraphQL. Entonces esto configura el tipo, pero en realidad no hemos proporcionado la función para resolver un valor a un JavaScript Date. Así que necesitamos agregar eso a continuación. Y eso está aquí abajo. Habrá una función en nuestra instancia de Builder llamada AddScalerType. Y necesitamos decirle fecha, y sabrá que esta fecha necesita ser configurada porque hemos configurado este DateScaler aquí. Sabe que ahora tenemos este tipo de fecha disponible. Así que le daremos una fecha. Le daremos el DateResolver que importamos. Y luego hay alguna otra configuración que dejaremos en blanco porque realmente no nos importa eso por ahora. Y eso es todo. Ahora podemos manejar fechas dentro de nuestra API de GraphQL.

Y lo siguiente que debemos hacer para ejecutar el servidor, es agregar algún tipo de consulta o algún tipo de tipo. Un servidor GraphQL no se ejecutará a menos que tenga una consulta disponible. Así que necesitamos agregar solo una consulta raíz utilizando la instancia del Constructor de Esquemas. Así que seguiré adelante y haré eso. Así que seguiré adelante y haré eso. Veamos aquí. Solo estoy revisando mis notas para asegurarme de que estoy en el camino correcto. Y parece que sí. Así que volveré al código y podemos construir esta consulta raíz. Y para hacer eso, vamos a usar la instancia del Constructor. Vamos a agregar un tipo de consulta. Y este será el tipo de consulta raíz. Entonces, si estás familiarizado con GraphQL, esto sería como la consulta de tipo que podrías tener en tu esquema de GraphQL. Eso es básicamente lo que estamos haciendo aquí. Y esto va a recibir un objeto de configuración. Y va a recibir una lista de campos. Y la sintaxis para esto se verá así. Solo escribiré esto y luego explicaré qué está sucediendo después. Será T.field. Y esto va a ser un... Vamos a devolver una cadena por ahora. Y el resolvedor va a resolver la cadena 'mundo'. De acuerdo. Así que siempre tengo que verificar dos veces mientras escribo esto porque la sintaxis no se queda en mi cabeza. No se queda en mi cabeza. Pero esto es lo que está sucediendo. Estamos configurando ese tipo de consulta raíz y luego estamos construyendo una consulta inicial. Esta es solo una consulta simple de GraphQL que devuelve una cadena. Y la cadena que devuelve es simplemente la cadena 'mundo'. Así que ahora, si realmente ejecutamos nuestro servidor y tenemos un servidor GraphQL en ejecución, podríamos consultar esta consulta de saludo y obtener la cadena 'mundo' de vuelta. Aún no lo haremos, pero lo haremos más adelante solo para ver cómo funciona. La razón por la que aún no podemos hacer eso es porque necesitamos configurar realmente el servidor GraphQL. y generar el esquema basado en este código aquí. Entonces, para hacer eso, bueno, primero, volvamos a nuestro documento de noción. Ahora necesitamos crear un módulo que genere nuestro esquema. Va a utilizar este enfoque de código primero y va a generar el objeto de esquema para nosotros. Y necesitamos exportarlo para poder usarlo en diferentes lugares. Entonces, creemos un nuevo archivo llamado schema.ts. Va a importar el constructor que hemos exportado desde builder.ts y luego va a usar el método llamado toSchema. Entonces, será un archivo muy simple por ahora, pero será útil más adelante. Así que crearemos schema.ts. Importaremos el constructor desde nuestro archivo builder. Y luego vamos a exportar una constante llamada schema y va a ser igual a builder.toSchema. Entonces, esta variable constructor aquí, la instancia del constructor de esquemas tiene una función llamada toSchema. Entonces, ahora que hemos definido una consulta, hemos agregado tipos escalares, sabe cómo queremos que se vea nuestro esquema de GraphQL. Y cuando ejecutamos toSchema, lo que hace es generarlo y devolverlo. Así que eso es todo, ahora tenemos nuestro esquema generado. Y creo que el siguiente paso aquí es sí, crear el servidor GraphQL. y usar ese esquema para que podamos ejecutarlo y comenzar a explorar. Así que sigamos e instalemos GraphQL yoga. Eso es lo que vamos a usar para ejecutar nuestro servidor GraphQL hoy. Elegí este porque es bastante simple de usar. Y siempre me ha gustado trabajar con él. Así que probaremos este hoy. Genial, ya está instalado. Ahora necesitamos crear un archivo de índice, que será el archivo raíz de nuestro servidor. E importaremos algo de GraphQL yoga node. Y eso que estamos importando se llama create yoga. Esto es lo que va a crear un servidor yoga para nosotros. Pero luego, para servir esto, lo que necesitamos hacer es importar otra función llamada create server. Y esto proviene de la biblioteca HTTP de node. Entonces, importaremos create server de node HTTP. Ahí vamos. Ahora podemos crear un servidor HTTP y podemos crear un servidor GraphQL. Lo que necesitamos ahora para crear el servidor es nuestro esquema que acabamos de generar. Entonces podemos importar el esquema desde ese archivo. Y finalmente, podemos comenzar a crear nuestro servidor yoga. Así que creamos una nueva constante llamada yoga. Va a ser create server, lo siento, create yoga. Y lo que esto va a hacer es que va a tomar nuestro esquema. Genial.

Muy bien, todos, estoy de vuelta en línea y listo para continuar con la tercera parte. Para recapitular lo que hemos hecho hasta ahora. Hemos configurado nuestra database. La hemos modelado. La hemos poblado con algunos data. Hemos realizado migraciones. Así que tenemos una database funcional. Ahora tenemos un servidor GraphQL funcional. Y actualmente, este servidor GraphQL solo tiene una consulta que simplemente devuelve la cadena mundo. Creo que era mundo. Así que es muy simple. Pero en esta próxima parte, lo que vamos a hacer es construir nuestro esquema GraphQL y exponer los data de nuestra database. Así que si nos adentramos en la lección aquí, el objetivo de esta lección es configurar un servidor GraphQL que exponga los data de la database. GraphQL es fuertemente tipado y permitirá que nuestro frontend solicite exactamente el tipo de data que necesitamos de manera segura en cuanto a tipos. Una vez más, si te unes tarde, puedes ponerte al día con nosotros ya sea siguiendo las lecciones anteriores, o consultando la rama de la parte 3 del repositorio de GitHub.

Pero yendo directamente al grano, ahora tenemos nuestro servidor GraphQL y también hemos configurado toda la infraestructura que necesitamos para poder construir nuestro esquema GraphQL. Tenemos nuestro generador de esquemas listo para nosotros, tenemos el esquema que se genera para nosotros. Lo que necesitamos hacer es construir realmente los modelos que representen los data que queremos exponer desde nuestra API de GraphQL. Para hacer eso, vamos a necesitar usar el generador de esquemas que hemos instanciado y vamos a configurar un par de archivos de modelo donde vamos a modelar estos objetos y lo haremos de manera segura en cuanto a tipos utilizando este complemento Prisma que usamos con Pathos. Y aunque esto pueda parecer confuso mientras lo digo ahora mismo, tendrá mucho más sentido cuando nos adentremos en ello. Así que creo que seguiré adelante y lo haré.

La primera tarea que tenemos es construir realmente nuestro tipo de nota. Así que vamos a usar la instancia del generador y lo que vamos a hacer aquí, solo para mantener las cosas organizadas, es crear un nuevo directorio llamado modelos dentro de nuestro directorio de origen y vamos a crear un archivo llamado note.ts en él. Así que vamos a hacer eso. Voy a entrar en mi directorio de origen, voy a crear modelos y un nuevo archivo llamado note.ts. Y aquí es donde vamos a construir todo lo relacionado con una nota. Lo primero que vamos a hacer es importar nuestro generador. Si puedo escribir correctamente. Ahí vamos, genial. Este es nuestro generador de esquemas. Esta es nuestra forma de construir nuestro esquema GraphQL en código. Y porque estamos usando el complemento Prisma con Pathos, que es cómo estamos usando este generador, esta es la función proporcionada por Pathos para nosotros. Debido a que estamos usando el complemento Prisma, en realidad tenemos acceso a un par de funciones específicas de Prisma en esta instancia del generador. Así que vamos a usar el objeto builder.prisma. Y lo que esto va a hacer es permitirnos acceder directamente a los tipos generados para nosotros a partir de nuestro esquema Prisma que tienen representaciones de lo que es nuestro esquema Prisma. De esa manera, podemos construir nuestro esquema GraphQL de manera segura para asegurarnos de que estamos exponiendo campos que realmente existen en nuestra database. Y esto es lo que quiero decir con eso. Así que voy a abrir esta función. Le voy a dar un nombre a este objeto Prisma, y vamos a ver que tenemos dos nombres disponibles a través del autocompletado. Tenemos note y endUser. Y esto se debe a que no tenemos endUser en nuestro esquema Prisma. Porque proporcionamos los tipos en nuestro generador justo aquí, estos tipos de Prisma, eso es lo que nos da acceso para poder ver estos autocompletados aquí. Así que estamos construyendo el tipo de nota, y esto va a recibir un objeto de configuración. Y una cosa sobre Pathos es que vamos a tener que modelar una función aquí. Se llamará findUnique. Y lo que va a recibir es una nota única, esto va a pasar una nota única. Lo siento. Y simplemente va a devolver el note.id. Ahora, esto es como una plantilla que tenemos que hacer aquí, porque Pathos necesita tener una forma de resolver una nota individual para evitar el problema de n más 1 cuando estás consultando a través de GraphQL. Esto es solo una forma de que sepa cómo profundizar y encontrar una nota y obtener un ID. Así que realmente no tienes que saber por qué esto, en detalle, está aquí. Solo tienes que saber que esto es necesario para que pueda resolver notas específicas. Pero con esa parte fuera del camino, ahora podemos configurar los campos reales para este objeto GraphQL. Y para tener un contexto, lo que estamos haciendo es básicamente construir lo que construirías en un esquema GraphQL escribiendo type note y poniendo todos tus campos aquí. Estamos haciendo eso a través de código. Así que vamos a hacer nuestros campos. Esto va a recibir un parámetro llamado t. Y esto es esencialmente algunas funciones. Este t va a tener algunas funciones que Pathos nos proporciona para exponer los campos que queremos exponer. Así que esto va a devolver un objeto. Y aquí es donde definimos todos los campos que queremos exponer a través de nuestra API de GraphQL. Así que el primero va a ser nuestro ID. Queremos exponer eso. Así que haremos t. Y tiene una función llamada exposeID. Así que haremos eso. Y lo que vamos a ver aquí es que tenemos un par de opciones aquí. Estas son todas cadenas diferentes. Así que el ID es básicamente una cadena aquí. Así que podemos hacer esto ID y luego mensaje.

Y este contexto va a tener una clave llamada prisma. Esto va a contener nuestra instancia del cliente Prisma.

En este punto, Prisma está disponible a través de nuestro contexto, pero nuestros resolutores no saben que está disponible. Puedes usarlo allí, pero TypeScript no sabe que es una clave disponible en nuestro contexto. Entonces lo que necesitamos hacer es ir a nuestro archivo builder.ts, aquí, donde podemos configurar todos esos diferentes tipos. Y aquí, podemos usar otra clave que Pathos usa y busca llamada contexto. Y este contexto va a tener una clave Prisma, y va a ser del tipo Cliente Prisma. Y en realidad podemos importar el tipo Cliente Prisma desde el archivo .db, porque lo exportamos allí. Ahí vamos. Genial. Ahora nuestros resolutores de GraphQL a través de Pathos van a saber que nuestro contexto tiene una clave llamada Prisma, y esa clave de Prisma contiene nuestro Cliente Prisma. La razón por la que hicimos eso es porque ahora vamos a construir una consulta GraphQL que puede consultar nuestros datos. Veamos la lección donde vamos a hacer eso. Tarea cuatro, agregar un tipo de consulta de usuario. Dentro de nuestro archivo user.ts, necesitamos construir una consulta, y esa consulta simplemente va a obtener cualquier dato que el usuario solicite y devolverlo. Veamos cómo hacerlo aquí. Si vas a user.ts, aquí podemos usar la instancia del generador nuevamente, y esto va a ser un campo de consulta. Ahora, no estamos usando la función de tipo de consulta porque eso configura el tipo de consulta raíz. Ahora solo estamos agregando una nueva consulta a ese tipo de consulta raíz, el nuevo campo de consulta. Entonces esta consulta se va a llamar usuarios. Y esto va a tomar un T que es solo una convención con Pathos de que se nombren los argumentos T y que simplemente tiene las funciones que están disponibles para esta devolución de llamada específica. Entonces lo que esto va a tener es un campo T.prisma, y luego eso contiene un objeto. Entonces lo que esto significa es que nuestra consulta de usuarios va a tener un conjunto de campos de Prisma, y ahora solo necesitamos definir qué va a ser esto. Entonces vamos a decir que esto es del tipo, y una vez más, con la seguridad de tipos, nos da los tipos que sabemos que nos importan. Y esto va a ser el tipo de usuario, y luego necesitamos resolver esta consulta. Y esto va a ser una función asíncrona. Y hay un conjunto de argumentos. Entonces hay consulta, raíz, argumentos, contexto e información. No vamos a usar todos ellos, pero me gusta agregarlos todos para saber qué está disponible para nosotros. Y lo que esta función de resolución va a hacer es devolver nuestros datos. Entonces va a devolver los datos que el usuario solicitó según su solicitud. Entonces vamos a devolver. Y aquí es donde podemos usar nuestro contexto. Y vemos que obtenemos Prisma porque agregamos esa escritura. Y luego vamos a hacer user.findMany. Y ahora normalmente en un resolutor, lo que tendrías que hacer es determinar lo que el usuario estaba solicitando de tu API en función de las solicitudes y los argumentos y todas esas cosas en la consulta. Sin embargo, POTHOS tiene una pequeña característica interesante que hace en segundo plano cuando estás usando la integración de Prisma con él, donde en realidad puede inspeccionar tu solicitud y construirte un objeto de consulta de Prisma basado en la solicitud que se devuelve. Entonces eso es lo que este argumento de consulta es aquí, en una API normal de GraphQL, no lo verías. Esto es solo si estás usando la integración de Prisma. Entonces todo lo que realmente necesitamos hacer es expandir eso en la consulta. Y esto va a construir automáticamente tu consulta de Prisma. Y la razón por la que lo hacemos así es porque en realidad lo construye de una manera agradable y eficiente donde evitará volver a buscar datos donde pueda. Así que esta es la única consulta que necesitamos. Nuestra API de GraphQL solo va a tener una consulta que se puede consultar porque nuestro frontend es muy simple. Así que eso está todo configurado, creo. Y podemos pasar a la siguiente parte. Y eso va a ser registrar nuestras consultas y nuestros tipos en nuestro esquema. Entonces, si miras el código en este momento, tenemos nuestro schema.ts donde estamos usando nuestra instancia del generador ahora que tenemos todas nuestras funciones del generador definidas en nuestros tipos y todo eso. Estamos haciendo un two schema y exportándolo. Y luego en index.ts, estamos usando ese esquema para aplicarlo a nuestra API de GraphQL. Sin embargo, el problema en este momento es que nuestro código que define nuestros modelos y nuestros tipos aquí y nuestros tipos de consulta, este código en realidad no se llama en ningún lugar, por lo que nunca se ejecuta. Y debido a eso, la instancia del generador no sabe nada de esto. Entonces lo que necesitamos hacer es antes de hacer el two schema, simplemente necesitamos importar esos archivos para que nuestro tiempo de ejecución realmente los importe y haga que se ejecute el código, lo que desencadena que el generador aplique esos modelos a su instancia. Todo eso suena confuso, incluso en mi cabeza. A medida que lo digo, suena confuso, pero tendrá sentido en un segundo. Vamos a importar modelos, usuario, y luego vamos a importar modelos net. Ahora que estos están importados, a medida que se ejecuta este código en tu servidor, llegará a index TS. Dirá, hey, necesitamos el esquema. Irá a este archivo. En realidad ejecutará el código en estas importaciones porque se han importado. Y ahora eso va a desencadenar esta función del generador y esta función del objeto Prisma para que realmente apliquen estas cosas a tu esquema. Y luego generará el esquema después. Entonces, en este punto, realmente no necesitamos cambiar nada porque ya estamos aplicando el esquema a nuestra instancia de yoga. Y estamos configurando el servidor aquí. Así que creo que la siguiente parte aquí es- Sí. Entonces, la siguiente parte va a ser simplemente ejecutar el servidor y asegurarnos de que funcione. Si vuelvo al código, ahí vamos. Y solo quiero verificar esto. Sí.

De acuerdo. Entonces, si volvemos al código, voy a detener el servidor solo por si acaso y ejecutaré npm-run-dev. Esto lo reiniciará en localhost. Y en este punto, voy a ingresar aquí y deberíamos ver- Ahora tenemos esta consulta de usuarios disponible. Y voy a decir que quiero obtener alguna información de ella. Voy a obtener el ID, el mensaje y la fecha de actualización. Y lo que deberíamos ver aquí es que vamos a obtener realmente algunos datos. Y lo hacemos. Estos son los datos iniciales. Así que estamos consultando desde nuestra base de datos ahora lo que significa que nuestros resolutores están configurados correctamente. Y como viste, mientras lo construíamos, todo se hizo de manera segura en cuanto a tipos donde probablemente no podríamos haber expuesto ninguna de estas columnas si no existieran. Así que esto se asegurará de que estés haciendo bien tu trabajo y simplemente hace que la experiencia de desarrollo sea un poco más fácil. Dicho esto, parece que- Déjame abrir esto. Creo que hemos- Terminado con esta sección. Sí. Así que hemos terminado con la sección. Ahora prácticamente hemos terminado con nuestra parte del servidor. En las próximas dos lecciones que haremos, nos centraremos en el frontend y consultaremos esta API de GraphQL que hemos construido. Así que continúa con el paso tres y completa el resto de tu esquema de GraphQL. Una vez más, estaré disponible para responder preguntas en Discord.

Muy bien, mis amigos, estoy de vuelta y listo para continuar con la siguiente sección. Como dije antes, hasta ahora, hemos estado trabajando en el lado del servidor. Hemos estado trabajando en la database y construyendo la API de GraphQL. Y ahora finalmente nos estamos moviendo al proyecto de frontend donde vamos a consultar nuestra API de GraphQL. Así que la sección que vamos a ver ahora es un poco más corta. Bueno, la abriré y leeré el objetivo para que podamos revisarlo. Pero con esta lección, vamos a poner en uso nuestro servidor de GraphQL. Lo vamos a conectar a nuestra API y obtener algunos datos. Sin embargo, lo que vamos a hacer es construir esto y configurarlo y luego consultar los datos de una manera que no es muy segura en cuanto a tipos. Obtenemos la seguridad de tipos de GraphQL, pero no obtenemos la seguridad de tipos completa que cubre la brecha entre tu API de GraphQL y tu frontend. Y lo estamos haciendo a propósito en esta sección para que en la siguiente sección podamos mostrar cómo se vería estar configurado correctamente y cómo debería ser la experiencia del desarrollador para una aplicación completamente segura en cuanto a tipos de extremo a extremo. Así que vamos a ver eso. Una vez más, la configuración es esto te mostrará cómo comenzar en el punto de partida de esta lección si te acabas de unir o si te quedaste atascado en algo, así que si es así, siéntete libre de hacerlo. De lo contrario, vamos a pasar directamente a las tareas. Así que volveré a mi código y en este punto podemos salir del directorio del servidor e ingresar al directorio del cliente. Y porque no lo hice antes voy a, bueno, en realidad no. Voy a instalar los módulos en un segundo. La primera sección aquí dice que vamos a usar urql que es un cliente de GraphQL que nos permite consultar fácilmente una API de GraphQL desde nuestra aplicación react. Así que vamos a necesitar instalar eso así como GraphQL en sí, de esa manera, podemos consultar nuestra API y obtener algunos datos con los que trabajar en nuestro frontend. Así que vamos a hacer eso. Y luego en el código, voy a hacer npm install urql y también vamos a instalar GraphQL. Y eso debería haber instalado esos módulos así como todos los demás módulos en tu directorio de nodos y en tu package.json. Déjame asegurarme, sí. Así que todos están instalados y deberíamos estar listos para pasar a la siguiente parte. Y por ahora cerraré estos y me dirigiré al archivo main.tsx.

En la siguiente sección, ahora que tenemos urql instalado, necesitamos proporcionarlo a nuestra aplicación. Como dice aquí, necesitamos instanciar un cliente de urql, que es cómo vamos a consultar nuestra API de GraphQL. Necesitamos configurar dónde va a estar nuestra API de GraphQL, que en nuestro caso es localhost 4000. Y luego urql nos proporciona un componente React llamado proveedor, que va a ser una forma de proporcionar el cliente a toda la aplicación para que podamos usarlo donde sea que lo necesitemos. Así que vamos a configurar todo eso. Voy a mi código aquí. Y vamos a estar en main.tsx y lo primero que vamos a necesitar hacer es importar todas las importaciones que necesitamos de urql. Lo primero va a ser createClient y el proveedor. Y ahora que los tenemos disponibles, podemos proceder a instanciar un cliente. Así que crearemos una nueva constante llamada client y va a ser igual a la función createClient. El retorno de la función, y lo que necesitamos darle aquí es la url. Esta va a ser la url de nuestro servidor GraphQL en ejecución. Así que url, y lo prefijaré con en un caso normal, probablemente quieras esto en una variable de entorno porque no sabes exactamente dónde puede estar tu url. Sin embargo, por ahora, lo vamos a codificar directamente porque estamos trabajando localmente y este es solo un proyecto de ejemplo. Así que vamos a hacer HTTP, local host, si pudiera escribir esto correctamente, y estamos en el puerto 4000, y el punto final de nuestro servidor GraphQL es GraphQL. Slash GraphQL. Así que ese va a ser nuestro cliente. Este es nuestro cliente instanciado, y esto nos permitirá consultar nuestra API de GraphQL, pero para usar esto en nuestra aplicación react, necesitamos envolver nuestra aplicación en el proveedor. Así que haremos proveedor, y el valor de este proveedor será nuestro cliente, porque eso es lo que estamos proporcionando. Y luego, necesitamos mover nuestra aplicación dentro de la etiqueta allí. Así que ahí vamos. En este punto, ahora estamos proporcionando uRQL a toda nuestra aplicación. Lo siguiente que necesitamos hacer es escribir una consulta GraphQL, y la forma en que lo haremos es configurando una carpeta GraphQL y escribiendo nuestras consultas en archivos individuales solo para mantenerlas organizadas, y también nos ayudará un poco más adelante en la próxima sección para agregar un poco de esa seguridad adicional en cuanto a tipos de la que hablé anteriormente, así que todo lo que necesitamos saber por ahora, sin embargo, es que necesitamos crear una nueva carpeta llamada GraphQL. Necesitamos crear un nuevo archivo donde vamos a escribir nuestra consulta GraphQL, y queremos seleccionar el ID, el mensaje, y los campos de Crear App de cada nota, y necesitamos el nombre del usuario y todas sus notas. Así que vamos a hacer todo eso. Además, si me ves mirando regularmente aquí, es porque tengo notas en este lado, y siguen cerrándose, así que siguen cerrándose cada vez que cambio de pestaña, pero está bien. Es una pequeña molestia. Así que ahora que estamos en la fuente de nuestro directorio de clientes, vamos a crear una nueva carpeta llamada GraphQL. Y como nos pidieron las instrucciones, vamos a hacer users.query.ts. Este va a ser el nombre de nuestro archivo. Y aquí es donde vamos a escribir nuestra consulta GraphQL. Lo primero que vamos a hacer aquí es importar gql de URQL. Esto es un ayudante que nos permitirá escribir nuestro GraphQL y obtener un resaltado de sintaxis y ayuda allí. Y luego lo que necesitamos hacer aquí es exportar, o lo siento, exportar una constante llamada getUsers. Este va a ser el nombre de nuestra variable de consulta, y usaremos ese ayudante aquí. Así que gql nos permite escribir una cadena de consulta GraphQL. Así que vamos a escribir query. GetUsers, eso es exactamente cómo vamos a llamar a esta consulta. Y lo que vamos a hacer con esta consulta es ejecutar la consulta de usuarios que construimos en nuestra API. Y si recuerdas, al pasar por el playground de GraphQL en la sección anterior, estábamos ejecutando esa consulta de usuarios. Eso es exactamente lo que estamos haciendo aquí. Y como dijo la instrucción, queremos nuestro ID, queremos el nombre, queremos... Oh, lo siento, no el mensaje. Queremos notas, eso es lo que se llama. Y luego con cada nota, lo que necesitamos es un mensaje y necesitamos el creado en.

Lo que esto hará ahora es que cuando apliquemos esta consulta y la ejecutemos, obtendrá todos nuestros usuarios, obtendrá sus ID, nombres y obtendrá cada nota asociada con esos usuarios y las colocará en una matriz y cada índice de la matriz tendrá el mensaje de las notas y la fecha de creación. Así que estamos obteniendo todos estos data, pero actualmente no estamos haciendo nada con esta consulta, simplemente la hemos escrito.

Ahora necesitamos ejecutarla realmente y para hacerlo, vamos a ir a app.tsx y ahora que lo tengo abierto... Perdón. Bueno, ahora que lo tengo abierto, vamos a ir a la tarea cuatro aquí. Así que necesitamos ponerla en uso. Vamos a usar el hook useQuery proporcionado por URQL y eso es lo que vamos a pasar a nuestra consulta GraphQL y lo usará para ejecutar nuestra consulta. Y actualmente estamos cargando un par de variables estáticas. Estamos colocando algunos datos estáticos en la aplicación solo para evitar errores de sintaxis aquí y vamos a reemplazar esto con la respuesta real de la consulta. Así que vamos a hacer eso.

Lo primero que necesitamos hacer es importar todas esas piezas que mencioné. Así que vamos a importar el useQuery de URQL y luego también necesitamos importar la consulta que acabamos de escribir. Así que vamos a importar getUsers de eso. Así que tenemos nuestro hook useQuery. Tenemos nuestra consulta GraphQL. Ahora podemos escribir nuestra consulta. Así que vamos a decir const, y la forma en que funciona el hook useQuery es que va a devolver una matriz y el primer índice de esa matriz será nuestros resultados de la consulta. Así que voy a hacer una constante y voy a estructurar y simplemente extraer el primer índice de esa matriz. Y se va a usar la consulta y la consulta que queremos usar es nuestra consulta de usuarios. Así que por ahora esto estará bien. Esto obtendrá nuestros resultados y luego necesitamos obtener nuestros datos reales de los resultados porque los resultados en este momento son como una respuesta HTTP. Así que vamos a decir const data = results. Simplemente estamos extrayendo la clave data. Y esto nos dará un problema porque la variable data.users actualmente no tiene un tipo. Por lo tanto, no estamos obteniendo una respuesta con tipos definidos de esta consulta. Podemos cambiar eso agregando un parámetro genérico a nuestro hook useQuery y podemos decir que esperamos que vuelva una variable de usuarios y esa variable de usuarios debería ser una matriz de usuarios. Y estos usuarios están definidos aquí manualmente por nosotros. Así que aquí es donde mencioné que la seguridad de tipos aún no es completamente segura de extremo a extremo. Todavía tenemos este conjunto de tipos definidos manualmente en nuestro lado del frontend que fácilmente podrían desincronizarse con nuestro backend. Si nuestra API cambia en absoluto, nuestro frontend no lo sabría porque estos están definidos manualmente. Pero por ahora, en esta sección, esto estará bien. Ahora estamos consultando nuestros datos, estamos obteniendo los resultados y hemos reemplazado nuestros datos estáticos con esos datos. Así que si volvemos, podemos ejecutarlo realmente. Así que voy a hacer npm run dev. Y luego también voy a abrir una segunda terminal y voy a ingresar al directorio del servidor y también lo voy a ejecutar. De esa manera, nuestra API estará en funcionamiento y podremos obtener algunos datos. Y nuestro cliente frontend estará en localhost 3000. Así que lo abriré y esto es lo que vamos a ver. Este es cada usuario, y cada usuario tiene dos notas. Puedes verlo en el archivo de datos de prueba y todos estos datos deberían coincidir con lo que teníamos en el archivo de datos de prueba. Y sí, eso es lo que obtenemos aquí. Y parece que todo funciona. Pero la siguiente parte es la divertida donde podemos ver cuál es el problema con esta forma de hacerlo. Ahora podemos romperlo. En nuestra consulta de GraphQL, vamos a eliminar este campo, este campo de fecha de creación. Así que observa que estamos eliminando el campo, sin embargo, en nuestros tipos, todavía esperamos que el campo de fecha de creación esté presente. Y porque le decimos a TypeScript que hay un campo de fecha de creación, asume que hay un campo de fecha de creación. Si falta en el objeto data real, TypeScript no lo sabe. Simplemente sabe que debería haber uno por lo que simplemente lo asume. Y por lo tanto, los tipos serán y fingirá que está ahí. Si miramos el frontend, nuevamente, antes de guardar esto, vemos que la fecha de creación se muestra para cada nota, pero si guardamos, se volverá a cargar la aplicación y veremos `not a number`. Eso se debe a que ese campo de fecha de creación ya no está disponible. No lo estamos consultando desde nuestra API. Por lo tanto, no se devuelve en nuestras respuestas, pero lo que verás es que si vas a tus componentes, si vas al mensaje, aquí estamos accediendo a note.createdAt y TypeScript no muestra errores. Eso es porque está disponible aquí. TypeScript piensa que lo está. Así que aquí es donde surge un problema si cambias tu consulta en absoluto, o si tu API cambia en absoluto, TypeScript en tu frontend todavía piensa que todo está bien. No sabe que algo ha salido mal. Así que en la siguiente sección, vamos a solucionar eso aplicando una seguridad de tipo de extremo a extremo más completa. Pero por ahora, sigue todos estos pasos que acabamos de seguir. Creo que eso fue el final de esta sección. Déjame volver a abrirlo para verificarlo. Sí, eso fue el final de esto. Así que te daré, si miro la hora, son las 11:23, mi hora. Así que te daré, digamos, 10 minutos para seguir esta parte. Fue un poco más corta y solo ponla en funcionamiento. Y nuevamente, si tienes alguna pregunta, por favor, escríbela en el chat. Estoy aquí monitoreándolo, así que me encantaría resolver cualquier problema contigo. Y una vez que terminemos con esta parte, pasaremos a la última sección donde configuraremos la última parte de la seguridad de tipo de extremo a extremo. Así que diviértete con esto.

Y estaré de vuelta en breve. Muy bien, todos. Así que esa fue un poco más corta. Solo hubo un par de pasos allí. Si no pudiste terminar, siéntete libre de completar ese paso mientras hacemos el número cinco. Después de que explique esta parte. Pero en la siguiente sección, lo que vamos a hacer es lo que llamo cerrar la brecha. Y esa brecha es la que mencioné anteriormente donde esos tipos que vimos no están del todo alineados con tus consultas y con tu API de GraphQL. Así que vamos a cerrar esa brecha para que esos tipos siempre estén sincronizados con la consulta que estás ejecutando y con lo que está disponible realmente a través de tu API de GraphQL. Así que vamos a abrir la lección. Y muy rápidamente, ThomasSack94. Veo tu pregunta y una vez que termine esto, veré qué está pasando allí. Creo que ya he visto ese problema antes así que tal vez pueda ayudarte. Pero sí, el objetivo de esta lección es implementar lo que se llama generación de código para validar tus consultas de GraphQL. Y lo que esto hará es leer realmente tu esquema de GraphQL desde tu API en ejecución. Va a tomar la consulta de GraphQL que escribimos en nuestro archivo users.query.ts en el frontend, la va a analizar y se asegurará de que estés consultando campos que están disponibles en tu API de GraphQL. Así que básicamente va a validar que nuestra consulta a nuestra API de GraphQL sea una consulta válida. Si no lo es, te dará un error y te dirá que debes corregir esto antes de poder ejecutar tu frontend. De lo contrario, dirá, está bien, eso es genial. Ahora voy a generar un conjunto de tipos basados en tu esquema de GraphQL que luego puedes usar en tu frontend para representar los tipos de usuario y nota en lugar de usar nuestros tipos definidos manualmente. Eso suena confuso, está bien. Vamos a seguir todos los pasos ahora mismo. Si miras aquí las tareas, la primera es instalar las bibliotecas de CodeGen. Así que hay una herramienta llamada GraphQL CodeGen y voy a abrir este enlace aquí para que podamos verlo. Así es como se ve la herramienta. Básicamente vas a tener un esquema de GraphQL que hemos construido en nuestra API. Configurarás un archivo de configuración y luego generará un gran archivo de tipos que se ve algo así. Realmente no vamos a necesitar leer esto, tal vez lo abramos y echemos un vistazo, pero eso es básicamente lo que hace. Si quieres más información sobre lo que realmente está sucediendo bajo el capó, consulta este enlace y toda esta documentación te ayudará. Pero lo primero que vamos a hacer es instalar esos paquetes. Voy a copiarlos de aquí, así no tengo que escribir todo. Así que dentro del directorio del cliente, voy a instalar todos esos paquetes. Y una vez que terminen, lo cual puede llevar un poco de tiempo, podemos continuar con la configuración y ponerlo en funcionamiento. Oh genial, eso fue más rápido de lo que pensaba. Así que los hemos instalado, ahora podemos configurarlo. Para configurarlo, lo que vamos a hacer es crear un nuevo archivo llamado code-gen.yml. Es un archivo YAML. Y vamos a utilizar algunas de las opciones de configuración de GraphQL code-gen para configurar esta biblioteca. Así que veamos qué dice esto. Oh genial, solo estaba verificando, asegurándome de que todavía fueran válidos y precisos, y lo son. Así que code-gen.yml, ese será el archivo donde agregaremos todas nuestras configuraciones. Y las configuraciones son un poco difíciles de entender simplemente porque es un archivo YAML y sin leer la documentación, no sabrás qué poner aquí. Así que te recomiendo que abras la documentación cuando estés pasando por esta parte de la lección, pero por ahora, simplemente voy a explicar qué está sucediendo. Así que lo primero que debemos hacer es decirle a GraphQL code-gen dónde está nuestro esquema, y eso será brw-source.http localhost 4000 GraphQL. Este es solo nuestro servidor de GraphQL que tenemos en ejecución localmente. También necesitamos decirle qué documentos en tu proyecto de frontend debe leer para que sepa qué consultas debe validar en ese esquema de GraphQL. Y en nuestro caso, eso es nuestro source GraphQL. Y voy a hacer star.ts. Entonces lo que eso va a decir es mira en el directorio source, entra en esta carpeta de GraphQL, y cualquier archivo TypeScript, valida cualquier GraphQL que esté en ese archivo. Eso es lo que hace esa parte. Y finalmente, necesitamos decirle a GraphQL code-gen qué necesita generar para que podamos usarlo, básicamente, le estamos diciendo qué tipos deben generarse en nuestro proyecto de frontend para que podamos usarlos en nuestro proyecto. Entonces, para hacer eso, podemos usar la opción generates aquí. Y vamos a decir que queremos generar un archivo en nuestro directorio source y directorio GraphQL. Y el archivo se llamará generated.ts. Así que generará un nuevo archivo llamado generated.ts dentro de este directorio GraphQL. Y lo que va a generar es lo que configuramos aquí. Así que vamos a hacer plugins. Y luego podemos especificar todos los diferentes plugins que queremos usar para generar esto realmente. Y esos plugins son lo que instalamos en la parte anterior aquí donde tenemos Types Document Node, TypeScript y TypeScript Operations. Estos son los tres plugins diferentes que vamos a necesitar para obtener estos tipos que se basan en nuestro esquema de GraphQL. Entonces, para hacer esto, vamos a abrir mis notas nuevamente, vamos a necesitar el plugin TypeScript. Necesitamos las operaciones de TypeScript, esto configura un par de operaciones diferentes para nosotros en TypeScript que vamos a necesitar. Y Typed Document Node, esto configura un objeto para nosotros cuando se genera, que básicamente es un árbol de sintaxis abstracta que representa las consultas que estamos ejecutando, que básicamente es solo un gran objeto JSON que representa nuestra consulta. Y esto es lo que vamos a pasar a Urql para ejecutar nuestra consulta. Entonces, eso está todo configurado y ahora podemos pasar al siguiente paso. Y diré una vez más, la documentación está aquí. Lee definitivamente la documentación, hay muchas opciones diferentes que puedes usar con Urql. Y sí, eso te ayudará bastante. Ahora que lo tenemos configurado, necesitamos una forma de ejecutar realmente GraphQL CodeGen. Y para hacer eso, vamos a agregar un script CodeGen a nuestro package.json.

Y eso es bastante sencillo, así que lo veremos ahora mismo. En el archivo package.json, simplemente ve a la sección de scripts, y agrega un nuevo script llamado Codegen. Y todo lo que este script necesita hacer es ejecutar el comando CodeGen. Entonces, será GraphQL-CodeGen. Y esto ejecutará el proceso que se conecta realmente a tu API de GraphQL, realiza todas las validaciones y crea los tipos por ti. Y ahora que hemos configurado eso, vamos a ejecutarlo. Tenemos nuestra API en funcionamiento. Cuando lo hagas por tu cuenta, asegúrate de que tu API de GraphQL esté en funcionamiento, de lo contrario, esto fallará, porque necesita tener algo a lo que conectarse realmente. Pero la mía sí lo está, así que ejecutaré npm run Codegen.

Y parece que hay un problema, así que debo haber escrito algo mal. Verás, las claves de mapa implícitas deben estar en una sola línea. Así que creo que probablemente sea algo típico de Yaml, puede que haya escrito mal esto. Sí, así que necesito dos puntos aquí. Oh, veo tu comentario, creo que Blazeedge, no sé cómo se pronuncia su nombre, pero gracias. Sí, ese era exactamente el problema. Así que ahí vamos. Analizó nuestro archivo de configuración y generó nuestras salidas. Y lo que vamos a ver es un nuevo archivo aquí llamado generated.ts. Y este es el resultado de todos esos diferentes complementos que especificamos. Generó un montón de tipos de TypeScript que representan todo nuestro esquema de GraphQL. Generó tipos específicos basados en nuestra consulta individual que estamos ejecutando. Por lo tanto, esto estará tipado a los campos reales que seleccionamos de los modelos generales que obtenemos aquí. Y finalmente, el documento de usuarios de Git, que es una representación del documento de la consulta que queremos ejecutar. Por lo tanto, no es importante leer todos estos tipos y constantes en detalle, solo sepa que fueron generados por GraphQL Codegen para que podamos usarlos en nuestras consultas y en nuestras definiciones de TypeScript. Pero ahora que los tenemos, podemos reemplazar nuestras consultas con los objetos generados. Entonces, lo que eso significa es volver a app.tsx y reemplazar un par de cosas. Entonces, si vamos a app.tsx, lo que vamos a hacer es eliminar algunas de estas cosas. Y lo primero que podemos eliminar es esta consulta de usuarios de Git. Ya no la necesitamos porque vamos a usar la generada para nosotros. Así que en realidad la importaré. Será el documento de usuarios de Git. Esto es, como dije antes, la representación del árbol de sintaxis abstracta de la consulta que estamos ejecutando en esta consulta de usuarios. Así que eso es lo que es. A continuación, lo que debemos hacer es actualizar donde estamos usando el hook de consulta utilizado aquí. Entonces, lo que esto va a hacer en su lugar es tomar el documento de usuarios de Git. Y ahora que hemos hecho eso, lo que podemos hacer es eliminar esto. Esa es la cosa genial de usar GraphQL Codegen con URQL aquí, es que va a saber en función de este documento de usuarios de Git cuál es el tipo de retorno. Así que ahora, si miramos nuestro objeto data, podemos ver que es un tipo de respuesta de consulta de usuarios de Git. Y finalmente, ya no estamos usando este tipo escrito manualmente. Así que podemos eliminar eso aquí. Y ahí vamos. Creo que eso está bien. Y el siguiente paso es ajustar los tipos. Pero antes de pasar a eso, quiero ver por qué necesitamos ajustar nuestros tipos. Lo que vamos a ver ahora es una línea ondulada aquí con un error y eso es TypeScript diciéndonos que, oye, falta la propiedad created at en el tipo, que es la respuesta de esta consulta de uso. Eso es exactamente lo que queríamos. Anteriormente, no obteníamos ese mensaje de error y en su lugar obteníamos un comportamiento extraño en nuestro frontend. Ahora, TypeScript realmente nos advertirá cuando nuestra consulta cambie y algo esté mal y necesitemos ajustar nuestros tipos. Eso nos lleva a la siguiente parte aquí, ajustar nuestros tipos. Verás errores de tipo debido al campo created at. Eso es exactamente lo que queríamos. Ahora podemos usar los tipos generados en función de la consulta real que estamos ejecutando para definir cómo debería verse el modelo en nuestro archivo types.ts. Entonces, aquí es donde vamos a necesitar cambiar las cosas. Lo primero que vamos a hacer es importar. Y estamos importando un tipo y el tipo se llama consulta de usuarios de Git. Y lo estamos importando desde nuestro archivo generado. Este es un tipo que representa la respuesta de la consulta real que escribimos. Por lo tanto, solo tendrá en cuenta estos campos, no le importarán otros campos que están disponibles en el esquema de GraphQL. Está adaptado directamente a este esquema. Enfatizo eso tanto porque esto es realmente genial. Esto es lo que falta y esto es lo que une la brecha entre tu frontend y tu backend y las consultas reales que estás escribiendo. Esto es lo que te permite obtener ese comportamiento totalmente seguro de extremo a extremo. Entonces, de vuelta en types.ts, ahora que hemos importado eso, podemos deshacernos de estas definiciones de tipo escritas manualmente. Y en su lugar, lo que queremos hacer es definir estos tipos en función de la respuesta de tu consulta. Entonces, eso se verá así. Diremos que una nota debe ser una getUsersQuery, vamos a profundizar en la respuesta de los usuarios. Y en TypeScript, en realidad puedes profundizar en las matrices para obtener sus tipos, como obtener los tipos de los objetos en la matriz. Así que vamos a profundizar en el primer usuario. Y vamos a decir, queremos ir a las notas de los usuarios. Y queremos que el tipo de nota sea el mismo que el tipo de la primera nota en esa matriz. Básicamente, copiando la forma de lo que sería una nota a partir de la respuesta de nuestra consulta de GraphQL, que básicamente será solo un mensaje. Entonces, de vuelta en types.ts, ahora vamos a hacer exactamente lo mismo para un usuario, excepto que en su lugar será el usuario. Así que ahora hemos ajustado nuestros tipos. Estos tipos cambiarán dinámicamente a medida que nuestras consultas cambien, y a medida que nuestra API de GraphQL cambie, se validará en función de eso. Y obtendrás errores si algo que estás consultando ni siquiera existe en tu API de GraphQL. Entonces, ahora eso se ve bien, podemos ejecutar nuestro proyecto, npm run dev. Y podemos abrirlo. Y lo que estamos obteniendo es que todavía vemos el 'not a number' aquí. Y eso es porque dentro de nuestro componente, todavía lo estamos representando aunque lo hemos eliminado.

Entonces, si vamos a nuestros componentes, en realidad veremos este problema aquí ahora, lo cual es bueno. Y esto es exactamente lo que queremos. En TypeScript, ver errores a menudo es algo bueno porque sabes que tus problemas están siendo capturados. Así que simplemente eliminaré todo eso ya que ya no nos importa. Lo hemos eliminado de la consulta y deberíamos ver todo funcionando bien. Así que eso es todo. Básicamente, eso es el final de nuestra configuración de la aplicación de pila completa.

Muy bien, todos. Estamos llegando al final aquí. Así que voy a repasar lo que hemos hecho y dar un poco de contexto sobre la seguridad de tipos aquí. A medida que avanzamos, construimos nuestra base de datos. Modelamos nuestros datos, realizamos una migración, que creó nuestra base de datos. Y luego, en realidad, agregamos datos a nuestra base de datos. A partir de ahí, construimos una API de GraphQL y configuramos la seguridad de tipos entre nuestra API de GraphQL y nuestra base de datos para asegurarnos de que al consultar nuestra base de datos obtengamos datos que realmente existen en nuestra base de datos. A partir de ahí, construimos nuestro esquema de GraphQL, que utiliza esa infraestructura subyacente de la API de GraphQL para asegurarnos de que los datos que exponemos desde nuestra API de GraphQL realmente existan en nuestra base de datos de una manera segura en cuanto a tipos. Y luego, estas dos últimas secciones que hemos pasado son donde realmente consultamos nuestra API de GraphQL y nos aseguramos de que a medida que nuestras consultas y nuestra API cambien, los tipos representados, o lo siento, los tipos en nuestro frontend que representan esos modelos reflejen los cambios en esas consultas y en la API. Así que hay muchas piezas pequeñas ahí, pero una vez que lo configures, esta experiencia de desarrollo es muy agradable porque a medida que actualizas consultas, a medida que cambias consultas, a medida que cambia tu API y estás desarrollando en tu frontend, puedes estar seguro de que los datos a los que accedes realmente existen y que las consultas que estás ejecutando devuelven los datos que necesitas para alimentar tu API. Así que todas estas piezas funcionan juntas para brindarte una buena experiencia de desarrollo y te brindan un poco menos de estrés al codificar. No tienes que preocuparte tanto cuando cambias una consulta o cambias tu API. Algo podría romperse. Así que esa es la idea general de todo esto y quiero agradecer a todos por unirse a mí y por seguir adelante.

Veo que todavía hay 29 de ustedes así que muchos de ustedes se quedaron hasta el final y realmente aprecio eso. Esto fue muy divertido para mí. Dar masterclasses es mi parte favorita de mi trabajo. Así que gracias a todos por unirse y por interactuar conmigo en los chats. Como dije al principio, si quieres contactarme o hacer alguna pregunta, aquí están todos mis contactos. Puedes contactarme en Twitter, donde soy más activo o puedes enviarme un correo electrónico. O en el Slack de Prisma, en realidad lo estamos renovando y vamos a tener una serie de eventos de la comunidad allí, así que si quieres unirte, también puedes contactarme allí. Y lo último que quiero decir es que si quieres organizar esta masterclass tú mismo, te he dado el enlace del documento en Notion. Por favor, siéntete libre de tomarlo. Por favor, cópialo. Si te gusta hablar en meetups, te doy permiso total para copiar completamente toda esta masterclass y darla por tu cuenta. Es una experiencia muy divertida. Aprendes mucho. He dado esta masterclass como cinco veces y aprendo cosas nuevas cada vez gracias a ustedes. Todos los problemas con los que te encuentras me ayudan a aprender mejor cómo dar esta masterclass. Definitivamente te animo a intentar dar una masterclass y si lo haces, tal vez considera hacer esta, pero muchas gracias a todos y espero que tengan un excelente resto del día. Adiós.