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

♪ Gracias chicos por unirse aquí. Veo que hay algunos participantes y la gente sigue llegando. Así que es genial ver eso. Me alegra que todos pudieran unirse esta mañana. Es mañana aquí. Estoy en California. Pero sé que esta es una conferencia global remota, así que nunca se sabe de dónde es la gente. Así que buenos días, buenas tardes, buenas noches a todos. Espero que estén listos para comenzar a codificar.

Vamos a ver una aplicación full-stack, y vamos a construir, básicamente, una aplicación que tenga seguridad de tipo de principio a fin, y lo haremos desde cero y hablaremos de todas las diferentes piezas en las que debes preocuparte y en las que debes pensar cuando implementas seguridad de tipo de principio a fin, y vamos a ver cómo algunas de estas herramientas nos facilitan mucho hacerlo y lo hacen realmente divertido. Una vez que configures una aplicación como esta, si eres como yo, terminarás emocionado por ello después y te divertirás mucho configurando todas estas cosas.

Veo que ya hay una pregunta, ¿cuál es el enlace al servidor de Discord? El que está en el correo electrónico no funciona. Déjame ver si puedo conseguirte un enlace allí a medida que más personas se unen. Veamos. No como personas. Ahí está el enlace. Lo he publicado. Así que si alguien más necesita el enlace de Discord, lo he publicado en las preguntas respondidas, así que debería estar allí. Pero, bueno, sigamos un poco más en la agenda de hoy, Voy a publicar un enlace en el chat, y esto será solo un enlace a un documento de Notion. Y esto va a ser como la fuente de verdad para todo este taller que tenemos aquí. Y aquí es donde tenemos toda la información sobre lo que vamos a hacer. Y en realidad he dividido este taller en diferentes lecciones, así que las tomaremos una a la vez. Comenzaremos con esta sección de bases de datos y nos iremos moviendo lentamente hacia abajo. Pero solo un poco de información sobre esto, sobre el taller. Aquí están los recursos aquí arriba. Este es el enlace solo a este documento de Notion que acabo de publicar. Si tienes algún problema para abrirlo, avísame en el chat o en las preguntas y puedo ayudarte con eso. Y este va a ser el repositorio de GitHub con el que vamos a trabajar. Así que podemos, si lo abres, simplemente tenerlo listo una vez que comencemos. No puedes ver mi pantalla. Eso probablemente sea un problema. Veamos. ¿Cómo está eso? ¿Es mejor? Veo que el chat está deshabilitado para algunas personas, veamos. Aquí está el enlace a ese documento de Notion y temas sobre cómo puedes navegar por tu repositorio de GitHub. Aquí está el enlace a ese documento de Notion en el canal público. Genial, perfecto. Veo que la gente está chateando en Discord sobre la pantalla. Así que eso es perfecto. Todos pueden verme ahora. Sí, enviaré el enlace allí. Podríamos simplemente usar el chat de Discord si ese otro chat no está funcionando. Ahí lo tienes. Genial. Parece que la gente está dando pulgares arriba, así que el enlace funciona. Así que simplemente continuaré hablando a través de esta primera página mientras la gente la abre y comienza. Entonces, hay algunos requisitos previos para esto. Los requisitos previos son simplemente que necesitas tener Node.js instalado en tu máquina. Todo lo que vamos a hacer usará Node. Así que solo queremos asegurarnos de tenerlo instalado. Y te daré tiempo para instalarlo si aún no lo tienes a medida que avanzamos. Y luego, se recomienda que uses VS Code para esto. Hay algunos complementos que simplemente facilitan un poco la vida al trabajar con Prisma, específicamente. Así que, VS Code es mi IDE sugerido. Pero si tienes otro que te gusta usar, que prefieres, siéntete libre de usarlo. Y luego, tener un entendimiento básico de Node.js, React, y TypeScript es bueno tenerlo. No es necesario, porque te guiaré en todo, pero sería bueno saber al menos un poco y tener algo de experiencia con Node.js, React y TypeScript.

Y luego, avanzando en esta sección de ¿Qué vas a hacer?, si quieres leer esto con más detalle, siéntete libre de tomarte un minuto solo para leerlo. Pero básicamente, esto simplemente repasa la agenda que tenemos para hoy. Esto repasa todas las diferentes piezas del taller que vamos a hacer, por lo que lo desglosa en pequeñas descripciones. Por ejemplo, vamos a comenzar construyendo nuestra base de datos SQLite. Y luego vamos a configurar GraphQL Yoga, que es un servidor GraphQL, y luego construir ese servidor, y finalmente construir el cliente y conectar todas esas diferentes piezas. Veo que más personas están levantando la mano, así que veamos qué está pasando aquí. Veo una pregunta, ¿habrá un repositorio después? Sí, habrá un repositorio. Y luego parece que el chat está deshabilitado para algunas personas. Sí, así que simplemente usaremos el chat de Discord. ¿Dónde está exactamente el enlace? De acuerdo. Así que para todos los que buscan el enlace, voy a entrar en el chat de nuevo. O en realidad, creo que el... Veamos. Veamos.

Vamos a reunir a todos en el chat de Discord. He publicado un enlace al Discord en nuestro chat. Únete allí y luego ve al canal de talleres de RADV, y luego, si entras al canal de este taller, deberías ver el enlace a Notion. Verás el enlace a Notion. Daré solo un par de minutos para que la gente entre allí. Hice clic en el enlace. Parece que está funcionando allí, eso es bueno. De acuerdo, genial.

Luego, aquí está la agenda de tiempo real. Así que vamos a comenzar como lo estamos haciendo ahora mismo. Y luego vamos a configurar Prisma. Vamos a configurar el servidor GraphQL después de eso. Vamos a construir los resolvers de GraphQL y todas las diferentes piezas allí. Y luego vamos a construir el cliente React y cerrar la brecha de tipos entre el backend y el frontend. Y luego voy a dividir estas lecciones en dos partes diferentes. Habrá una primera parte donde simplemente te guiaré en todo esto aquí. Te guiaré a través de las diferentes lecciones. Te guiaré a través de cada pequeño paso que vamos a dar, y trataré de explicar el proceso a medida que avanzamos. Y para esta parte, te animo a no codificar junto conmigo. Te animo a simplemente escuchar y absorber la información que te estoy dando ya que tendré algunos consejos y trucos allí mientras avanzamos. Y luego, después, te daré unos 20 minutos después de cada pequeña lección para que trabajes en todas las piezas por tu cuenta y luego obtengas comentarios de mí a través del chat si tienes alguna pregunta. Así que ese será el momento en el que te animo a codificar. De esa manera obtienes la información y tienes tiempo para codificar después. Es una situación en la que todos ganan.

Y luego, antes de comenzar, solo un poco sobre mí. Mi nombre es Steven Adams. Soy un Defensor del Desarrollador en Prisma. Y he pasado los últimos ocho años trabajando como Desarrollador Full-Stack. Y recientemente me he adentrado en la Defensa del Desarrollador. Y ha sido increíble porque puedo hacer talleres geniales como este y pasar el rato con personas como tú todos los días y simplemente enseñarte a codificar y hacer diferentes cosas de codificación aleatorias. Y ha sido genial. Me encanta. Y estoy súper emocionado de dar este taller. Tengo toda mi información de contacto aquí. Así que si quieres enviarme un mensaje sobre cualquier cosa, después de esta conferencia o simplemente después tal vez de una sección individual y necesitas comunicarte conmigo, no dudes en hacerlo en cualquiera de estos formatos aquí y trataré de responder lo antes posible. Y por último, si quieres organizar este taller tú mismo, este documento, he proporcionado el enlace para que todos puedan tener acceso. Esto es algo que simplemente mantendré. Y si alguna vez quieres simplemente tomar esto y dar este taller, tal vez en una reunión local o si estás interesado en tal vez comenzar a hablar y quieres usar lo que aprendiste hoy para enseñar a tus amigos, siéntete libre de tomar este taller de mí. Creo firmemente que todos estos recursos deberían ser abiertos y disponibles para todos. Así que esto no es mío exclusivamente, esto es para que todos lo usen si lo desean, así que por favor siéntete libre de hacerlo. Con eso, todo resuelto, creo que vamos a comenzar con la primera lección. Pero antes de hacerlo, voy a revisar algunos chats y asegurarme de que todo se vea bien aquí. Así que veo una pregunta de Ben sobre unirse a Discord. En caso de que aún no lo hayas hecho, he publicado un enlace en el chat en vivo. Así que eso debería estar bien. Un enlace al repositorio que estará en el documento de Notion, y eso está en la parte superior en la sección de recursos. Y el enlace al documento de Notion está en Discord. Así que en realidad voy a entrar allí y fijarlo. Veo que Alex agregó un buen enlace que parece estar funcionando para la gente. Así que sí, ve allí y consíguelo. Algunos de ustedes no pueden unirse a Discord. Veamos. Voy a publicar el buen enlace en este chat y ve a intentar acceder a ese. Así que eso debería estar en el chat ahora, Ben. Y mientras haces eso, voy a comenzar a hablar sobre la primera lección. Así que vamos a entrar aquí, la forma en que esto va a funcionar es que vamos a repasar los diferentes objetivos. Vamos a repasar la configuración de este proyecto. Y luego vamos a pasar por cada una de las tareas. Y una vez que termine todas estas tareas, te daré tiempo para hacer esto por tu cuenta. Así que ven aquí. Voy a aumentar un poco el tamaño para ustedes. Y justo en la parte superior. Entonces, el objetivo de esta primera lección es simplemente configurar tu base de datos. Vamos a modelar nuestro esquema. Vamos a llenar nuestra base de datos, que será una base de datos SQLite. Y la estamos configurando utilizando Prisma. De esa manera, podemos gestionar nuestro esquema de base de datos y nuestro cliente de base de datos de la aplicación todo a través de una sola herramienta, y esa es Prisma. Así que al final de esto, lo que tendrás es un backend. Vamos a comenzar nuestro proyecto de servidores backend. Vamos a conocer la estructura de nuestra base de datos y cómo interactuar con ella de manera segura en cuanto a los tipos, porque Prisma te proporcionará un cliente de tipos seguros para hacer todo esto.

