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

Rate this content
Bookmark

En este masterclass, obtendrás una visión de primera mano de qué es la seguridad de tipo de extremo a extremo y por qué es importante. Para lograr esto, construirás una API de GraphQL utilizando herramientas modernas y relevantes que serán consumidas por un cliente de React.


Qué se incluye:

1. Bienvenida y presentación

2. Configuración de Prisma (lección 1)

3. Configuración de un servidor de GraphQL (lección 2)

4. Construcción del esquema de GraphQL (lección 3)

5. GraphQL en el cliente (lección 4)

6. Cerrar la brecha (lección 5)

7. Conclusión


Prerrequisitos

- Node.js instalado en tu máquina (12.2.X / 14.X)

- Se recomienda (pero no es obligatorio) usar VS Code para las tareas prácticas

- Un IDE instalado (se recomienda VSCode)

- (Bueno tener) *Un conocimiento básico de Node.js, React y TypeScript

95 min
28 Nov, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Este masterclass se centra en la construcción de una aplicación full-stack con seguridad de tipo de extremo a extremo utilizando React, GraphQL y Prisma. Cubre temas como la configuración de Prisma, el modelado del esquema de la base de datos y la aplicación de migraciones de base de datos. El masterclass también aborda la configuración del servidor de GraphQL, la consulta a la API y la conexión entre el frontend y el backend con generación de código. El objetivo es garantizar la seguridad de tipo y proporcionar una experiencia de desarrollo más fluida al realizar cambios en la aplicación.

Available in English

1. Introducción al Masterclass

Short description:

Bienvenidos al masterclass sobre seguridad de tipo de extremo a extremo con React, GraphQL y Prisma. Configuraremos una aplicación de pila completa y utilizaremos un documento de Notion como nuestra guía. Comenzaremos con la configuración de la base de datos y el modelado de datos utilizando Prisma. Te guiaré a través del código y explicaré los detalles. Luego, tendrás tiempo para trabajar por tu cuenta y hacer preguntas.

♪♪ 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.

2. Resumen del Masterclass

Short description:

Soy Sabin Adams, un defensor del desarrollador en Prisma. Construiremos una aplicación de pila completa implementando seguridad de tipo de extremo a extremo. Comenzaremos modelando nuestra base de datos y configurando Prisma. Luego, construiremos un servidor GraphQL y lo conectaremos con una aplicación de frontend. La duración del masterclass puede variar, pero aproximadamente es de dos horas y 40 minutos. Asegúrate de tener el documento de Notion y únete al servidor de Discord. ¡Empecemos!

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.

3. Configuración de Prisma y Modelado del Esquema de la Base de Datos

Short description:

Comenzaremos con la primera lección, que proporciona una descripción general de los objetivos y los pasos de configuración. En este paso, configuraremos Prisma, clonaremos el repositorio e inicializaremos Prisma. Modelaremos el esquema de nuestra base de datos y crearemos un modelo de usuario con un campo de ID.

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.

4. Configuración de la Tabla de Usuarios

Short description:

Estamos configurando la tabla de usuarios en nuestro esquema de base de datos. El campo ID es la clave primaria con un valor entero que se incrementa automáticamente. También tenemos un campo de nombre de tipo cadena. Eso es todo lo que necesitamos para el modelo de usuario.

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.

5. Modelado de Notas y Migración de Base de Datos

Short description:

Hemos modelado la nota y configurado una relación para vincular las notas a los usuarios. Cada nota tiene un mensaje, una fecha de creación, una fecha de actualización y un ID de usuario. Hemos creado los campos necesarios y utilizado palabras clave especiales para los valores predeterminados y las actualizaciones automáticas. También hemos establecido una relación de uno a muchos entre usuarios y notas. Nuestro esquema de base de datos está completo. A continuación, debemos aplicar el esquema utilizando Prisma migrate, que proporciona herramientas de migración para manejar las migraciones de la base de datos. Después de ejecutar el comando de migración, tendremos un archivo de base de datos SQLite y una carpeta de migraciones con la migración aplicada. Puedes ver el SQL generado en el archivo de migración.

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.

6. Configuración de Prisma y Carga de Datos

Short description:

