Desarrollo Fullstack con Type-Safety y GraphQL Hasura

Rate this content
Bookmark

En esta masterclass, aprenderemos cómo construir una cadena de tipo seguro desde la API hasta el cliente con herramientas generadas en TypeScript. Crear un entorno de desarrollo tipo seguro reduce la cantidad de errores que se envían a producción, pero también permite un desarrollo de características más rápido una vez que se establece la base.

Esta será una masterclass de ritmo rápido que cubrirá una pila de características con una opinión, pero al final, tendrás un marco de trabajo funcional para un desarrollo elegante y tipo seguro.

Tabla de contenidos

- Comenzaremos creando una API de GraphQL en Hasura Cloud y definiremos algunos controles de acceso y acciones básicas.
- Luego crearemos un marco de trabajo listo para TypeScript con NextJs.
- Con el marco de trabajo y la API en su lugar, generaremos un SDK utilizando GraphQL Zeus.
- Por último, generaremos algunos envoltorios de gestión de estado tipo seguro con easy-peasy para implementar un flujo básico de inicio de sesión y autenticación.

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

FAQ

Hazura es un proveedor de cloud que ofrece diversos servicios, incluyendo la creación de una capa de GraphQL y la generación de un SDK que proporciona seguridad de tipos para el desarrollo de aplicaciones front-end. Hazura facilita la integración con bases de datos como Postgres a través de Heroku y permite la configuración de proyectos en la nube.

Para comenzar a usar Hazura, puedes registrarte y crear una cuenta en su plataforma en línea. Después, necesitarás configurar un proyecto en la nube accediendo a la URL cloud.hazura.io/proyectos y seguir las instrucciones para conectar una base de datos de Postgres utilizando Heroku.

GraphQL es un lenguaje de consulta para APIs que permite a los desarrolladores solicitar y recibir exactamente lo que necesitan, nada más. Hazura utiliza GraphQL para generar una capa que facilita la interacción con los datos, optimizando las consultas y mejorando el rendimiento de las aplicaciones.

La seguridad de tipos en el contexto de Hazura y TypeScript significa que el sistema ayuda a verificar y asegurar que los datos utilizados en las aplicaciones sean del tipo correcto, lo que minimiza los errores de programación y mejora la calidad del código en producción.

Para integrar una base de datos Postgres con Hazura, puedes utilizar Heroku como plataforma de hosting. Hazura ofrece integración de primer nivel con Heroku, lo que facilita la conexión y configuración de la base de datos directamente desde el panel de control de Hazura.

El nivel gratuito de Hazura ofrece varias ventajas, como un paso de datos de un gigabyte y 60 solicitudes por minuto. Es ideal para proyectos a nivel de hobby y producción pequeña, y incluye características como almacenamiento en caché incorporado, lo que lo hace adecuado para muchas aplicaciones sin coste adicional.

Jesse Martin
Jesse Martin
203 min
19 Oct, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Esta masterclass explora la seguridad de tipo de back to front en la construcción de aplicaciones front-end utilizando TypeScript y Next.js. Cubre la configuración de un proyecto en la nube con Hazura, la creación de acciones de inicio de sesión y registro, el manejo de puntos finales de API con una aplicación Next.js, y la consulta y visualización de datos de usuario utilizando Apollo Client. La masterclass también incluye la configuración de la gestión de estado con easy peasy y la depuración de problemas de autenticación y gestión de estado. En general, proporciona ideas sobre cómo construir aplicaciones futuras, estables y seguras utilizando estas herramientas y tecnologías.

1. Introducción a la Seguridad de Tipos de Atrás hacia Adelante

Short description:

En este masterclass, exploraremos la seguridad de tipos de atrás hacia adelante. Generaremos una capa de GraphQL para la seguridad de tipos en la construcción de aplicaciones front-end utilizando TypeScript y Next.js. TypeScript ayuda a reducir los errores en el código de producción. Aprendamos cómo construir aplicaciones más futuras, estables y seguras utilizando estas herramientas y tecnologías.

Mi nombre es Jesse. Voy a liderar y trabajar contigo hoy en este masterclass. Y soy una persona de divulgación para desarrolladores de Hazura. Hazura es un proveedor de cloud y un proveedor de capa beta que hace todo tipo de cosas increíbles. Si no estás familiarizado con nosotros, definitivamente échale un vistazo. Hoy veremos algunas de las cosas que hace. Y este es el masterclass de seguridad de tipos de atrás hacia adelante. ¿Qué significa eso? Significa que comenzaremos con el concepto de generar una capa de GraphQL que será nuestro punto de partida para los tipos. Y utilizaremos eso para generar un SDK que esencialmente nos dará seguridad de tipos para construir aplicaciones front-end utilizando una aplicación de TypeScript para Next.js.