Lo primero que haremos es clonar el proyecto inicial desde GitHub. Aquí habrá un enlace para ustedes. Una vez que lleguemos a ese punto, lo copiaré y abriré una terminal. En esta terminal, estaré en mi escritorio y ejecutaré git clone y pegaré esto aquí. Esto simplemente clonará el repositorio. Esto tiene algunas configuraciones iniciales para nosotros y debería tener algunas cosas diferentes y explicaré lo que tiene al principio.

Dentro de aquí, verán algunas carpetas diferentes, verán una carpeta de cliente y esto tendrá nuestra aplicación React. Esto es solo el comienzo. Agregaremos más cosas más adelante, pero esto es solo un punto de partida que he preparado para ustedes. Y lo mismo con el servidor. Todo lo que tenemos ahora es un package.json con algunos paquetes ya instalados para usar TypeScript y la configuración de TypeScript. Y eso es todo por ahora, vamos a agregar todo lo demás por nuestra cuenta.

Permítanme mover este chat para poder mover algunas cosas. Genial. Bien, volviendo al documento de Notion, hemos clonado esto y luego podemos seguir las instrucciones del readme para instalar todos los paquetes y demás. Así que lo explicaré en un momento, pero es importante asegurarnos de tener la parte uno seleccionada. Esta es una rama que he creado y cada lección diferente en este masterclass tendrá una rama asociada con ella como punto de partida. Por ejemplo, estamos en la primera lección, así que seleccionaremos la parte uno, eso nos dará el punto de partida. Si te quedas atascado en alguna de estas lecciones, por ejemplo, si te quedas atascado en la parte uno y tienes un problema con ella, entonces simplemente puedes seleccionar la rama de la parte dos si sigo adelante y tal vez no hayas terminado la sección anterior y te llevará al punto de partida en el que necesitas estar para comenzar esa siguiente sección. Si tienes alguna pregunta al respecto o alguna inquietud, no dudes en enviarme un mensaje si te quedas atascado y no recuerdas cómo llegar allí, pero en general así es como lo harás. Puedes seleccionar las ramas de las partes para las secciones específicas. Y para esta sección específica del masterclass, estaremos trabajando en el directorio del servidor durante toda la lección, así que solo estaremos trabajando en el código del servidor.

Así que vamos a ir aquí al readme y lo abriré como una vista previa para que podamos verlo un poco mejor. Así que hemos ido al repositorio. Ahora solo necesitamos instalar las dependencias en ambos proyectos y luego podemos iniciar los servidores. En realidad no voy a iniciar los servidores ahora mismo porque no es necesario, pero entraré en el servidor e instalaré npm install. Esto simplemente instalará todas las dependencias que ya tenemos para usar TypeScript. Y se encontrarán aquí. Y luego podemos pasar a la primera tarea. Estas tareas definirán lo que haremos en esta sección. Lo primero que haremos es instalar Prisma como una dependencia de desarrollo. Usaremos Prisma para generar el esquema de la base de datos como mencioné antes. Y necesitamos tener esta herramienta de CLI instalada para inicializar Prisma en nuestro proyecto. Y verán la solución que podrían usar para una de estas tareas. Y entonces, Prisma va a instalar Prisma como una dependencia de desarrollo. Así que necesitarás instalar Prisma para empezar, o en el caso de un run元 si vas a ejecutar esto internamente sin un usuario o proveedor real, necesitas tener la opción de elegir decir, `Voy a usar Prisma como una dependencia de red`. Así que tendrás que elegir eso, encontrar tukeep y ponerlo en tu caché. Así que digamos que tengo solo un objetivo y quiero que sea completo. De acuerdo. Y luego haremos mpx Prisma init, y luego podemos usar esta bandera del proveedor de origen de datos para decirle que queremos una base de datos SQLite. Y ahí lo tenemos. Veremos que nuestro Prisma se inicializó. Veremos que se creó el esquema de Prisma para nosotros. Tendrá un pequeño esquema de inicio, y luego nos dará algunos pasos siguientes, que realmente no necesitamos seguir aquí para esta parte. Voy a mover esto a la derecha. Para que sea un poco más legible, pero veamos qué nos dio. Veremos que ahora tenemos esta carpeta de Prisma y tiene el archivo schema.prisma. Y este archivo simplemente tendrá un generador definido para nosotros, y esto es lo que definirá cómo generar el Cliente de Prisma, que es cómo accederemos a nuestra base de datos. Una vez que ejecutemos Prisma Generate, utilizará nuestro modelo de base de datos para generar ese cliente para nosotros. También tenemos nuestra fuente de datos, en realidad nuestro bloque de datos aquí. Y así es como definimos cómo conectarnos a nuestra base de datos y qué tipo de base de datos estamos conectando. Así que podemos ver aquí que nos estamos conectando a una base de datos SQLite y buscará en una variable de entorno llamada url de la base de datos para encontrar nuestra cadena de conexión. Y Prisma notó que no teníamos un archivo .env, así que creó uno y creó un archivo de base de datos predeterminado para nosotros. Y eso es lo que vamos a usar. Este es un archivo de base de datos que SQLite usa para almacenar sus datos. Entonces, volviendo a los pasos aquí, parece que hemos completado el primer paso. Y si necesitas más ayuda con los comandos de inicialización o simplemente con cualquier comando en general, tengo enlaces a la documentación a lo largo de este documento, así que siéntete libre de consultarlos. Así que esa es la primera tarea, hemos terminado eso, y ahora podemos pasar a crear nuestros modelos de usuario. Entonces, nuestra base de datos tendrá una tabla de usuarios y esta tabla de usuarios tendrá algunas cosas diferentes. Queremos que tenga un ID y un nombre. Y la forma en que lo definimos en nuestro esquema de Prisma es configurando un bloque de modelo. Así que iré y abriré el esquema de Prisma aquí. Y vamos a crear un nuevo modelo y se llamará usuario. Y lo que queremos que tenga es el ID, como dijimos. Así que usaré un entero para el ID. Y vamos a decir que este es la clave primaria de nuestro modelo. Así que uso esto en ID. Y luego queremos darle a esto un valor predeterminado de incremento automático, de esa manera, cada vez que se crea un nuevo registro, simplemente se incrementará uno. Entonces, el primer registro tendrá un ID de uno, el siguiente tendrá dos y así sucesivamente. Y luego la siguiente pieza que necesitábamos era un nombre, creo.

Así que un nombre. Vamos a agregar un campo de nombre aquí y haremos que ese nombre sea una cadena. Ahora tenemos un modelo de usuario que tiene un ID y un nombre. Y actualmente no tenemos un cliente de base de datos generado para trabajar realmente con estos datos o almacenarlos en nuestra base de datos, y en realidad este modelo ni siquiera está en nuestra base de datos todavía. Simplemente lo hemos definido en nuestro esquema de Prisma y podemos seguir desde ahí.

Pero antes de hacer eso, lo que necesitamos a continuación es crear el modelo de notas. Así que lo que vamos a tener es un usuario y una nota en nuestra base de datos, y la forma en que esto funcionará al final de esto es que un usuario tendrá muchas notas asociadas con él, y pueden crear una nota en el cliente de React que agregamos. Así que vamos a agregar también un modelo de nota, y ese modelo de nota va a necesitar tener todos estos campos. Así que voy a volver aquí. Crearé un modelo llamado nota. Y luego copiaré este ID porque será el mismo ID exacto para esto. Y luego vamos a necesitar un campo de mensaje. Así que crearé un mensaje. Esto será una cadena. Y luego crearé un creadoEn y actualizadoEn. Entonces, cuando se crea un registro, queremos tomar una marca de tiempo de cuándo se creó el registro. Y cada vez que se actualiza el registro, también queremos una marca de tiempo actualizada. Así que vamos a hacer el creadoEn, esto será un campo de fecha y hora, y vamos a establecer un valor predeterminado para la función now. Entonces, esto simplemente dirá, de forma predeterminada, cuando se crea un registro, inserta una marca de tiempo actual en él. Y luego, de manera similar, haremos actualizadoEn. Esto también será una fecha y hora. Y tenemos un atributo en Prisma llamado actualizadoEn que mantendrá esto actualizado a una marca de tiempo actual cada vez que se actualice o cambie el registro. Así que eso es útil ahí. Lo tenemos listo para usar. Y finalmente, necesitamos tener un userID. Y lo que hará este userID es que será la clave externa que apunta a un usuario para que sepamos a qué usuario pertenece realmente esta nota. Así que diremos que esto es un userID y es un entero. Genial, eso termina nuestro modelo de nota por ahora.

Lo último que realmente necesitamos hacer es crear una relación uno a muchos entre el usuario y la nota. De esa manera, podemos tener un usuario que tiene muchas notas asociadas con él. Para hacer eso, necesitamos usar el atributo de relación y configurar las relaciones en nuestro esquema. Así que vamos a hacer eso aquí. Y me tomaré un segundo para mirar el chat y parece que no hay preguntas actuales así que seguiré, genial. Entonces, para la nota, vamos a configurar la relación en el lado de la nota. Así que la relación estará relacionada con un usuario. Así que agregaré un campo llamado usuario. Y luego el campo usuario será del tipo usuario, que hemos definido aquí arriba en nuestro modelo. Y luego podemos usar el atributo de relación para configurar esta relación. Y esto va a tomar dos valores diferentes. Va a tomar campos, que será un array, y esto será userID. Esto especifica qué campos en el modelo actual van a apuntar al modelo de relación. Y luego, a continuación, necesitamos hacer referencias. Así que esto va a ser a qué columna en el modelo de relación se hacen referencias a la clave externa. Así que queremos hacer referencia al ID. Y esto va a decir que hay un problema porque nuestra relación no se ha definido en el lado opuesto. Dentro de Prisma, necesitas definir relaciones en ambos lados, así que en ambos modelos, de esa manera, cuando estés usando el Cliente de Prisma, sabrás cómo llegar de un usuario a una nota y sabrás cómo llegar de una nota a un usuario. Así que para hacer eso, simplemente necesitamos hacer notas. Así que estoy creando un campo llamado Notas y será una nota y será un array. Así que eso configura nuestra relación. Ahora tenemos un usuario que tiene muchas notas y cada nota tiene un solo usuario y sabe cómo llegar a su usuario. Estoy mirando el chat. Veamos, NPX, Prisma, Ennit, proveedor de origen de datos, SQLite. Bien, Alex, veo tu pregunta allí y el problema es que antes del proveedor de origen de datos, necesitas dos guiones. Así que en realidad voy a publicar aquí el fragmento corregido. Ahí lo tienes. Eso debería funcionar para ti, pero siguiendo adelante. Así que hemos configurado esa relación ahora y volveré a abrir nuestras tareas. Ahora que hemos terminado esto, necesitamos crear una migración en realidad. Esto actualmente solo está en nuestro esquema de base de datos. No está en nuestra base de datos en realidad. Está en nuestro esquema de Prisma, lo siento. Así que necesitamos aplicarlo a nuestra base de datos utilizando una migración. Para hacer eso, podemos usar el comando migrate dev y este comando va a crear un nuevo archivo de migración y luego aplicarlo a tu base de datos. Y este comando migrate dev es específicamente el comando que vas a usar mientras estás en desarrollo, porque simplemente aplicará toda la migración a tu base de datos. Así que voy a volver a nuestra terminal. Si abro esta terminal y puedo escribir npx Prisma migrate dev. Y luego queremos darle a esta migración un nombre, así que guión guión nombre. Y simplemente lo llamaré init. Esta es nuestra migración inicial. Oh, esto que escuchas es que no estoy en la carpeta del servidor.