Ahora tenemos una base de datos funcional y podemos pasar al siguiente paso, que es agregar datos. Vamos a hacer trampa creando un archivo seed.ts en la carpeta de Prisma, que se ejecutará cuando ejecutemos el comando de carga de datos. Importa Prisma Client, borra la base de datos y agrega nuevos datos. Para ejecutar el script de carga de datos, agregamos una clave prisma al package.json y ejecutamos npx prisma db seed. Ahora hemos modelado los datos, creado la base de datos, aplicado el esquema y cargado la base de datos. En la siguiente sección, configuraremos el servidor GraphQL y tendremos soluciones e instrucciones disponibles.

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.

7. Configuración de Pothos y Constructor de Esquemas

Short description:

Agregaremos un nuevo generador llamado Pothos a nuestro esquema de Prisma. Este generador, proporcionado por el complemento Prisma Pothos types, generará tipos para nosotros. Después de ejecutar 'npx prisma generate', tendremos el cliente Prisma y la integración de Pothos generados. A continuación, configuraremos un constructor de esquemas instanciándolo, configurándolo y exportándolo. El constructor de esquemas nos permite construir nuestro esquema de GraphQL utilizando varias funciones. También proporcionaremos tipos a Pothos para garantizar la seguridad de tipos en nuestros resolvers. Para lograr esto, utilizaremos los tipos de Prisma y el complemento de Prisma. También necesitaremos proporcionar el cliente Prisma. Además, instalaremos la biblioteca GraphQL Scalars para manejar el tipo de fecha en nuestra API de GraphQL. Aplicaremos la biblioteca al constructor de esquemas y proporcionaremos el resolver de fecha. Estos pasos garantizan la seguridad de tipos de extremo a extremo en nuestra base de datos y capa de API.

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.

8. Configuración de tipos escalares para fechas

Short description:

Hemos configurado el tipo escalar para fechas en nuestros resolvers. Especificamos que la entrada y salida deben ser del tipo JavaScript Date. A continuación, agregamos una función para resolver un valor a un JavaScript Date usando el método AddScalerType en nuestra instancia de Builder. Con estos pasos, ahora podemos manejar fechas dentro de nuestra API de GraphQL.

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.

9. Creando el Servidor GraphQL

Short description:

Para ejecutar el servidor, necesitamos agregar una consulta raíz utilizando la instancia del Constructor de Esquemas. Estamos configurando el tipo de consulta raíz y construyendo una consulta inicial que devuelve la cadena 'mundo'. A continuación, debemos crear un módulo llamado schema.ts para generar nuestro esquema utilizando el método 'toSchema'. Con el esquema generado, ahora podemos crear el servidor GraphQL utilizando GraphQL Yoga. Importamos 'createYoga' de GraphQL Yoga node y 'createServer' de la biblioteca HTTP de node. Finalmente, creamos el servidor yoga pasando nuestro esquema.

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.

10. Configuración del Servidor Yoga y Ejecución

Short description:

Hemos creado nuestra instancia de yoga, la hemos ejecutado en un servidor HTTP y hemos especificado el puerto en el que debe escuchar. Ahora, solo necesitamos ejecutarlo usando 'npm run dev'. Al abrir localhost:4000, se mostrará el playground con nuestra consulta 'Hola' que devuelve la cadena 'mundo'.

Genial. Así que tenemos la instancia de yoga allí. Y ahora necesitamos crear un servidor que use esa instancia de yoga. De esa manera, podemos servir esta API de GraphQL. Así que crearemos otra constante llamada servidor. Y va a ser igual a crear servidor. Y le pasaremos nuestro servidor de yoga. Así que eso es la mayor parte de la configuración. Ahora, necesitamos permitir que el servidor escuche en un puerto. Así que haremos servidor.escuchar. Y lo ejecutaremos en el puerto 4000 por ahora. Y voy a copiar un console log que tengo preparado solo para asegurarnos de que sepamos cuándo este servidor está listo para nosotros. Voy a copiar esto. Ahí vamos. Genial. Así que ahora, cuando nuestro servidor se inicie, obtendremos este bonito log. Y creo que eso es todo lo que necesitábamos hacer para este paso. Hemos creado nuestra instancia de yoga. La hemos ejecutado en un servidor HTTP. Y hemos especificado cómo queremos que escuche en un puerto. Así que en este punto, todo lo que necesitamos hacer es ejecutarlo. Así que copiaré eso. npm run dev es lo que vamos a hacer para ejecutar esto. Y eso ejecutará nuestro servidor. Y lo ejecutará en localhost 4000. Así que si abres localhost 4000, obtendrás el playground. Y lo que puedes ver aquí es si vas a la documentación, tendrás tu tipo de consulta. Y veremos nuestra consulta de Hola que construimos aquí. Y cuando realmente ejecutamos esta consulta, obtienes la cadena mundo. Así que esa es la consulta raíz que configuramos. Y creo que en este punto, si vuelvo al documento de Notion, creo que esto es todo lo que teníamos para el segundo paso. Una vez más, te daré 30 minutos. Son... Déjame ver la hora. Son las 10 en mi zona horaria ahora mismo. Así que alrededor de las 10.30, volveré y veré cuál es tu progreso.

