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

Construir con SvelteKit y GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Construir con SvelteKit y GraphQL
Top Content
Featured 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
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured 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.
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
Seguridad de tipo de extremo a extremo con React, GraphQL y Prisma
React Advanced 2022React Advanced 2022
95 min
Seguridad de tipo de extremo a extremo con React, GraphQL y Prisma
Featured WorkshopFree
Sabin Adams
Sabin Adams
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
GraphQL para Desarrolladores de React
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL para Desarrolladores de React
Featured Workshop
Roy Derks
Roy Derks
Hay muchas ventajas en utilizar GraphQL como fuente de datos para el desarrollo frontend, en comparación con las API REST. Nosotros, los desarrolladores, por ejemplo, necesitamos escribir mucho código imperativo para recuperar datos y mostrarlos en nuestras aplicaciones y manejar el estado. Con GraphQL, no solo puedes reducir la cantidad de código necesario para la obtención de datos y la gestión del estado, sino que también obtendrás una mayor flexibilidad, mejor rendimiento y, sobre todo, una mejor experiencia de desarrollo. En este masterclass aprenderás cómo GraphQL puede mejorar tu trabajo como desarrollador frontend y cómo manejar GraphQL en tu aplicación frontend de React.