Así que servidor de CVs y luego ejecutaré esa migración. Genial. Entonces esto fue a nuestro esquema de Prisma, lo cargó, creó un conjunto de migraciones para nosotros y luego lo aplicó a nuestra base de datos. Si quieres ver la migración que se creó, puedes ir a las migraciones, puedes abrir el archivo SQL. Y esto es lo que realmente se generó y se aplicó a nuestra base de datos.

Ahora que hemos terminado eso, ahora tenemos una base de datos con nuestro esquema aplicado. Ahora simplemente necesita algunos datos. Entonces, para agregar algunos datos a ella, vamos a ver la base de datos y para hacerlo necesitamos agregar un nuevo archivo llamado seed.ts y este archivo simplemente contendrá este código que proporcioné aquí para agregar algunos datos para nosotros. Así que lo copiaré. Si puedo hacer que la copia funcione. Veamos. Oops. Ahí vamos. Copiar, genial. Luego regresar a nuestro código nuevamente. Y luego dentro de esta carpeta prisma, voy a crear un archivo llamado seed.ts. Este será el archivo que ejecutaremos para agregar todos nuestros datos. No necesitas saber mucho sobre lo que realmente está haciendo, aunque es bastante fácil de seguir. Esto simplemente elimina todos los registros de nuestra base de datos y luego agrega nuevos datos. Y para ejecutar esto, vamos a ir a nuestro package.json y vamos a agregar una clave aquí llamada prisma. Y esto será un objeto que tiene un valor llamado seed. Y lo que esto hará es ejecutar ts node dev prisma seed.ts. Y la razón por la que lo configuré de esta manera es porque ahora podemos ir a nuestra terminal y voy a mover esto hacia abajo y podemos ejecutar npx prisma db seed, y eso ejecutará este comando. Entonces irá aquí y ejecutará este comando de semilla. Entonces, si ejecutamos esto, veamos, configure seed in your project need to add prisma.seed. Pensé que lo hice. Oh, de nuevo, no estoy en el directorio del servidor. Ahí vamos. Ahora se está ejecutando ese comando de semilla. Podemos ver aquí que realmente ejecutó nuestro archivo seed.ts y que nuestros datos se han agregado y que se ejecutó el comando. Entonces, en este punto, tenemos una base de datos ahora que está completamente poblada con datos y lista para trabajar.

Y en este punto, es donde voy a dejarlo en tus manos. He recorrido todos estos pasos y he explicado cómo funcionan. En este punto, te daré un par de minutos para que trabajes en esto por tu cuenta. Ve a esta página de la lección uno y simplemente sigue todas las tareas. Y lo que voy a hacer en realidad es apagar mi audio por un rato y me quedaré en silencio y te dejaré trabajar en esto. Y si tienes alguna pregunta, por favor publícala en la sección de preguntas y respuestas o en Discord. Estaré monitoreando ambos y las responderé tan pronto como pueda. Y te daré unos 20 minutos para hacer esto y luego volveré para que sigas. Así que en este punto te lo dejo a ti.

Muy bien, eso es todo por ahora. Espero que todos se hayan divertido trabajando en esa primera parte. Y si tuvieron algún problema, no se preocupen. Explicaré cómo ponerse al día en solo un momento.

Entonces, veamos esta segunda sección. Si vuelves a la página de inicio, estaremos en la sección de backend configurar un servidor GraphQL. Y el objetivo de esta lección es simplemente configurar nuestro servidor GraphQL. Esto es lo que expondrá nuestros datos que configuramos en nuestra base de datos. De esta manera, podremos consultarlos desde nuestra aplicación React. GraphQL es un lenguaje de tipos fuertes y permitirá que el frontend realice solicitudes exactas de los datos que necesita de manera segura y autodocumentada utilizando el esquema de GraphQL que generamos.

Para configurar esto, si te perdiste la primera sección, este es nuestro repositorio de GitHub aquí. Este es el enlace. Y estaremos trabajando en el Directorio del Servidor. Y si recién estás comenzando, puedes revisar la rama de la parte dos. Este es el punto de partida para esta sección. De lo contrario, continúa trabajando en el proyecto que comenzaste en el anterior.

Básicamente, lo que estamos haciendo en esta parte aquí es configurar Prisma en nuestra aplicación. Configuraremos algunas de las herramientas iniciales para establecer la seguridad de tipos que utilizaremos en esta aplicación. Y una de esas herramientas se llamará Pathos. Y lo usaremos para construir nuestro esquema de GraphQL, y configurar nuestro servidor GraphQL con GraphQL Yoga. Entonces, comencemos con eso.

El primer paso que tengo aquí es la tarea uno. Lo que debemos hacer es configurar una instancia de nuestro cliente Prisma que esté construida de una manera reutilizable y compartible en toda la aplicación. Así que voy a abrir el código aquí. Me desharé de esto. Dentro de nuestro directorio del servidor, simplemente crearé un nuevo archivo y lo llamaré db.ts. Aquí es donde tendremos nuestro cliente Prisma. Lo instanciaremos y lo exportaremos desde aquí. Así que importaré el cliente Prisma. Y esto será desde Prisma/cliente. Aquí es donde se genera el cliente Prisma. Cuando realmente ejecutas una migración. Lo que hizo la migración fue aplicar nuestro esquema de base de datos a nuestra base de datos, pero como efecto secundario, también generó Prisma para nosotros sin que tuviéramos que ejecutar el comando. Entonces, lo que hace es tomar nuestro esquema de Prisma y genera este cliente aquí, que se llama Prisma cliente JS. Y eso es lo que usaremos para consultar nuestra base de datos. Así que he importado el cliente Prisma. El siguiente paso será instanciarlo realmente. Así que diré, export const Prisma = nuevo cliente Prisma. Lo estoy exportando porque queremos exportarlo y usarlo en diferentes lugares de nuestra aplicación. Y luego, como una pequeña ayuda, también exportaré el tipo de cliente Prisma porque lo necesitaremos un poco más adelante en el proceso. Así que exportaré solo el cliente Prisma. Ahí vamos, eso debería ser todo lo que necesitamos hacer para esa primera tarea. Acabamos de instanciar y exportar el cliente Prisma, de esa manera es su propio módulo. Y si realmente miras la solución aquí, debería ser similar a lo que tenemos. Y ahora, entrando más en el meollo del asunto de nuestro servidor GraphQL. En esta próxima tarea, configuraremos Pathos, que es un generador que usaremos con el esquema de Prisma. Hay un complemento muy bueno. Y si no estás familiarizado con Pathos, y en realidad, creo que incluso antes de explicar Pathos, me gustaría hablar sobre qué es un esquema de GraphQL y cómo se pueden generar. Por lo general, hay dos formas diferentes de construir tu esquema de GraphQL. Puedes escribirlo tú mismo, puedes escribir manualmente el lenguaje del esquema de GraphQL y construir tus diferentes tipos y diferentes consultas y mutaciones y todo eso, y luego aplicarlo a tu servidor GraphQL. Y el servidor GraphQL analizará eso y configurará los diferentes tipos y cosas en el playground por ti. Pero hay otra forma llamada esquemas de GraphQL basados en código, donde en realidad utilizas bibliotecas generadoras similares a Pathos. Y lo que esto hará es, podremos construir nuestro esquema de GraphQL a través de nuestro código. Tiene un conjunto de funciones auxiliares que nos ayudan a construir nuestro esquema de GraphQL en el código. Y lo que se genera a partir de eso es, en realidad, un esquema de GraphQL real que luego podemos aplicar a nuestro servidor GraphQL. Ahora, si eso no tiene sentido, está bien. Vamos a recorrer todos los pasos y lo explicaré a medida que avancemos. Pero solo ten en cuenta que vamos a seguir este enfoque de código primero utilizando Pathos, donde en realidad construiremos nuestro esquema a través del código. Y vamos a usar un complemento agradable con Pathos llamado Pathos Prisma que realmente agrega... Añade algo de seguridad de tipos en cómo realmente construimos nuestros resolutores y tipos de GraphQL basados en nuestro esquema de Prisma. Así que obtendremos esa agradable seguridad incluso dentro de nuestro servidor backend. Entonces, comencemos con esto. Voy a tomar este comando aquí y simplemente lo copiaré para no equivocarme al escribir. Lo que esto hará es instalar Pathos en nuestra aplicación e instalar el complemento Prisma que utilizaremos. Así que voy a ir aquí, abrir una terminal y me voy a cambiar al directorio del servidor y pegar esto. Así que solo estoy instalando esos paquetes allí. Y lo que esto hará específicamente con el paquete del complemento Prisma es que nos dará acceso a otro generador personalizado que podemos usar en nuestro esquema de Prisma que en realidad genera algunos tipos que se utilizarán en la configuración de Pathos para construir realmente estos tipos de GraphQL y mutaciones y consultas y demás. Entonces, para hacer uso de eso, vayamos a nuestro esquema de Prisma y podemos ir a nuestro cuadro de generadores y voy a agregar un nuevo generador y simplemente lo llamaré Pathos. Y este generador simplemente tendrá un proveedor y el proveedor se llamará Prisma Pathos y llamaremos a este generador y analizará estos tipos de Prisma Pathos. Entonces, estos tipos de Prisma Pathos, esto es lo que acabamos de instalar con ese complemento Pathos. Este es el generador que se utilizará.