11. Construcción del Esquema GraphQL y Exposición de Datos

Short description:

En esta parte, construimos nuestro esquema GraphQL para exponer datos de la base de datos. Configuramos el generador de esquemas y creamos archivos de modelo para cada objeto. Utilizamos el complemento Prisma para garantizar la seguridad de tipos y acceder a los tipos generados a partir de nuestro esquema Prisma. Definimos los campos que queremos exponer a través de nuestra API de GraphQL, comenzando con el campo ID. Este es el primer paso en la construcción de nuestro esquema GraphQL.

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.

12. Exponiendo Campos y Agregando Prisma al Contexto

Short description:

Exponemos los campos de cadena, campo de mensaje, campo de creado en y campo de actualizado en en nuestro esquema Prisma. Configuramos un escalar personalizado para el campo de fecha. También construimos el objeto de usuario y exponemos los campos de ID y nombre. Además, exponemos la relación entre el usuario y las notas. Por último, agregamos la instancia de Prisma al contexto de GraphQL para resolver modelos y consultar la base de datos.

Vamos a hacer t.expose string. Y este, simplemente vamos a obtener el mensaje porque esto está en nuestro esquema Prisma en la nota. Este es el único campo de cadena real aquí. Por eso es el único que aparece en el autocompletado. Y eso también es gracias a la seguridad de tipos que hemos configurado. Así que ya estamos viendo por qué esta seguridad de tipos de extremo a extremo es súper útil para ti como desarrollador porque ahora sabes exactamente qué está disponible para ti y cómo usarlo correctamente. Pero el siguiente es nuestro campo de creado en. Queremos exponer eso. Y para hacer esto, será un poco diferente porque esta es la fecha para la que tuvimos que configurar un escalar personalizado. Así que vamos a usar una función llamada expose y necesitamos exponerlo como nuestro tipo personalizado. Así que vamos a hacer comillas aquí. Y una vez más, obtenemos nuestra lista de columnas disponibles debido a la seguridad de tipos de extremo a extremo. Y pasamos esto como un objeto de configuración donde vamos a especificar nuestro tipo. Y luego, porque proporcionamos ese tipo a los constructores de esquemas, la clave de escalar de tipo genérico, en realidad obtenemos este tipo de fecha aquí. Y a lo que me refiero es a esto que configuramos. Por eso obtenemos el autocompletado allí. Así que lo siguiente que voy a hacer es simplemente copiar esto porque también queremos exponer el campo de actualizado en. Y va a ser exactamente lo mismo. Este es nuestro modelo de nota. Esto es todo lo que queremos exponer en nuestra aplicación de frontend. Esto es lo que nuestra API va a tener disponible para la nota: el ID, el mensaje y sus dos campos de fecha. Con eso hecho, podemos volver a nuestro documento. Y he publicado un enlace a alguna documentación aquí sobre el complemento Prisma de Pathos. Si estás interesado en algunos de los detalles más profundos de lo que ofrece, el enlace está ahí. Pero lo siguiente que vamos a hacer es básicamente lo mismo, excepto que vamos a construir nuestro tipo de usuario para que podamos tener un usuario y exponerlo a través de nuestra API y exponer la relación con las notas. Así que hagámoslo. Vamos a hacer básicamente lo que hicimos antes. Vamos a ir a nuestro directorio de modelos. Vamos a crear un archivo user.ts y vamos a importar el generador. Y luego, como antes, vamos a hacer builder.prismaobject. Este va a ser el objeto de usuario. Y puedo abrir mis notas aquí. Se me cerró. Ahí vamos, genial. Luego vamos a construir este objeto de configuración. Como antes, necesitamos hacer el find unique. Y en realidad voy a copiar esto porque no me gusta escribirlo. Ahí vamos, genial. Copiado eso y configuraremos nuestros campos. Así que esto es igual que antes hasta ahora, excepto que estamos construyendo el objeto de usuario. La diferencia ahora son los campos que vamos a exponer. Así que vamos a hacer el ID de nuevo. Esto será solo el campo de ID. Y vamos a hacer el nombre que es una cadena. Este último es un poco diferente. Lo que estamos exponiendo aquí no es un campo real. Esto va a ser una relación. Será una forma para un usuario de tu API de GraphQL de obtener el usuario y obtener algunas notas asociadas. Así que lo que tenemos que hacer aquí es crear un campo llamado Notas. Y vamos a hacer T dot relation. Y debido a la seguridad de tipos de extremo a extremo que hemos configurado, nuevamente, eso será un tema común. Me escucharás mencionarlo mucho porque eso es realmente la parte genial de todo esto que estamos configurando. Debido a esa seguridad de tipos, cuando abrimos una cadena aquí, podemos ver notas. Y eso es porque Pathos sabe que la única relación que tenemos en nuestro modelo de usuario en nuestro esquema Prisma es una relación de notas. Así que sabe que probablemente queremos exponer una relación de notas aquí. Ahí vamos. Ese es un poco más fácil. Ese es nuestro modelo de usuario y podemos pasar a la siguiente parte. Y eso será agregar Prisma al contexto de GraphQL. Ahora que tenemos nuestro modelo configurado, vamos a necesitar una forma de resolver estos modelos una vez que se consulte la API de GraphQL. Y para hacer eso, vamos a necesitar poder consultar nuestra base de datos utilizando el cliente Prisma. Así que vamos a agregar nuestra instancia de Prisma a nuestro contexto de GraphQL para que podamos usarla en nuestros resolutores. Eso va a tener un poco más de sentido a medida que avanzamos en esto ahora mismo. Así que volvamos a nuestro código y voy a guardar aquí y cerrar todo para que esté limpio. Y luego abriré index.ts una vez más. Así que en este archivo, vamos a necesitar importar nuestra instancia de Prisma, que ya creamos. Esto va a ser import prisma from './db'. Si recuerdas en una de las lecciones anteriores, creamos el archivo db.ts que exporta la instancia de Prisma. Así que lo tenemos. Y ahora, dentro de nuestra instancia de yoga, aquí podemos configurar un contexto constante, o lo siento, un contexto.

