De GraphQL Zero a GraphQL Hero con RedwoodJS

Rate this content
Bookmark

Todos amamos GraphQL, pero puede ser desalentador poner en marcha un servidor y mantener tu código organizado, mantenible y testeable a largo plazo. ¡No más! Ven a ver cómo paso de un directorio vacío a una API GraphQL completamente desarrollada en cuestión de minutos. Además, verás lo fácil que es usar y crear directivas para limpiar aún más tu código. ¡Vas a amar aún más GraphQL una vez que hagas las cosas Redwood Easy!

This talk has been presented at GraphQL Galaxy 2021, check out the latest edition of this Tech Conference.

FAQ

Redwood.js es un marco de aplicación de pila completa diseñado para desarrollar aplicaciones web y API. Utiliza React en el front end y Node.js en el back end, junto con GraphQL para la comunicación entre ambos.

Para iniciar un nuevo proyecto en Redwood.js, puedes usar el comando 'yarn create redwood-app', seguido del nombre de tu aplicación.

Redwood.js utiliza Prisma como ORM para interactuar con la base de datos, lo que facilita la definición de esquemas y la realización de migraciones.

Redwood.js permite integrar fácilmente la autenticación en las APIs mediante directivas como 'require auth', que asegura que ciertas operaciones solo puedan ser ejecutadas por usuarios autenticados.

GraphQL Helix es una biblioteca que Redwood.js utiliza para construir el servidor GraphQL, ayudando a manejar las peticiones de una manera eficiente y flexible.

Redwood.js utiliza Prisma para definir y manejar las relaciones entre las tablas de la base de datos, lo que se configura a través del archivo schema.prisma.

Para ejecutar migraciones de base de datos en Redwood.js, se utiliza el comando 'yarn redwood prisma migrate-dev', que aplica los cambios definidos en el esquema a la base de datos.

En Redwood.js, las operaciones CRUD se pueden generar automáticamente utilizando el comando 'yarn redwood g', que crea el andamio necesario tanto en el front end como en el back end.

Una celda en Redwood.js es una abstracción que facilita la gestión de estados de carga de datos en el front end, permitiendo definir cómo se muestra la información en diferentes estados (cargando, error, vacío, éxito).

Aunque Redwood.js aún no ha alcanzado la versión 1.0, es bastante estable y ya está siendo utilizado en producción por varias startups, con una versión estable esperada pronto.

Tom Preston-Werner
Tom Preston-Werner
32 min
09 Dec, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Tom Pressenwurter presenta Redwood.js, un marco de aplicación de pila completa para construir APIs de GraphQL de manera fácil y mantenible. Demuestra una aplicación Redwood.js con un front end basado en React y una API de Node.js. Redwood.js ofrece una estructura de carpetas simplificada y un esquema para organizar la aplicación. Proporciona una fácil manipulación de datos y operaciones CRUD a través de funciones GraphQL. Redwood.js permite una fácil implementación de nuevas consultas y directivas, incluyendo autenticación y limitación de acceso a datos. Es un marco estable y listo para producción que se integra bien con otras tecnologías de front-end.

1. Introducción a Redwood.js

Short description:

Tom Pressenwurter presenta Redwood.js, un marco de aplicación de pila completa para construir APIs de GraphQL de manera fácil y sostenible.

♪♪ ♪♪ ♪♪ Hola a todos. Tom Pressenwurter aquí con una simple pregunta para ustedes. ¿Cuál es la forma más fácil de poner en marcha una API de GraphQL? A todos nos encanta GraphQL, pero a veces puede parecer un poco desalentador poner en marcha un proyecto. Y aquí hay otra pregunta. ¿Puede ser fácil y sostenible? ¿Puedes mantener las cosas de manera ordenada a largo plazo? Bueno, ahí es donde entra Redwood.js. Redwood.js es un marco de aplicación de pila completa, perfecto para todo, desde prototipos rápidos hasta la construcción de startups. He estado trabajando en ello durante los últimos dos años, y creo que se ha convertido en algo realmente útil, tanto en el front end como en el back end.

2. Visión general y configuración de la aplicación Redwood.js

Short description:

Tom Pressenwurter demuestra una aplicación Redwood.js, con un front end basado en React y una API de Node.js en el back end. Se utiliza Prisma para la comunicación con la base de datos. Luego crea una nueva aplicación Redwood.js llamada 'tracks' y configura el entorno de desarrollo.

Permíteme mostrarte cómo se ve una aplicación Redwood.js. En el front end, tenemos una aplicación web, una aplicación de una sola página, basada en React. Y en el back end tenemos una API basada en Node.js escrita en JavaScript o TypeScript. El front end se comunica con el back end utilizando el Cliente Apollo y habla GraphQL con el back end donde utilizamos GraphQL Helix y Envelop para crear el servidor GraphQL.

En tu lógica de negocio, utilizarás Prisma para comunicarte con una base de datos. Aunque Redwood.js proporciona el front end y el back end, hoy me voy a centrar principalmente en el back end y en la creación de la API GraphQL. Así que vamos a ver un poco de código.

Bien, lo primero que voy a hacer es crear una nueva aplicación Redwood.js utilizando yarn create Redwood app, y voy a hacer una sencilla aplicación de música. Así que la voy a llamar tracks. Esto va a buscar todas las dependencias. Ejecutar yarn install, etc. Normalmente tarda un poco, así que permíteme acelerar eso para ti. Ahí vamos. Voy a entrar en ese directorio y voy a abrir VS código desde allí. Lo primero que voy a hacer, voy a abrir una ventana de terminal aquí y voy a convertir esto en un repositorio git para que puedas ver más fácilmente qué archivos estoy cambiando.

QnA

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

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.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
Los Átomos de Jotai Son Simplemente Funciones
React Day Berlin 2022React Day Berlin 2022
22 min
Los Átomos de Jotai Son Simplemente Funciones
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.

Workshops on related 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
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.
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.