Y básicamente lo que eso significa es que cuando analizamos este esquema de Prisma, cuando ejecutamos Prisma generate, tomará ese AST de sintaxis analizada de esto y lo aplicará a la función que proporciona y construirá tipos basados en eso. Y lo que he proporcionado aquí es que debemos ir a nuestro proyecto y ejecutar mpx Prisma generate nuevamente. De esa manera se regenerará nuestro cliente Prisma y generará por primera vez estos tipos de Pathos. Así que haré esto y ahora podemos ver que tenemos dos mensajes de éxito aquí en lugar de uno como teníamos la última vez. Hemos generado el cliente Prisma. Por lo tanto, nuestro cliente se regeneró correctamente y también generó nuestra integración de Pathos. Y como he estado diciendo, es solo un conjunto de tipos que Pathos usará para brindarnos seguridad de tipos al construir nuestro esquema de GraphQL.

Y volviendo a las tareas eso finaliza esta tarea para nosotros. Y ahora podemos ir y configurar el constructor de esquemas que nos proporciona Pathos. La clase del constructor de esquemas es la que nos proporciona el conjunto de funciones que se utilizan para construir nuestro esquema de GraphQL.

Así que vamos a crear un nuevo archivo. Voy a ir aquí al servidor y voy a crear un archivo llamado builder.ts. Y dentro de este archivo, vamos a tener que hacer un par de cosas. Vamos a tener que importar el constructor de esquemas. Vamos a tener que importar el complemento de Prisma. Y vamos a tener que importar todos los tipos generados y nuestro cliente de Prisma. Así que vamos a hacer eso, importaré el constructor de esquemas de pathos core. Y luego también necesitamos el complemento de Prisma. del complemento de pathos Prisma, y luego nuestro tipo. Importar tipo Prisma tipos de Pathos complemento Prisma generado.

Y si te preguntas cómo recuerdo dónde están todas estas rutas, no lo hago. Tengo algunas notas aquí que estoy consultando, y también he proporcionado algunos enlaces en este documento. Así que si necesitas saber dónde se colocan todos estos tipos generados en la parte inferior, lo que verás aquí abajo es un enlace a la documentación del complemento. Así que puedes saber exactamente dónde se encuentran todas estas cosas. Así que no te preocupes demasiado por memorizar eso. Definitivamente yo tampoco los tengo memorizados. Pero nos faltó uno. Así que importaré el cliente de Prisma que tenemos. Así que importaré Prisma, y también podemos importar el cliente de Prisma. El tipo, from, esto va a ser de BB. Ahí vamos.

Estas son todas las importaciones que vamos a necesitar por ahora para construir nuestro constructor de esquemas. Y lo que necesitamos hacer a continuación es crear una instancia de ese constructor de esquemas. Así que vamos a hacer eso. Vamos a exportarlo porque lo vamos a usar en otras partes de nuestra aplicación. Simplemente se llamará builder, y será un nuevo constructor de esquemas. Y el constructor de esquemas recibe un genérico, lo que nos permitirá proporcionar algunos tipos y seguridad allí. Y lo que vamos a proporcionar en este momento son estos tipos de Prisma porque estamos usando este complemento de Prisma Pathos. Necesitamos proporcionar los tipos de Prisma al constructor de esquemas para que esté al tanto de los tipos que vamos a usar y cómo se ve nuestro modelo. Así que vamos a hacer Prisma types aquí, y esto simplemente será Prisma types. Aquí vamos. Hemos aplicado eso y ahora estará al tanto de lo que realmente estamos usando para nuestros tipos de Prisma. Y luego, dentro del objeto de funciones actual, este es el primer parámetro del constructor de esquemas. Simplemente tomará un objeto con un conjunto de configuraciones. Y el primero es plugins. Aquí es donde vamos a definir qué complementos estamos usando. Estamos usando este complemento de Prisma que importamos. Y el siguiente será nuestra instancia de Prisma real. Ahora que tenemos este complemento de Prisma, vemos que aparecen estas líneas onduladas rojas y nos está indicando que necesitamos esta propiedad de Prisma. Pathos es lo suficientemente inteligente como para saber que si estamos usando el complemento de Prisma, es posible que queramos tener Prisma instanciado aquí. Así que vamos a proporcionarlo. Tenemos que darle un cliente y le daremos nuestro cliente de Prisma. Así que ese es nuestro constructor de esquemas. Lo hemos configurado con todos los diferentes tipos que necesitamos, y más adelante veremos por qué fue importante proporcionar todos estos tipos diferentes una vez que estemos construyendo un resolutor. Pero por ahora, solo sepan que esto proporciona a Pathos el conjunto de tipos que necesitamos para construir nuestros resolutores de manera segura en cuanto a tipos. Y creo que por ahora, eso termina la tarea tres aquí. Todo lo que necesitábamos hacer era construir este constructor de esquemas. Y lo siguiente que tenemos que hacer es configurarlo un poco más.

Si recuerdas en nuestro esquema de Prisma, y de hecho voy a ir a él ahora solo para mostrarte, tenemos estos date times. Hemos creado at y updated out dentro de nuestras notas. Estos son campos de fecha y GraphQL por defecto en realidad no admite los campos de fecha. Admite un conjunto determinado de escaladores, que incluyen enteros, flujos, booleanos, y cosas así, pero no tiene un tipo de fecha de forma predeterminada. Así que vamos a necesitar agregar un tipo personalizado a nuestro proyecto y aplicarlo a nuestro constructor de esquemas de GraphQL. De esa manera podemos manejar estas fechas. Y para hacer eso, primero vamos a necesitar instalar un paquete y se llama escaladores de GraphQL. Esta es una herramienta de la comunidad que ha sido mantenida por la comunidad y tiene un conjunto de tipos diferentes que tal vez GraphQL por defecto no admite. Así que vamos a instalar eso. Se llamará escaladores de GraphQL. Y parece que se instaló correctamente. Así que eso está bien ahí.

Y ahora dentro de nuestro builder.ts, voy a abrir la página de notion nuevamente, solo para mostrar dónde estamos. Necesitamos agregar este tipo de escalador de fecha y va a implementar el escalador de resolución de fecha que nos proporciona GraphQL scalers. Así que primero vamos a necesitar importarlo. Si obtenemos este escalador de fecha, simplemente copiaré esto, e importaré el escalador de fecha, de GraphQL scalers. Genial. Y luego lo que vamos a necesitar hacer es aplicarlo realmente a nuestro constructor. Entonces, la forma en que podemos hacer eso es volviendo a los genéricos aquí. Podemos ir a scalers, así es como vamos a agregar nuestros valores escalares, y vamos a agregar un escalador de fecha. Y voy a escribir esto rápidamente y luego explicaré lo que realmente significa. Así que vamos a tener una entrada y una salida. Y lo que esto va a ser es cómo vamos a definir realmente este escalador de fecha en nuestros resolutores y en nuestras respuestas de consulta, en realidad. Entonces, las entradas y salidas simplemente definen cómo manejar este campo de fecha y hora en esas diferentes situaciones en nuestro esquema. Lo siguiente que debemos hacer es registrar el tipo de escalador de fecha dentro del propio constructor. Esto solo configura los tipos para él, pero necesitamos manejar realmente el resolutor, cómo resolver esto realmente. Entonces haremos builder.addscalar. Y simplemente lo llamaremos fecha y esto usará el resolutor de fecha. Y luego hay un objeto de configuración al final, pero lo dejaremos vacío por ahora. Así que eso es toda la configuración que necesitas para configurar este resolutor de fecha. Simplemente configuras el tipo escalar para él y luego aplicas el resolutor al servidor. Y en este punto, ahora lo tenemos todo configurado y configurado con los tipos adecuados que vamos a necesitar para ejecutar nuestras consultas. Y necesitamos construir una consulta raíz para poder iniciar nuestro servidor. Entonces, en builder.ts, simplemente vamos a agregar una consulta raíz que se llama hello, y va a devolver la palabra stream solo para que podamos hacer que algo funcione por ahora para que podamos abrir el playground y ver qué está pasando allí. Así que voy a pegar este pequeño fragmento aquí. Siéntete libre de copiar esto, está en el documento de notion. Pero lo que hace es simplemente agregar una consulta. Agrega el tipo de consulta a nuestro esquema de GraphQL, y crea una consulta de hello, y todo lo que hace es resolver la palabra stream.