13. Agregando Consulta de Usuario y Registrando Tipos

Short description:

Agregamos la instancia del cliente Prisma a nuestro contexto para que esté disponible en nuestros resolutores. Luego construimos una consulta GraphQL llamada usuarios que recupera datos basados en la solicitud del usuario. La integración de Prisma en Pathos genera automáticamente el objeto de consulta de Prisma para nosotros. Registramos nuestras consultas y tipos en nuestro esquema importando los archivos necesarios. Esto asegura que el generador aplique los modelos a su instancia. Finalmente, ejecutamos el servidor para probar su funcionalidad.

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í.

14. Consultando la API de GraphQL

Short description:

Hemos consultado con éxito nuestra base de datos y obtenido los datos iniciales. Nuestros resolutores están configurados correctamente, asegurando la seguridad de tipos y una experiencia de desarrollo más fluida. Esto concluye la sección del servidor y ahora pasaremos al frontend donde consultaremos nuestra API de GraphQL. Siéntete libre de continuar con el paso tres y completar tu esquema de GraphQL. Estoy disponible en Discord para cualquier pregunta.

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.

15. Configuración de urql y Escritura de Consulta GraphQL

Short description:

En esta sección, pasamos del lado del servidor al proyecto de frontend. Instalamos urql y GraphQL para consultar nuestra API. Instanciamos un cliente de urql y lo proporcionamos a nuestra aplicación utilizando el componente proveedor. Escribimos una consulta GraphQL para seleccionar el ID, el mensaje y los campos de Crear App de cada nota, así como el nombre del usuario y todas sus notas.

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.