Ahora, aquí hay algunas piezas críticas que debes saber sobre ese proceso. Una es que no soy un gurú de TypeScript. Así que, estoy en el punto óptimo de lo que TypeScript realmente debería resolver. Y tal vez muchos de ustedes también lo estén. TypeScript en realidad nos ayuda a producir menos errores en nuestro código que enviamos a producción. Entonces, habrá casos en los que tal vez muchos de ustedes sepan la respuesta mejor si surge un error de TypeScript. Y en ese caso, me encantaría que me lo hagas saber. No soy orgulloso. No pretenderé ser la persona de TypeScript. Soy una persona de GraphQL. Soy una persona de modelado de datos. Entonces, estoy feliz de ayudar con preguntas sobre eso. Pero esto es básicamente todos nosotros aprendiendo cómo construir aplicaciones de una manera más futura, más estable, más segura utilizando algunas herramientas y tecnologías que realmente han proporcionado mucha estabilidad y sí, una huella de seguridad de tipos para la comunidad en su conjunto. Entonces, esa es básicamente la premisa.

2. Introducción y Pautas del Masterclass

Short description:

Vamos a empezar desde cero y construir esto juntos. Siéntete libre de encender tus cámaras, hacer preguntas y programar junto conmigo. Hagamos de esto una experiencia colaborativa.

Lo que tengo, si ves el repositorio de GitHub, vamos a empezar desde cero. Y a medida que avanzamos, estaré pegando código dentro de la ventana. Vamos a construir esto juntos. Y luego haré la mayor parte de ese código disponible a través del repositorio. Y lo que me pregunto, porque en este momento, nadie más está encendiendo sus cámaras. Entonces, puede que solo sea, ya sabes, un poco de verme programar hoy por lo que parece. ¡Oye, tengo a alguien! Lo que podemos hacer es empezar a desarrollar este repositorio a medida que avanzamos y luego podremos seguir avanzando. Así que realmente aprecio que la primera cámara esté encendida. Este es un masterclass informal. No es un aquí están mis diapositivas y por favor no me hagan preguntas. Se permite que todos enciendan sus cámaras. Puedes interrumpir, levantar la mano, hacer una pregunta. Tenemos salas de grupos disponibles. Si hay un momento en el que digamos, vamos a tomar cinco minutos y dividirnos en grupos más pequeños para entender lo que estamos haciendo. Pero hoy se trata de que todos puedan programar juntos. Entonces, ¿suena bien? ¿Hay alguna pregunta antes de que empiece? Estoy mirando Zoom. Estoy mirando Discord.

Watch more workshops on topic

Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
React Summit 2022React Summit 2022
173 min
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
En esta masterclass, aprenderás cómo construir una aplicación Next.js que utiliza Apollo Client para obtener datos de un backend de WordPress sin cabeza y usarlo para renderizar las páginas de tu aplicación. Aprenderás cuándo debes considerar una arquitectura de WordPress sin cabeza, cómo convertir un backend de WordPress en un servidor GraphQL, cómo componer consultas usando el IDE GraphiQL, cómo colocar fragmentos GraphQL con tus componentes, y más.
Construir con SvelteKit y GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Construir con SvelteKit y GraphQL
Top Content
WorkshopFree
Scott Spence
Scott Spence
¿Alguna vez has pensado en construir algo que no requiera mucho código de plantilla con un tamaño de paquete pequeño? En esta masterclass, Scott Spence irá desde el hola mundo hasta cubrir el enrutamiento y el uso de endpoints en SvelteKit. Configurarás una API de GraphQL en el backend y luego usarás consultas de GraphQL con SvelteKit para mostrar los datos de la API de GraphQL. Construirás un proyecto rápido y seguro que utiliza las características de SvelteKit, y luego lo desplegarás como un sitio completamente estático. Este curso es para los curiosos de Svelte que no han tenido una experiencia extensa con SvelteKit y quieren una comprensión más profunda de cómo usarlo en aplicaciones prácticas.