Y con eso, podemos pasar a la tarea seis, necesitamos crear un módulo que realmente exporte un esquema generado. Por ahora, solo estamos definiendo cómo generar el esquema y necesitamos ejecutar la función generate, generar el esquema y devolverlo. Y para hacer eso, vamos a crear un nuevo archivo nuevamente y este se llamará schema.ts. Entonces, en nuestro servidor, creamos un nuevo archivo llamado schema.ts, e importaremos el constructor aquí. Importar constructor. de constructor. Y esto va a ser muy fácil, simplemente haremos export const schema es igual a builder.to schema. Entonces, esto simplemente toma nuestra configuración de esquema de GraphQL, realmente ejecuta la función to schema, que va a generar el árbol de sintaxis abstracta del esquema de GraphQL, que es lo que se usa por nuestro servidor de GraphQL para iniciar el servidor y definir cómo se puede interactuar con el servidor. Y luego lo exportamos para que podamos usarlo en otros lugares. Así que eso es todo lo que necesitábamos hacer allí. A continuación, necesitamos configurar nuestro servidor de GraphQL. Hasta ahora, solo hemos estado configurando el esquema, pero en realidad no tenemos el servidor en funcionamiento. Entonces vamos a usar GraphQL yoga para hacer eso. Este es solo un servidor GraphQL popular que puedes ejecutar y configurar muy fácilmente. Así que estoy copiando este comando de instalación para instalar GraphQL yoga. Y lo instalaré aquí. Y luego necesitamos un archivo de índice. Este será la raíz de nuestra aplicación. Así que creemos index.ts, e importaremos una función de GraphQL yoga que en realidad va a iniciar nuestro servidor, y esto se llama create server. Entonces, importar, crear servidor, de, oops, ahí vamos. De GraphQL yoga slash node, porque estamos usando la implementación de node. Y luego también necesitamos importar nuestro esquema que se genera a partir del esquema. Y luego necesitamos usar la función create server. Entonces hagamos const server es igual a create server. Entonces, lo que estamos haciendo aquí es crear un nuevo servidor y lo estamos almacenando en una variable de servidor. Y esto toma varias opciones diferentes que puedes ver aquí. Pero la que nos importa es el esquema porque necesitamos proporcionar un esquema a esta aplicación. Entonces le estamos dando nuestro esquema. Esto es solo una forma abreviada de escribir algo como esto. Y finalmente, necesitamos iniciar el servidor. Entonces podemos hacer server.start. Y en este punto, hemos definido nuestro esquema de GraphQL, o al menos el comienzo del mismo con la simple consulta de hello world, estamos generando nuestro esquema de GraphQL aquí. Y ahora lo estamos importando a nuestro archivo de índice y aplicándolo a nuestro servidor de GraphQL yoga. Así que con eso, creo que estamos casi listos para ejecutar realmente el servidor y parece que sí. Entonces, si vas a una terminal, puedes ejecutar npm run dev. Y veamos qué es este paquete que falta. No se puede encontrar el módulo source index ts de, okay, package JSON. Esta podría ser la pieza que, oh, ¿no está en la carpeta source? Déjame ver. Oh, tienes toda la razón, sí. Me disculpo a todos por este error aquí. Todos estos archivos que hemos estado creando, todos estos archivos ts deberían haber estado en la carpeta source. Gracias por señalar eso, Jason. Vamos a mover. Todo allá.

Creo que lo había pasado por alto en el documento, pero sí, todos deberían estar en una carpeta de origen solo para mantener las cosas ordenadas. Y ahora puedo ejecutar npm run dev, con suerte. Ahora dice, string, oh, creo que esto tenía algo que ver con uno de estos paquetes. Voy a eliminar eso. Ten paciencia conmigo aquí, este fue un problema que encontré antes de este masterclass y había previsto que surgiera esto. Así que voy a hacer npm install. Genial, eso se ve bien. Ahora solo necesito actualizar algunos de estos, algunos de estos aquí, unable to find module../., en el builder. Genial. Así que gracias por esperar allí. Había algunos paquetes en esta rama específica que estaban dañados y tuve que reinstalarlos. Ahora tenemos nuestro servidor GraphQL ejecutándose en localhost 4000 y podemos abrirlo. Solo haré Ctrl + clic para abrir esto. Y lo que vamos a ver es el playground de GraphQL. Esto nos lo proporciona por defecto GraphQL yoga. Y viene con varias características interesantes. Tenemos documentación sobre lo que está disponible dentro de nuestro esquema de GraphQL así que podemos ver nuestra consulta hello aquí. Y luego tenemos un explorador donde podemos ver todas nuestras consultas y mutaciones. Así que simplemente voy a ejecutar esta consulta hello. Y vemos que obtenemos datos y es la respuesta world. Y eso es exactamente lo que definimos en nuestro resolutor. Así que eso se ve bien. Y si volvemos a nuestra sección aquí, parece que ese es el último paso en esta sección. Esta es la última tarea aquí. Así que en este punto, una vez más, les cedo el control a ustedes. Les daré unos 20 minutos para que pasen por esta sección por su cuenta. Si terminan antes, siéntanse libres de jugar en el playground de GraphQL y explorar lo que está disponible allí. Publicaré un mensaje en el chat de Discord para pedirles que levanten el pulgar cuando hayan terminado. De esa manera, puedo tener una idea de cuántas personas han trabajado en toda la solución y ver si podemos empezar un poco antes. Pero por ahora, apagaré mi cámara y silenciaré mi micrófono y les daré 20 minutos.

Muy bien chicos, estoy de vuelta. Y creo que estamos listos para pasar a la sección tres. Gracias por toda la ayuda en el chat, solucionando todos estos problemas con el npm run dev y las versiones de los paquetes. Nunca se sabe cuándo un paquete se actualizará y tomará tus cosas, y eso es lo que sucedió aquí. Así que sí, gracias por toda la ayuda allí y espero que todos estén resolviendo eso. Si no es así, siéntanse libres de revisar la parte tres y pueden seguir mientras avanzamos. Entonces, la parte tres es donde realmente vamos a usar Pothos, que acabamos de configurar, para construir nuestro esquema GraphQL. Lo usaremos para construir nuestros tipos, modelos y consultas y aplicarlo a nuestro esquema GraphQL. Y tendremos un servidor GraphQL completamente funcional que luego podremos usar desde nuestro cliente React.

Corinne. Sí, exactamente lo que dijo Stephanie. Si aún tienes ese error, mira la rama completa, copia el archivo package JSON allí o copia el archivo package JSON que pegué arriba y sigue esos pasos. Hubo un problema con un paquete que se actualizó y rompió algunas cosas. Bien, pasemos a la segunda tarea, construir el tipo de usuario. Acabamos de construir nuestro tipo de nota. Ahora necesitamos construir el tipo para nuestros usuarios. Voy a crear un nuevo archivo aquí llamado user.ds y este archivo también necesitará el constructor importado en la parte superior. Y este constructor ejecutará la misma función que antes. Vamos a ejecutar la función del objeto Prisma y vamos a crear el objeto de usuario. Y luego necesitamos esta función find unique que simplemente voy a pegar para no tener que escribirlo todo de nuevo. Y finalmente, podemos definir nuestros campos. Así que esto será la función T y podemos definir los campos que queremos devolver. En nuestro caso, solo queremos devolver el ID, el nombre y luego las relaciones de notas reales para poder profundizar desde los usuarios en las notas y crear esa relación aquí. Para hacer el ID, será lo mismo que antes, será expuesto ID. Y para el nombre, podemos hacer p.exposedString y podemos ver nuestro nombre poblado allí. Y luego este es el que es un poco diferente. Tenemos nuestras notas y podemos hacer t.relation. Así es como se define una relación que se configura. Y una vez más, obtenemos esta seguridad de tipo porque los complementos de Prisma, por lo que sabe que las notas son la única relación que tenemos. Así que eso es lo único en lo que le importa. Y eso es todo lo que necesitábamos hacer para nuestro objeto de usuario. Este fue un poco más simple que antes. Y ahora podemos pasar a la siguiente sección. Creo que puse un espacio en mi nombre aquí por alguna razón. Ahí vamos, genial. Así que ahora abramos el documento de Notion nuevamente y podemos pasar a la siguiente parte. Así que ahora, en este punto, hemos definido nuestros tipos de GraphQL y nuestros modelos. Y ahora necesitamos definir realmente el resolutor. Así que necesitamos decirle a nuestro servidor cómo queremos realmente hacer la consulta de estos datos una vez que se envía una consulta a nuestro servidor GraphQL para estos datos. Sin embargo, para hacer eso, necesitamos tener acceso a nuestro objeto Prisma. De esa manera, podemos acceder a su cliente de base de datos con seguridad de tipo. Y para hacer eso, necesitamos agregar Prisma al contexto del servidor GraphQL para que esté disponible en todas partes. Para hacer eso, vamos a ir a nuestro archivo index.ts. Y aquí necesitamos importar Prisma desde nuestro archivo db. Y dentro de nuestro createServer, podemos ir a nuestro contexto y proporcionarle Prisma. Así que ahora Prisma estará disponible en toda nuestra aplicación y realmente podemos usarlo en nuestros resolutores. Pero actualmente, esto no se hace de manera segura de tipo. Ahora está disponible, pero ninguno de nuestros códigos realmente puede saber que esto está disponible hasta que definamos el tipo para ello. Para definirlo realmente, necesitamos ir a nuestro constructor. Y una vez más, vamos a actualizar esto un poco para que sepa cómo debería ser la forma del contexto. Así que en este genérico aquí arriba, voy a agregar una clave de contexto. Y esto va a tener un cliente Prisma, que importamos anteriormente. Esto simplemente está diciendo que habrá algo aquí dentro del contexto con la clave de Prisma. Y será del tipo cliente Prisma. Y creo que eso es todo lo que necesitamos hacer para esa parte. Y ahora podemos pasar a agregar la consulta de usuario. Así que la tarea cuatro, agregar un tipo de consulta de usuario dentro de tu instancia de Prisma. Con tu instancia de Prisma en el contexto y los tipos definidos, tienes todo esto, necesitas escribir una consulta, agregar un tipo de consulta para tus datos de usuario a user.ts. Así que dentro de nuestro user.ts, podemos definir ese tipo. Y para hacer esto, vamos a hacer builder.queryField. Esta es la función para agregar un campo a tu tipo de consulta, que definimos en builder.ts. Tenemos este tipo de consulta raíz aquí. Así que ahora estamos agregando una consulta específica a ella. Así que la llamaremos consulta de usuarios porque esto simplemente obtendrá a todos nuestros usuarios. Y luego esto seguirá la misma convención que antes, donde tiene un T. Y este T va a hacer T.prismaField. Así que esta es una función en el T que te permite definir un campo dentro de tu tipo de consulta. Y lo que esto va a tomar es un tipo. Así que le daremos este tipo de usuario porque estamos consultando usuarios. Y luego necesitamos definir cómo resolver realmente esta consulta. Y esto va a tomar una serie de parámetros diferentes. El primero es query root args-ctxinfo. Así que hay muchos parámetros aquí, y explicaré lo que hacen los importantes. Así que lo que vamos a hacer es devolver, y luego necesitamos hacer ctx. Y ahora podemos ver que tenemos Prisma aquí. Esto se debe a que si en el constructor, definimos nuestro contexto, y dijimos que hay una clave Prisma en él del tipo Cliente Prisma. Así que ahora sabemos que dentro de nuestro contexto, tenemos Prisma. Y vamos a buscar un usuario. Entonces, dentro de Cliente Prisma, simplemente puedes profundizar en el modelo que quieres buscar, y vamos a encontrar usuario.