16. Ejecución y Observación de la Consulta

Short description:

Escribimos una consulta GraphQL para seleccionar los ID de usuario, los nombres y las notas asociadas. Importamos los hooks y la consulta necesarios. El hook useQuery devuelve una matriz con los resultados de la consulta. Extraemos los datos de los resultados y definimos el tipo esperado para la variable data.users. Consultamos los datos y reemplazamos los datos estáticos con la respuesta real. Ejecutamos la aplicación y vemos los datos consultados mostrados. Eliminamos un campo de la consulta GraphQL y observamos las consecuencias. TypeScript no muestra errores al acceder al campo eliminado. En la siguiente sección, abordaremos este problema con una seguridad de tipo de extremo a extremo más completa.

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.

17. Bridging the Gap with Code Generation

Short description:

En esta sección, vamos a cerrar la brecha entre los tipos que vimos y las consultas en nuestra API de GraphQL. Utilizaremos la generación de código para validar nuestras consultas de GraphQL y asegurarnos de que estamos consultando campos disponibles. Instalaremos los paquetes de GraphQL CodeGen, configuraremos el archivo code-gen.yml y generaremos tipos basados en nuestro esquema de GraphQL. Esto nos permitirá representar los tipos de usuario y nota en nuestro proyecto de frontend utilizando los tipos generados. También configuraremos un script de CodeGen en nuestro package.json para ejecutar GraphQL CodeGen. Para obtener instrucciones detalladas, consulta la documentación.

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.

18. Configuración de la Generación de Código

Short description:

Para configurar la generación de código, agrega un nuevo script llamado Codegen a tu archivo package.json. Este script ejecutará el comando GraphQL-CodeGen, que validará tu API de GraphQL y generará los tipos necesarios. Asegúrate de que tu API esté en funcionamiento antes de ejecutar el script Codegen.

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.

19. Ajustando Tipos y Ejecutando el Proyecto

Short description:

Hemos analizado el archivo de configuración y generado nuestras salidas. El archivo generated.ts contiene tipos de TypeScript que representan nuestro esquema de GraphQL y tipos específicos basados en nuestra consulta individual. Reemplazamos nuestras consultas con los objetos generados, actualizamos el hook de consulta utilizado y eliminamos el tipo escrito manualmente. TypeScript ahora nos advierte cuando nuestra consulta cambia y necesitamos ajustar nuestros tipos. Ajustamos nuestros tipos en función de la respuesta de la consulta y definimos el modelo en el archivo types.ts. Importamos el tipo de consulta de usuarios de Git desde el archivo generado y nos deshicimos de las definiciones de tipo escritas manualmente. Ajustamos los tipos de nota y usuario en función de la respuesta de la consulta. Estos tipos cambian dinámicamente a medida que nuestras consultas y API de GraphQL cambian. Ejecutamos el proyecto y vimos el error de 'not a number' porque todavía estamos representando el componente eliminado.

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.

20. Recap and Conclusion

Short description:

En esta parte, completamos la configuración de la aplicación de pila completa. Construimos la base de datos, realizamos migraciones y agregamos datos. Luego, creamos una API de GraphQL y aseguramos la seguridad de tipos entre la API y la base de datos. Construimos el esquema de GraphQL y consultamos la API para reflejar cambios en las consultas y la API. Esta configuración proporciona una buena experiencia para el desarrollador, reduciendo el estrés al realizar cambios. Gracias a todos por unirse, y si tienen alguna pregunta, pueden contactarme en Twitter o por correo electrónico. Siéntanse libres de organizar esta masterclass ustedes mismos utilizando el enlace del documento proporcionado en Notion. Dar masterclasses es mi parte favorita de mi trabajo, y he aprendido mucho de los participantes. Les animo a dar masterclasses y considerar el uso de esta.

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.

Watch more workshops on topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Advanced Conference 2021React Advanced Conference 2021
27 min
(Easier) Interactive Data Visualization in React
Top Content
If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick & easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data & use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time & effort!