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 lo que 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.


Prerrequisitos:

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

- Se recomienda (pero no es obligatorio) utilizar 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

This workshop has been presented at React Advanced 2022, check out the latest edition of this React Conference.

FAQ

Para comenzar a usar Prisma, primero necesitas instalarlo como una dependencia de desarrollo y luego inicializarlo en tu proyecto. Esto incluirá configurar tu esquema de Prisma y conectarlo con tu base de datos.

GraphQL Yoga es un servidor GraphQL que puedes configurar fácilmente. Para configurarlo, necesitas instalar GraphQL Yoga, crear un servidor usando la función 'create server', y luego pasarle tu esquema GraphQL generado.

Para asegurar que los tipos en el frontend coincidan con los del backend, puedes usar GraphQL Codegen. Esta herramienta genera tipos automáticamente basados en tus consultas GraphQL, asegurando que cualquier cambio en el esquema del backend se refleje en el frontend.

Puedes utilizar la herramienta GraphQL Codegen, que te permite generar tipos y objetos de consulta de manera automática basados en tus esquemas y consultas GraphQL. Esto mejora la seguridad de tipos al mantener consistencia entre el backend y el frontend.

Prisma se utiliza para definir el modelo de datos y gestionar las interacciones con la base de datos, ofreciendo un cliente con seguridad de tipos. GraphQL se utiliza para construir una API que permite realizar consultas y mutaciones a estos datos de manera eficiente y segura.

Un escalador en GraphQL es un tipo de dato primitivo que resuelve a un valor concreto. Los escaladores comunes incluyen tipos como Int, Float, String y Boolean. Para manejar fechas, puedes utilizar paquetes como GraphQL Scalars para agregar tipos personalizados como Date.

Sabin Adams
Sabin Adams
95 min
12 Oct, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Este masterclass trata sobre la construcción de una aplicación full-stack con seguridad de tipo de extremo a extremo. Cubre la configuración de una base de datos SQLite, la creación de un servidor GraphQL y la conexión del cliente. El enfoque se centra en el uso de Prisma, Pathos y GraphQL Codegen para garantizar la seguridad de tipo y mejorar la experiencia del desarrollador. El masterclass proporciona instrucciones paso a paso y recursos para que los participantes sigan y hagan preguntas. Se enfatiza la importancia de la seguridad de tipo tanto en el proceso de desarrollo backend como frontend.

1. Introducción al Masterclass de Aplicación Full-Stack

Short description:

Gracias por unirte a mí en este masterclass de aplicación full-stack. Construiremos una aplicación con seguridad de tipo de principio a fin. Te proporcionaré toda la información y recursos que necesitas. Asegúrate de tener Node.js instalado y considera usar VS Code como tu IDE. Se recomienda tener conocimientos básicos de Node.js, React y TypeScript. La agenda de hoy incluye la creación de una base de datos SQLite, la configuración de un servidor GraphQL y la conexión del cliente. Habrá un repositorio disponible. ¡Empecemos!

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

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

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

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

2. Introducción al Masterclass y Primera Lección

Short description:

Vamos a reunir a todos en el chat de Discord. Configuraremos Prisma y el servidor GraphQL. Construiremos el cliente React y cerraremos la brecha de tipos entre el backend y el frontend. Te guiaré a través de las diferentes lecciones y proporcionaré consejos y trucos. Después de cada lección, tendrás tiempo para trabajar por tu cuenta y hacer preguntas a través del chat. Soy Steven Adams, un Defensor del Desarrollador en Prisma. No dudes en contactarme en cualquiera de los formatos proporcionados. También puedes organizar este masterclass tú mismo utilizando el enlace proporcionado. Comencemos con la primera lección, donde configuraremos la base de datos utilizando Prisma para gestionar el esquema e interactuar con ella de manera segura en cuanto a los tipos.

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

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

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

Watch more workshops on topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Aventuras de Renderizado Concurrente en React 18
React Advanced 2021React Advanced 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?

¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.

Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Masterclass Web3 - Construyendo Tu Primer Dapp
React Advanced 2021React Advanced 2021
145 min
Masterclass Web3 - Construyendo Tu Primer Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js.
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
React Summit 2023React Summit 2023
151 min
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
Top Content
Featured Workshop
Josh Justice
Josh Justice
La Biblioteca de Pruebas de React es un gran marco para las pruebas de componentes de React porque responde muchas preguntas por ti, por lo que no necesitas preocuparte por esas preguntas. Pero eso no significa que las pruebas sean fáciles. Todavía hay muchas preguntas que tienes que resolver por ti mismo: ¿Cuántas pruebas de componentes debes escribir vs pruebas de extremo a extremo o pruebas de unidad de nivel inferior? ¿Cómo puedes probar una cierta línea de código que es difícil de probar? ¿Y qué se supone que debes hacer con esa persistente advertencia de act()?
En esta masterclass de tres horas, presentaremos la Biblioteca de Pruebas de React junto con un modelo mental de cómo pensar en el diseño de tus pruebas de componentes. Este modelo mental te ayudará a ver cómo probar cada bit de lógica, si debes o no simular dependencias, y ayudará a mejorar el diseño de tus componentes. Te irás con las herramientas, técnicas y principios que necesitas para implementar pruebas de componentes de bajo costo y alto valor.
Tabla de contenidos- Los diferentes tipos de pruebas de aplicaciones de React, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos DOM para verificar e interactuar con ellos- El valor de los mocks y por qué no deben evitarse- Los desafíos con la asincronía en las pruebas de RTL y cómo manejarlos
Requisitos previos- Familiaridad con la construcción de aplicaciones con React- Experiencia básica escribiendo pruebas automatizadas con Jest u otro marco de pruebas unitarias- No necesitas ninguna experiencia con la Biblioteca de Pruebas de React- Configuración de la máquina: 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

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Uso efectivo de useEffect
React Advanced 2022React Advanced 2022
30 min
Uso efectivo de useEffect
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
(Más fácil) Visualización interactiva de datos en React
React Advanced 2021React Advanced 2021
27 min
(Más fácil) Visualización interactiva de datos en React
Top Content
This Talk is about interactive data visualization in React using the Plot library. Plot is a high-level library that simplifies the process of visualizing data by providing key concepts and defaults for layout decisions. It can be integrated with React using hooks like useRef and useEffect. Plot allows for customization and supports features like sorting and adding additional marks. The Talk also discusses accessibility concerns, SSR support, and compares Plot to other libraries like D3 and Vega-Lite.