Y lo que vamos a pasar a esto en lugar de escribir manualmente nuestra consulta es hacer punto punto punto consulta. Y esto es algo de magia más con ese complemento Pathos Prisma. Bajo el capó, maneja la generación de esta consulta de manera eficiente para nosotros basado en la solicitud de GraphQL que llega, y simplemente podemos pasar eso a la función findMany como el objeto estructurado, y él se encargará de esto por nosotros. Así que eso es genial. Y eso termina nuestro resolutor y esta consulta por nosotros. Veo que Avron net lo logró. Excelente masterclass hasta ahora. Nos pondremos al día con el resto de la grabación. Avron, si estás escuchando, si ya te has ido, no dudes en contactarme si tienes algún problema y déjame saber qué piensas sobre el resto. Bueno tenerte aquí.

Ahora que hemos completado esta parte, vamos a pasar al registro de estas consultas y tipos. Ahora tenemos todos estos tipos definidos, pero este código en realidad no se ejecuta en ningún lugar. No está referenciado por nada que sucede cuando nuestro servidor se inicia. Así que necesitamos importar esto en algún lugar donde podamos asegurarnos de que se registre y se aplique a nuestro generador antes de que nuestro servidor se ejecute realmente. Y para hacer eso, vamos a nuestro archivo schema.ts. Este archivo siempre se ejecutará cuando nuestro servidor se inicie porque lo usamos en create server. Así que lo que necesitamos hacer es importar nuestros diferentes modelos aquí que acabamos de definir, de esa manera estarán disponibles dentro del generador antes de generar nuestro esquema y antes de aplicarlo a nuestro servidor GraphQL. Así que lo que vamos a hacer es simplemente importar nuestros modelos, nota. Y también el modelo de usuario. Y en realidad voy a cambiar el orden de eso. Sí, esto simplemente los importa. En realidad no estamos haciendo nada con ellos. La razón por la que estamos haciendo esto es porque simplemente importará eso lo que hará que se ejecute este código y los objetos se agregarán a nuestra instancia del generador. Así que los hemos instanciado y aplicado. Y en este punto esto ya está aplicado a nuestro esquema de GraphQL. Hemos actualizado nuestro esquema para tener todos estos datos disponibles. Así que si ejecutamos nuestro servidor ahora, podemos. Solo reiniciaré esto por si acaso. Podemos ver en el playground lo que tenemos. Así que ahora si miramos el playground y aumentaré un poco el tamaño. Si miramos aquí en el Explorador de documentos, podemos ver que tenemos este tipo de consulta y tenemos una nueva consulta aquí, nuestros usuarios. Y esto va a devolver una lista de usuarios que siguen este tipo. Así que si vamos al Explorador y buscamos usuarios, podemos agregar el ID, el nombre. A menos que digamos que agregamos el mensaje de la nota. Cerraré esto. Si ejecutamos esto, deberíamos obtener nuestros datos en este punto. Así que esto está funcionando ahora y tenemos un, nuestro servidor GraphQL en funcionamiento con la API funcionando. Y solo para recapitular, lo que hemos hecho hasta ahora, hemos configurado nuestro esquema de base de datos utilizando Prisma y Prisma fue la fuente de verdad. Define nuestro esquema de base de datos y el conjunto de tipos que estamos utilizando en nuestro código de aplicación. Y luego estamos utilizando esos tipos, con el complemento pathos para darnos algo de seguridad de tipos también. Cuando estamos generando nuestros tipos y modelos de GraphQL y los resolutores. Y la API de GraphQL en sí misma va a exponer el esquema de GraphQL, lo que nos permitirá obtener una buena seguridad de tipos en el frontend, lo cual haremos en las próximas secciones. Así que en este punto, una vez más, voy a dejarlo en sus manos. Les daré 20 minutos, así que volveré a la hora y podrán revisar esta sección. Si la terminan, avísenme en el chat para que pueda evaluar dónde estamos y espero que les vaya bien.

Muy bien, todos, estoy volviendo un poco antes aquí. La siguiente sección que tenemos será bastante rápida. Así que creo que ahorraremos un poco de tiempo allí. Así que voy a empezar de inmediato. Estoy abriendo la cuarta lección, que se llama GraphQL en el Cliente. Aquí es donde vamos a entrar en nuestro código de frontend de React y vamos a ejecutar nuestras consultas GraphQL y obtener algunos datos para renderizar algunos datos en la pantalla. El objetivo de esta lección es realmente poner en uso nuestro servidor GraphQL que acabamos de construir conectando la aplicación del lado del cliente a él. Vamos a hacer una solicitud al servidor GraphQL y el propio esquema GraphQL nos permitirá hacer esto de una manera en la que podamos definir exactamente qué campos queremos, lo que nos da la capacidad de crear una buena seguridad de tipos en torno a ello. Así que para la configuración, una vez más, si te uniste tarde y quieres empezar, hay una rama llamada part four. Puedes empezar desde ahí. Si tienes problemas para ejecutar el proyecto, no dudes en buscar en el chat de Discord los problemas de ejecución de NPM que hemos solucionado. Pero voy a empezar aquí. Lo primero que vamos a necesitar hacer es instalar nuestro cliente GraphQL. Pero antes de hacer eso, vamos a revisar el código del cliente y ver con qué contamos actualmente. Voy a abrir esto. Tengo un directorio de origen aquí. Y dentro del origen, tenemos un par de archivos. Tenemos nuestro archivo principal, que es básicamente la raíz de la aplicación. Y esto va a dar errores en este momento porque aún no he instalado los paquetes. Así que haré NPM i. Pero esta es la raíz de nuestra aplicación. Aquí es donde todo se está hidratando y renderizando en la pantalla. Y luego está renderizando nuestro componente de aplicación. Así que nuestro componente de aplicación simplemente tiene algunos datos estáticos por ahora. Y genera una lista de usuarios, básicamente. Y este componente de visualización de usuario es simplemente un componente que recibe nuestros datos de usuario y los muestra de una manera agradable. Así que si ejecuto esto ahora mismo, y abro localhost, lo que veremos es solo estos datos estáticos. Así que tenemos este usuario listado en un cuadro y tiene un pequeño enlace a su nota. Tiene la fecha aquí y este pequeño botón para agregar otro. Entonces, en el código, lo que vamos a necesitar hacer es reemplazar estos datos estáticos con los datos de nuestra API GraphQL. Y ese será nuestro objetivo en esta lección. Para hacer eso, vamos a necesitar consultar nuestra API utilizando una biblioteca que nos permita conectarnos a una API GraphQL. Así que vamos a usar una llamada urql, U-R-Q-L.

Y es uno que es muy fácil de usar. Es bastante popular y está bien mantenido. Así que me gusta usarlo mucho. Así que vamos a instalar eso así como el paquete GraphQL real. Así que haré NPM i urql y GraphQL. Así que esos están instalados. Ahora necesitamos instanciar un cliente para nosotros para que podamos usarlo para consultar GraphQL, y necesitamos proporcionarlo a nuestra aplicación. Y vamos a hacer eso en main.tsx. Entonces lo que necesitamos hacer aquí es importar la función createClient y el componente Provider de urql. Y esta es solo la función que nos permite configurar y crear una conexión de cliente aquí. Y este componente Provider es solo un proveedor de React que nos permite usar este cliente en toda nuestra aplicación. Entonces, si realmente usamos esto, haré constante client equals create client, y esto va a recibir opciones. Y hay muchas opciones diferentes aquí. Hay muchas opciones diferentes aquí que podemos configurar, pero la única de la que realmente necesitamos preocuparnos es esta opción URL. Esta será la URL que apunta a nuestra API GraphQL. Entonces esto es HTTP localhost 4000 slash GraphQL. Este es el punto final donde si vamos a nuestro servidor, cuando ejecutamos NPM run, es donde se inicia. El 000 es otra forma de decir localhost, y está en el punto final GraphQL. Veo una pregunta de kilowatts, ¿este es un cliente que se ejecuta en el servidor? Esto no se ejecutará en el servidor, esto es el frontend, esto será completamente una aplicación frontend, pero accederá a nuestra API GraphQL. Así que tenemos este cliente y ahora necesitamos proporcionarlo a nuestra aplicación. Entonces, para hacer eso, vamos a ir aquí y necesitamos envolver nuestro componente app en este proveedor. Así que haré provider, y necesitamos darle el valor del cliente real que hemos iniciado, así que le daremos valor igual a plan. Para resumir lo que acabamos de hacer aquí, hemos instanciado nuestro cliente GraphQL, ahora podemos usarlo para consultar nuestra API GraphQL, y para poder usarlo dentro de nuestra aplicación, necesitábamos proporcionarlo aquí. Si no estás familiarizado con los proveedores, creo que en el documento que estoy viendo ahora mismo, tengo información sobre la documentación de urql y te guiará a través de lo que hace el proveedor y cuáles son las opciones de creación del servidor, así que puedes consultarlo si tienes curiosidad. Pero ahora que lo tenemos, volvamos a nuestro documento aquí.

Ahora que hemos proporcionado urql a nuestra aplicación y ahora necesitamos escribir una consulta GraphQL para nuestros datos y lo vamos a escribir de manera organizada porque en la siguiente sección vamos a usar estas consultas para generar tipos basados en las consultas individuales que estamos ejecutando, de esa manera podemos obtener esa seguridad de tipo entre el lado del servidor y el frontend. Pero para esta sección, lo que vamos a hacer es simplemente escribir la consulta y ejecutarla tal cual sin esa seguridad para que podamos ver por qué es importante más adelante.