Tabla de contenidos:
- Inicio e introducción a Svelte
- Inicializar el proyecto frontend
- Recorrido por el proyecto esqueleto de SvelteKit
- Configurar el proyecto backend
- Consultar datos con GraphQL
- Recuperación de datos en el frontend con GraphQL
- Estilización
- Directivas de Svelte
- Enrutamiento en SvelteKit
- Endpoints en SvelteKit
- Despliegue en Netlify
- Navegación
- Mutaciones en GraphCMS
- Envío de mutaciones GraphQL a través de SvelteKit
- Preguntas y respuestas
Modelado de Bases de Datos Relacionales para GraphQL
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Modelado de Bases de Datos Relacionales para GraphQL
Top Content
Workshop
Adron Hall
Adron Hall
En esta masterclass profundizaremos en el modelado de datos. Comenzaremos con una discusión sobre varios tipos de bases de datos y cómo se mapean a GraphQL. Una vez que se haya establecido esa base, el enfoque se desplazará a tipos específicos de bases de datos y cómo construir modelos de datos que funcionen mejor para GraphQL en varios escenarios.
Índice de contenidosParte 1 - Hora 1      a. Modelado de Datos de Bases de Datos Relacionales      b. Comparando Bases de Datos Relacionales y NoSQL      c. GraphQL con la Base de Datos en menteParte 2 - Hora 2      a. Diseño de Modelos de Datos Relacionales      b. Relación, Construcción de Tablas Multijoin      c. Complejidades de Consulta de Modelado de Datos Relacionales y GraphQL
Prerrequisitos      a. Herramienta de modelado de datos. El formador utilizará dbdiagram      b. Postgres, aunque no es necesario instalar esto localmente, ya que estaré utilizando una imagen de Dicker de Postgres, de Docker Hub para todos los ejemplos      c. Hasura
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
JSNation 2023JSNation 2023
174 min
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
Top Content
WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
Esta masterclass de SvelteKit explora la integración de servicios de terceros, como Storyblok, en un proyecto SvelteKit. Los participantes aprenderán cómo crear un proyecto SvelteKit, aprovechar los componentes de Svelte y conectarse a APIs externas. La masterclass cubre conceptos importantes incluyendo SSR, CSR, generación de sitios estáticos y despliegue de la aplicación usando adaptadores. Al final de la masterclass, los asistentes tendrán una sólida comprensión de la construcción de aplicaciones SvelteKit con integraciones de API y estarán preparados para el despliegue.
Construye y Despliega un Backend con Fastify y Platformatic
JSNation 2023JSNation 2023
104 min
Construye y Despliega un Backend con Fastify y Platformatic
WorkshopFree
Matteo Collina
Matteo Collina
Platformatic te permite desarrollar rápidamente APIs GraphQL y REST con un esfuerzo mínimo. La mejor parte es que también te permite aprovechar todo el potencial de Node.js y Fastify cuando lo necesites. Puedes personalizar completamente una aplicación de Platformatic escribiendo tus propias características y complementos adicionales. En el masterclass, cubriremos tanto nuestros módulos de código abierto como nuestra oferta en la nube:- Platformatic OSS (open-source software) — Herramientas y bibliotecas para construir rápidamente aplicaciones robustas con Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (actualmente en beta) — Nuestra plataforma de alojamiento que incluye características como aplicaciones de vista previa, métricas integradas e integración con tu flujo de Git (https://platformatic.dev/).
En este masterclass aprenderás cómo desarrollar APIs con Fastify y desplegarlas en la nube de Platformatic.
Construyendo APIs GraphQL sobre Ethereum con The Graph
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Construyendo APIs GraphQL sobre Ethereum con The Graph
WorkshopFree
Nader Dabit
Nader Dabit
The Graph es un protocolo de indexación para consultar redes como Ethereum, IPFS y otras blockchains. Cualquiera puede construir y publicar APIs abiertas, llamadas subgrafos, para hacer que los datos sean fácilmente accesibles.

En este masterclass aprenderás cómo construir un subgrafo que indexa datos de blockchain de NFT del contrato inteligente Foundation. Desplegaremos la API y aprenderemos cómo realizar consultas para recuperar datos utilizando diferentes tipos de patrones de acceso a datos, implementando filtros y ordenamiento.

Al final del masterclass, deberías entender cómo construir y desplegar APIs de alto rendimiento en The Graph para indexar datos de cualquier contrato inteligente desplegado en Ethereum.

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

De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
RedwoodJS: El marco de aplicación React Full-Stack de tus sueños
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: El marco de aplicación React Full-Stack de tus sueños
Top Content
Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.
Baterías Incluidas Reimaginadas - El Resurgimiento de GraphQL Yoga
GraphQL Galaxy 2021GraphQL Galaxy 2021
33 min
Baterías Incluidas Reimaginadas - El Resurgimiento de GraphQL Yoga
Envelope is a powerful GraphQL plugin system that simplifies server development and allows for powerful plugin integration. It provides conformity for large corporations with multiple GraphQL servers and can be used with various frameworks. Envelope acts as the Babel of GraphQL, allowing the use of non-spec features. The Guild offers GraphQL Hive, a service similar to Apollo Studio, and encourages collaboration with other frameworks and languages.
Aplicaciones sólidas de React y GraphQL para personas con prisa
GraphQL Galaxy 2022GraphQL Galaxy 2022
29 min
Aplicaciones sólidas de React y GraphQL para personas con prisa
The Talk discusses the challenges and advancements in using GraphQL and React together. It introduces RedwoodJS, a framework that simplifies frontend-backend integration and provides features like code generation, scaffolding, and authentication. The Talk demonstrates how to set up a Redwood project, generate layouts and models, and perform CRUD operations. Redwood automates many GraphQL parts and provides an easy way for developers to get started with GraphQL. It also highlights the benefits of Redwood and suggests checking out RedwoodJS.com for more information.