Entonces, lo que vamos a hacer para organizar esto es ir a nuestro directorio de origen dentro de nuestra carpeta de cliente, y vamos a crear una nueva carpeta llamada GraphQL. Y dentro de esa carpeta, vamos a agregar un archivo llamado users.query.ps. Y aquí es donde vamos a escribir nuestra consulta GraphQL y dentro de esto, dentro de este archivo vamos a exportar la consulta también para que podamos exportar la cadena y usarla en nuestro cliente generado. Para escribir GraphQL, vamos a importar este ayudante de Urql llamado gql. Y necesitamos exportar const y lo vamos a llamar obtener usuarios. Y aquí es donde vamos a escribir nuestra consulta GraphQL. Así que vamos a ejecutar una consulta llamada obtener usuarios. Y una vez más, en el documento, tengo un enlace a esta sintaxis de GraphQL que si no estás familiarizado con cómo escribir una consulta GraphQL a mano, puedes ir y ver eso y te guiará a través de las diferentes formas en que puedes configurar consultas y campos y parámetros y todas esas cosas. Pero ahora tengo esta consulta de usuarios que he definido y vamos a ejecutar la consulta de usuarios desde nuestra API GraphQL que es la que acabamos de escribir en la sección anterior. Y ahora podemos enumerar los campos que queremos de ella. Así que voy a obtener el ID, voy a obtener el nombre y luego quiero profundizar en las notas de cada usuario. Y para cada nota, quiero obtener un mensaje y una fecha de creación. Entonces, estos son todos los campos que vamos a necesitar para ejecutar nuestra aplicación. Si revisamos los tipos que tenemos que definir en este momento, estos están escritos manualmente, nuestro usuario tiene un nombre y notas definidas y mensaje y fecha de creación. Y es posible que ya te estés dando cuenta de que es un poco diferente a lo que estamos consultando, tenemos el ID y los usuarios también, pero no está aquí. Y eso es un problema, esa es en realidad una de las razones por las que la seguridad de tipo entre la API del backend y tu frontend es difícil es porque tienes que mantenerlos sincronizados manualmente. Pero en la siguiente sección, vamos a configurar una herramienta que nos permita hacer esto automáticamente. Pero por ahora, lo dejaremos así y aceptaremos el hecho de que no es lo mejor que puede ser y pronto lo será.

Así que hemos escrito esa consulta y creo que podemos pasar a la siguiente sección ahora y aquí es donde realmente ejecutamos esa consulta. Entonces, para ejecutar esto, ahora que hemos proporcionado nuestro Cliente GraphQL a nuestra aplicación, simplemente podemos ir a donde queremos ejecutar nuestra consulta, que será un app.tsx y podemos importar el cliente. Así que voy a hacer import y habrá una función llamada useQuery. Y esto es de la biblioteca Oracle. Y esto usará nuestro cliente proporcionado para ejecutar nuestra consulta una vez que usemos esta función. También voy a importar la consulta de usuarios que escribimos desde la consulta de usuarios de GraphQL. Así que esto solo importa esa cadena de consulta aquí. Y luego, con eso disponible, podemos eliminar esta constante y la vamos a reemplazar con la consulta real que queremos ejecutar. Así que voy a hacer resultados igual a, y luego vamos a usar la consulta y vamos a pasarle, oh, en realidad necesitamos pasarle un objeto. Y este objeto tiene un par de opciones disponibles y vamos a usar la opción de consulta y vamos a pasar la consulta obtener usuarios. Y ahora esto no va a tener un tipo. Esto es del tipo any en este momento, porque no hemos definido qué se va a devolver realmente de esta API GraphQL. Entonces, lo que vamos a necesitar hacer es usar un genérico aquí como un parámetro genérico. Y vamos a decir que esta consulta va a devolver usuarios, y va a ser del tipo user y va a devolver una lista de ellos. Ahora ten en cuenta que esto no es ideal, que tenemos que definir esto manualmente. Y además, este es el tipo definido manualmente que estamos actualizando a mano. Esto no se basa en la consulta real que estamos ejecutando. Entonces, esto se desincronizará si tu consulta cambia. Y eso es un problema que solucionaremos más adelante, pero por ahora, así es como es. Este resultado que devuelve es en realidad un array. Y el primer índice del array son tus resultados reales. Y luego tus data de esos resultados están anidados en un objeto. Entonces, si hacemos eso, lo que estoy haciendo aquí es que estoy sacando la clave data de este objeto de resultados, y la estoy almacenando en una variable llamada data. Ahora podemos ver que estamos obteniendo nuestros data. Es de este tipo aquí, y tiene una lista de usuarios y cada usuario va a ser del tipo user. Así que eso se ve bien. Y si realmente abrimos otra terminal, veamos aquí. Voy a entrar en el directorio del servidor y ejecutaré npm run dev. Así que tenemos nuestro servidor en funcionamiento. ¿Ya estaba en funcionamiento? Veamos. Oh, creo que sí. Así que voy a cerrar todo. Voy a entrar en el directorio del servidor. npm run dev. Voy a entrar en el directorio del cliente. npm run dev. Ahí vamos, genial. Ahora tenemos nuestro servidor y nuestro cliente en funcionamiento y realmente podemos ir a verlos. Asegurémonos de no saltarnos nada. No parece que haya algo. Entonces, si abrimos esto, ahora podemos ver que tenemos tres listados y estos son todos los data que hemos cd'd en nuestra base de datos en la primera sección del taller. Entonces, este es nuestro data real de nuestra base de datos que se consulta a través de nuestra API GraphQL. Entonces, en este punto, veamos lo que tenemos en cuanto a seguridad de tipo. Tenemos seguridad de tipo en nuestro esquema de base de datos. Así que tenemos seguridad allí. Entonces, definimos nuestro esquema a través de nuestro esquema de Prisma y se aplica a nuestra base de datos. Lo que hace es generar un conjunto de tipos que podemos usar dentro del código de aplicación de nuestro servidor y esos tipos se usan con pathos para que podamos tener seguridad de tipo cuando estamos construyendo nuestro esquema de GraphQL. Entonces, ahora tenemos seguridad de tipo en todo eso. El esquema de GraphQL proporciona una forma de consultar de forma segura tu API de una manera en la que sabes exactamente qué campos necesitas y qué campos estás usando y actualmente estamos usando TypeScript en el frontend para definir manualmente los tipos que corresponden con nuestros tipos en el backend. Entonces, ahí es donde está el eslabón perdido.

Todavía estamos definiendo esos manualmente. En la siguiente sección, lo que haremos es configurarlo de manera automatizada para que genere esos tipos por nosotros basados en las consultas reales que realizamos contra nuestra API de GraphQL. Pero por ahora, sigue estos pasos. Esta sección es un poco más corta, así que te doy 10 minutos. Volveré a las 7.20 CET o 8.20 CET, creo. Me estoy confundiendo con las zonas horarias pero volveré en 10 minutos. Si tienes alguna pregunta mientras sigues estos pasos, no dudes en preguntar en Discord. Me encantaría responder a cualquier pregunta. Nos vemos en un minuto. Muy bien, todos, ya estoy de vuelta. Espero que todas las preguntas hayan sido respondidas hasta ahora. Corinne, veo que tenías problemas con los diferentes puertos. Como mencioné en el mensaje, te recomendaría cerrar los servidores y luego iniciar el servidor backend primero, que debería haberse iniciado en localhost:4000. Y luego el cliente debería estar en localhost:3000 cuando lo iniciaste. Cuando abras el cliente con el fragmento de código que te di, el cliente se conectará a localhost:4000 y a la URL /graphql. Si tienes más problemas, avísame. De lo contrario, puedes comenzar en la rama de la parte cinco, que es donde comenzaremos esta última sección. Así que voy a ir allí, bajar aquí, y esta se llama cerrando la brecha. Y eso se debe a que, como mencioné al final de la sección anterior, todavía tenemos esta brecha en los tipos donde nuestro backend tiene su conjunto de tipos, pero luego nuestro frontend tiene un conjunto de tipos definidos manualmente que deben coincidir con lo que tenemos en el backend. Pero si el backend cambia en algún momento, o si alguna de nuestras consultas cambia, realmente no sabremos qué sucedió. Y puedes verlo como se mostró al final de la cuarta sección, donde eliminaste el campo created app, y luego no recibiste ninguna queja de TypeScript. Según TypeScript, nunca tuviste un campo created app. Entonces, sí, simplemente no sabía qué estaba pasando, y luego tu interfaz de usuario mostró el mensaje de no es un número, así es como terminaste con Batman, mensaje de nananana. Así que en esta sección, configuraremos una herramienta llamada GraphQL Codegen. Y lo que hará es analizar las consultas que realizamos contra nuestra API de GraphQL, y generará tipos para nuestro cliente basados en esas consultas. Esto nos permitirá tener estos tipos generados automáticamente, y se basarán exactamente en lo que estás consultando. Para hacer eso, comencemos con la primera tarea aquí. Primero, debemos instalar todas esas bibliotecas. Y para hacer eso, voy a copiar y pegar esto. Entonces, si vas a tu proyecto de cliente, voy a copiar y pegar este script de instalación. Esta instalación aquí, si no quieres escribir todo esto, está en el menú desplegable de la primera tarea. Siéntete libre de copiar y pegar ese ya que solo es una instalación, y es mucho texto para escribir. Pero lo que estamos haciendo es instalar la herramienta de línea de comandos de GraphQL code gen. Y estos son algunos complementos que necesitaremos para generar nuestros tipos generados para TypeScript y los objetos de consulta para nosotros. Así que voy a instalar esos aquí, y eso debería tomar solo un segundo. Veamos cómo va eso. Bien. Genial, eso está instalado. Y eso es todo lo que necesitábamos hacer para esa primera tarea. Y la siguiente es configurar GraphQL code gen para que genere esos tipos por nosotros. Y para hacer eso, lo que tienes que hacer es configurar un archivo donde proporciones tu configuración, y se llama codegen.yml. Así que vamos a ir a nuestro código aquí. Fuera de la carpeta source, esto estará en la raíz misma de tu directorio de cliente. Vas a crear un nuevo archivo llamado codegen.yml. Este es un archivo de configuración donde puedes proporcionar diferentes cosas como dónde se encuentra tu esquema de GraphQL, qué archivos quieres buscar para buscar tus consultas de GraphQL. para que puedas generar tus tipos, y luego los activos que debe generar. Entonces vamos a generar tipos. Vamos a generar objetos de consulta que vamos a usar con Oracle. Vamos a generar todas esas cosas. Así que vamos a definir eso aquí. Lo primero que vamos a hacer es definir un esquema. Esta será la ubicación URL de nuestro esquema de GraphQL. Para ejecutar CodeGen, tu servidor de GraphQL debe estar en funcionamiento, y el nuestro está en localhost:4000/GraphQL. Ahí es donde se encuentra nuestro esquema de GraphQL, siempre que tu servidor esté en funcionamiento. Y ahora debemos decirle dónde buscar en nuestro código frontend estas consultas de GraphQL. Y le diremos que busque cualquier archivo con extensión .ts en nuestra carpeta GraphQL, porque aquí es donde hemos puesto todas nuestras consultas. Entonces solo encontrará esta consulta por ahora y generará tipos que permitirán a nuestra aplicación saber cómo ejecutar esta consulta de manera segura en términos de tipos y cómo debería verse la respuesta en función de lo que hemos escrito aquí. Para hacer eso, vamos a agregar una clave documents aquí. Y esto será una cadena y le diremos que busque en el directorio source/GraphQL, y luego le diremos que busque cualquier archivo con la extensión .ts. Y luego, después de eso, ahora podemos definir qué generará esta biblioteca en realidad para nosotros. Así que vamos a hacer Generates, y luego pasaremos a la siguiente línea. Y diremos que queremos generar source/GraphQL/generated.ts. Entonces queremos generar todos los activos de esta herramienta de línea de comandos en un archivo llamado generated.ts dentro de nuestra carpeta GraphQL. Aquí es donde terminarán todos nuestros tipos y todos nuestros objetos de consulta. Y luego, después de eso, necesitamos definir qué complementos queremos aplicar a esta salida generada. Y vamos a hacer todos los complementos que hemos instalado. Y simplemente voy a pegarlos aquí porque es un poco más fácil. Ups.

Terminemos con esto. Veamos. Genial. Le estamos diciendo que estamos usando el complemento TypeScript y el complemento de operaciones TypeScript, que nos ayuda a generar los objetos de consulta y el nodo de tipo de documento, que es cómo vamos a proporcionar realmente nuestra consulta al gancho UseQuery que hemos utilizado. Con todo en su lugar, deberíamos estar listos para pasar a la siguiente parte, que es agregar un script donde podemos ejecutar este comando.

Entonces, si vamos a package.json, queremos definir una forma de ejecutar este comando. Y para hacer eso, vamos a agregar un nuevo script aquí. Simplemente lo llamaremos CodeGen. Y todo lo que hará es ejecutar el comando GraphQL CodeGen, que tiene un guión entre medio. Entonces, GraphQL CodeGen. Y con eso, ahora podemos ejecutar este comando y debería generar todos nuestros activos por nosotros. Siempre y cuando nuestro servidor esté en funcionamiento. Así que asegurémonos de que lo esté. Parece que todavía está en funcionamiento. Ahora puedo ejecutar npm run CodeGen. Y esto es lo que hizo. Analizó nuestro archivo de configuración, y luego fue muy rápido, así que no se podía ver realmente, pero en realidad se conectó a nuestra API de GraphQL. Y dijo, oye, ¿esta consulta parece una consulta válida según cómo se ve tu esquema? Recibió una respuesta que dijo, sí. Así que ahora tenemos esa seguridad donde sabemos que nuestra consulta realmente funcionará. Y finalmente, utilizó esta consulta para generar un conjunto de tipos y objetos que definen esa consulta y sus respuestas. Así que ahora tenemos todo eso disponible. Todos los tipos, todos los objetos de consulta están disponibles para nosotros. Ahora podemos comenzar a reemplazar nuestros tipos y consultas escritos manualmente con los objetos generados. Entonces, si volvemos al código, vamos a ir a app.tsx. Aquí es donde hemos realizado todas nuestras consultas, y lo que podemos hacer es deshacernos de todas nuestras consultas genéricas, por lo que ahora podemos deshacernos de todas nuestras consultas genéricas y realmente podemos deshacernos de esta cadena de consulta de usuarios porque ya no la necesitaremos. También podemos deshacernos de este tipo de usuario, o en realidad, lo siento, no, todavía necesitamos el tipo de usuario, creo. No, no lo necesitamos, podemos deshacernos de eso. Nos desharemos de eso. Y luego podemos deshacernos de este genérico también porque la respuesta se conocerá automáticamente. Lo que debemos hacer, sin embargo, es importar el objeto de consulta que se generó para nosotros y pasarlo aquí en lugar de esta cadena de consulta que hemos eliminado. Y el objeto de consulta es este documento de obtener usuarios, es una versión JSON de lo que sería una cadena de consulta normal de GraphQL. Así que voy a copiar esto. Y si vuelvo a app.tsx, documento de usuarios de GraphQL generado. Entonces estamos importando ese documento y estamos obteniendo los resultados de la misma manera que antes. Pero la diferencia aquí es que no tenemos que escribir manualmente el tipo de respuesta para esta consulta. Si miras los resultados, deberías ver que el data es del tipo de la consulta de obtener usuarios. Y veamos. Ahora me preguntaba por qué hay un error aquí, pero en realidad esto es exactamente lo que esperábamos. Entonces, ahora estos resultados están automáticamente tipados porque estamos usando este documento de obtener usuarios, use query ahora sabe cómo debería ser nuestra respuesta tipada y exactamente qué tipo es según esta consulta. Entonces, lo que estamos viendo es que dice, oye, falta la propiedad created at. Si sigues la última sección, eliminaste el campo created at al final y TypeScript nunca se quejó, pero rompió tu interfaz de usuario. Ahora TypeScript se quejará y dirá, oye, algo está mal aquí. Ni siquiera estás consultando created at, estás tratando de usarlo en tu aplicación. Entonces, lo que podemos hacer ahora es si agregamos created at nuevamente y ejecutamos npm run CodeGen, ahora el problema desaparece. Así que sabe, oye, ahora estás consultando ese campo, los datos realmente estarán disponibles. Así que eso es súper genial. Lo voy a eliminar por ahora porque así lo he configurado en el taller. Así que simplemente ejecutaré CodeGen nuevamente. Y lo que vamos a hacer en realidad es ir a nuestros componentes al mensaje de usuario, al archivo message.tsx aquí. Y vamos a eliminar esto. Lo hace lucir un poco más limpio. Realmente no necesitamos las fechas allí. Simplemente lo voy a eliminar. Pero eso es súper genial, sin embargo, cómo obtienes esa buena seguridad de tipo entre el frontend y el backend. Y la forma en que está configurado ahora mismo, ni siquiera te permitirá escribir una consulta incorrecta. Entonces obtienes esa seguridad, no solo con los tipos, sino también al escribir tus consultas, porque Codegen se quejará si escribes una consulta que no podría ser aceptada por la API de GraphQL. Entonces lo he eliminado y todavía estamos obteniendo este error porque lo volví a revertir para no tener ese tipo creado en. Y eso es porque si vamos al componente de visualización de usuario, esto está utilizando el tipo escrito manualmente. Esto está utilizando el tipo de usuario de nuestro archivo de tipos, que no tiene esos tipos generados automáticamente para nosotros. Entonces necesitamos solucionar eso. Voy a deshacerme de esto, deshacerme de esto. Y en su lugar, vamos a importar el tipo llamado consulta de obtener usuario de nuestro archivo generado. Entonces estos son los tipos que se generaron para nosotros en función de nuestra consulta. Y puedes ver el tipo allí. Entonces lo que vamos a hacer allí es que tenemos un par de matrices diferentes. Tenemos nuestra matriz de usuarios y la matriz de notas como cabría esperar. Y lo que queremos hacer es guardar el tipo de nota. O en realidad, supongo que primero haremos el tipo de usuario. El tipo de usuario será del tipo obtener consulta de usuario y usuarios.

Y solo queremos guardar que un usuario va a ser del tipo usuarios y solo el primer índice de él. Así que realmente no importa qué índice uses aquí, pero diremos que el primer índice de él es lo que queremos que sea nuestro tipo de usuario. Como puedes ver en este tipo ahora, tiene el ID, el nombre y las notas porque eso es lo que hemos consultado. Luego, vamos a hacer algo similar para obtener el tipo de nota. Vamos a entrar en el primer usuario del array. Y luego vamos a entrar en su propiedad de notas. Y solo tomaremos el tipo de la primera nota en ese array. De esa manera podemos obtener ese tipo de nota. Y en este punto, esto no debería estar dando más errores porque ahora sabe que un usuario debería ser del tipo generado en función de nuestra API de GraphQL. Y con eso, ahora tenemos nuestra aplicación completamente segura en cuanto a tipos. El backend desde la base de datos hasta esta parte del frontend e incluso la escritura de tus cadenas de consulta es completamente segura en cuanto a tipos. Obtendrás algún tipo de error si cometes algún error con los tipos o con la escritura de tu consulta. Y eso hace que sea muy fácil de usar. La experiencia del desarrollador aquí es increíble. Las herramientas como Prisma, GraphQL CodeGen y Pathos trabajando juntas te dan un superpoder como desarrollador que te hace sentir muy cómodo escribiendo código sin tener que preocuparte y estresarte por romper las cosas. Así que con esta sección, creo que te daré otros, digamos 15 minutos para trabajar en esto y luego volveré a ver cómo les fue a todos y luego podemos terminar desde allí. Así que volveré en 15 minutos y avísame si tienes alguna pregunta en el camino. Muy bien, a todos, ya casi ha llegado el momento. Así que creo que vamos a terminar aquí. Solo quiero agradecer a todos por acompañarme en este recorrido por ser tan activos en el chat. Realmente aprecio eso y todos los pequeños contratiempos con los que nos encontramos que inevitablemente ocurren en un taller, ustedes los superaron como campeones e incluso me ayudaron a solucionar algunos problemas de versiones. Así que realmente aprecio eso y espero que todos hayan aprendido mucho de esto. La suite de herramientas que usamos es simplemente genial para trabajar. Siempre me pongo muy contento trabajando con ella porque la experiencia del desarrollador es tan agradable y fluida, permite una codificación con muy poco estrés y realmente me gusta eso. Quiero recordarte que como dije al principio, todos mis datos de contacto están aquí. Así que si alguna vez quieres comunicarte conmigo sobre cualquier cosa, tal vez sobre este taller o sobre Prisma en general, soy un defensor del desarrollador allí, no dudes en enviarme un mensaje y con gusto te responderé e intentaré responder cualquier pregunta o consulta que puedas tener. Además, como dije al principio, si quieres impartir este taller tú mismo, te he dado el documento. Así que tienes libertad para usarlo como quieras. Entonces, si tienes un meetup local, si te reúnes con amigos que tal vez sean un grupo de la universidad y quieren aprender sobre todas estas cosas, por favor, da este taller, es muy divertido. Disfruto haciéndolo y sé que tú también lo harás. Pero nuevamente, muchas gracias por venir y espero que todos tengan una buena tarde o noche, dependiendo de dónde estén. Nos vemos a todos.