Todo lo que necesitas para preparar tu servidor GQL para producción

Rate this content
Bookmark

Siempre hay muchas preguntas y charlas en conferencias sobre cómo llevar los servidores GraphQL a producción, pero no hay muchos pasos y acciones concretas para seguir. En el masterclass, Uri (el fundador de The Guild) te guiará a través del proceso de The Guild para llevar un servidor GraphQL a producción.

Añadiremos:

- Caché potente
- Registro, monitoreo y trazabilidad
- Funciones de seguridad como autenticación, enmascaramiento de errores, operaciones persistentes, límite de profundidad y límite de velocidad


Si estás planeando tener tu servidor GraphQL en producción, ¡este masterclass es imprescindible para ti!

FAQ

The Guild es un grupo de desarrolladores de código abierto que se enfoca en construir herramientas sostenibles de código abierto, con la intención de que las bibliotecas se mantengan bien a lo largo del tiempo sin la presión de convertir el desarrollo en un producto comercial.

Entre las herramientas desarrolladas por The Guild se encuentran Apollo Client, Apollo Server, GraphQL Code Generator, GraphQL Mesh, Envelope y GraphQL Inspector.

GraphQL Mesh permite integrar diversas APIs, como OpenAPI, JSON Schema y gRPC, bajo un solo esquema de GraphQL, facilitando la interacción y el manejo de datos entre diferentes fuentes.

Envelope es un sistema de plugins para GraphQL que permite a los desarrolladores personalizar fácilmente la ejecución de GraphQL, agregar seguridad, caching y monitoreo personalizado, y adaptar el servidor para diferentes entornos de ejecución.

GraphQL Code Generator es una herramienta que genera automáticamente tipos y operaciones a partir de esquemas GraphQL, mejorando el flujo de desarrollo y ayudando a mantener el código fuente limpio y tipado de manera segura.

La sostenibilidad asegura que las herramientas y bibliotecas de código abierto se mantengan actualizadas y útiles a largo plazo, sin depender de la comercialización del software, lo que permite enfocarse en la calidad y la innovación continua.

Uri Goldshtein
Uri Goldshtein
130 min
08 Dec, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Uri de The Guild presenta GraphQL y sus ventajas sobre REST. Implementar GraphQL en producción implica comenzar con un caso de uso simple y utilizar un enfoque de esquema impulsado por el producto. Los complementos de generación de código y las herramientas como GraphQL Mesh simplifican la implementación de GraphQL. El masterclass demuestra cómo instalar GraphQL Mesh, generar un esquema y configurar fuentes. Envelope, un sistema de complementos para GraphQL, proporciona personalización y flexibilidad, simplificando el desarrollo del servidor y mejorando la seguridad.

1. Introducción a The Guild y GraphQL

Short description:

Uri, un miembro de The Guild, comparte sobre el trabajo del grupo y las herramientas de código abierto que construyen. The Guild se enfoca en el desarrollo sostenible de código abierto y asegura que sus herramientas se utilicen en producción. Las herramientas se pueden utilizar por separado y están diseñadas para ser flexibles. Uri presenta GraphQL y sus ventajas sobre REST, como la reducción de viajes de ida y vuelta y el exceso de datos. Menciona el proyecto para mejorar graphql.org e invita a otros a contribuir. El cliente puede consultar el Motor de GraphQL, que ejecuta la consulta y devuelve los datos solicitados.

Así que soy Uri. Soy miembro de un grupo llamado The Guild. ¿Cuántos de ustedes han oído hablar de The Guild? ¿Nadie? Yo sí. Bueno, genial. Así que solo compartiré un poco. The Guild es un grupo de desarrolladores de código abierto. Personalmente, comencé este grupo hace un par de años. Solía trabajar en Apollo. De hecho, estaba en el equipo que comenzó Apollo. Construimos otra cosa llamada Meteor. Era un marco de JavaScript, y pensamos en cuál sería la próxima versión de Meteor. En aquel entonces, fue cuando Facebook abrió GraphQL. Así que pensamos que tal vez la próxima versión de Meteor se basaría en GraphQL. Y así es como comenzamos con Apollo Client, Apollo Server y la biblioteca de herramientas de GraphQL, entre muchas otras cosas que todavía son populares hoy en día.

Así que comencé allí en Apollo, y luego después de un tiempo, decidí construir otro grupo que está estructurado de manera un poco diferente para construir un código abierto sostenible. Las bibliotecas se mantendrán bien durante mucho tiempo, durante muchos años, y no habrá presión de, como, menos presión de vender un producto, sino más bien hacer un código abierto sostenible. Entonces, las herramientas que construimos hoy son el Generador de Código GraphQL del que hablaré un poco hoy, GraphQL Mesh, Envelope, Inspector de GraphQL, Módulos de GraphQL. Muy nuevo, asumimos GraphQL Yoga, si algunos de ustedes han oído en mi charla, también estoy haciendo la presentación principal para GraphQL Galaxy, y en la presentación voy a anunciar algo al respecto, así que lo sabrán incluso antes que todos. Básicamente, hoy en día somos el grupo de código abierto más grande en GraphQL, y también hacemos mucho trabajo que está fuera del ámbito de GraphQL, como con OpenAPI y todo tipo de otras APIs, como JSON Schema, grpc, todo tipo de otras cosas, así que también trabajamos allí, así que eso es un poco sobre nosotros, y cómo trabajamos es que trabajamos con clientes, con empresas. Construimos herramientas de código abierto y luego consultamos, y también les ayudamos a introducir las herramientas y mejorar las herramientas, y cosas así, por lo que todas las herramientas se construyen por una necesidad real, como que no hacemos código abierto de una herramienta que ninguno de nuestros clientes está utilizando en producción, todo el código abierto es algo que usamos en producción, por lo que puedes saber que puedes confiar en ello y sabes que hay una necesidad real para ello, y no es algo que te estamos vendiendo, o lo hacemos por razones de popularidad, o cosas así, así que eso es un poco sobre The Guild, cada miembro de The Guild es un miembro que realmente contribuyó al código abierto antes de unirse a The Guild, y a veces puede ser difícil para ti encontrar nuestras bibliotecas, porque todas las bibliotecas están bajo los nombres de las personas, y no bajo el nombre de The Guild, creemos que este es un mejor modelo para un código abierto más sostenible, es muy raro, no es algo muy común, pero así es como lo hacemos hoy en día.

Mencioné The Guild al principio, construimos muchas herramientas diferentes, no hablaré mucho sobre eso, pero solo que todas nuestras herramientas se construyen de una manera específica, tanto en la forma de código abierto que mencioné al principio, como también completan una plataforma completa, por lo que la idea es que te proporciona todo lo que necesitas desde el backend hasta el frontend para construir una aplicación, pero puedes usarlos completamente por separado, no te estamos obligando a usarlos, no es una plataforma bloqueada por proveedor, cada herramienta se puede usar por sí misma, tratamos de descomponer estas herramientas en las piezas más pequeñas que podemos, para que sean lo más flexibles posible. Y menciono esto ahora porque creo que es importante y también es parte de las razones por las que creamos algunas herramientas nuevas que presentaré hoy, porque creemos que de esa manera realmente podemos resolver las cosas mejor. Y así, hablaré un poco sobre eso y también haré mi introducción a las herramientas. Compartiré un tutorial contigo que, en mi opinión, está mejor estructurado en comparación con otros tutoriales de GraphQL que existen porque separa algunas cosas. Así que llegaré a eso pronto. Pero volvamos a lo básico de GraphQL. Nuevamente, todos aquí saben probablemente un poco sobre qué es GraphQL. Es un lenguaje de consulta. Puedes describir los datos que deseas consultar en un esquema. Esos datos pueden ser cualquier dato. Esa es la parte interesante de GraphQL. Es un lenguaje de consulta, pero a diferencia de SQL, donde necesitas estructurar tus datos y tus tablas de cierta manera, aquí puedes crear básicamente un esquema, consultar ese esquema y obtener resultados predecibles. Pero ese esquema puede describir cualquier dato. Puede ser algo que se superponga a una API REST, lo cual es muy común. Puede ser solo un archivo. Puede ser una base de datos. Puede ser cualquier dato que tengas, una hoja de cálculo de Excel, cualquier cosa. Así que eso es interesante porque ahora puedes comenzar a construir gráficos de datos, de cualquier dato que tengas. Y también puedes superponerlo en lugares que, digamos, que tal vez no hayas pensado antes. Espero poder tocar eso de nuevo. Estoy omitiendo este ejemplo. Es solo un ejemplo con REST, donde puedes consultar cualquier cosa, si quieres obtener una lista de chats y cosas así, entonces vas a consultar de un lado a otro y tal vez necesites múltiples solicitudes y respuestas. Y puedes construir puntos finales REST personalizados, ¿verdad? Así que no siempre es cierto. Puedes construir el punto final REST perfecto de GraphQL y aún así obtener exactamente lo que quieres. Pero eso significa que ese trabajo se realiza en el backend. Con GraphQL, el cliente simplemente puede describir lo que quiere y obtener exactamente lo que quiere. Los viajes de ida y vuelta adicionales son algo de lo que mucha gente está hablando como algo que GraphQL puede resolver y también el exceso de datos, ¿verdad? Como puedes tener un punto final y en este caso es un punto final específico para repositorios en GitHub y vas a obtener toneladas de información que tal vez no necesites. Así que a través del cable donde eso importa, vas a obtener mucha información. Esto es solo algo que copié de graphql.org. Por cierto, ahora estamos reconstruyendo la infraestructura de graphql.org y estamos tratando de convertirla en el mejor recurso. Entonces, si alguno de ustedes está interesado en la documentación y en ayudar a su equipo a incorporarse y cosas así, espero hacer de graphql.org el mejor lugar para ir y aprender sobre GraphQL y encontrar todos los recursos y todo lo que estoy diciendo ahora, espero que no necesiten hablar conmigo. Solo pueden ir a graphql.org. Así que si alguno de ustedes está interesado en ayudar, este proyecto no se movió mucho durante muchos años y ahora lo estamos cubriendo y espero que podamos hacer de graphql.org un mejor sitio web. Sí, entonces, ya saben, GraphQL, lo que todos están mostrando es que puedo consultar solo los datos que necesito y puedo enviar una consulta y obtener un resultado. Hoy vamos a hablar también sobre cosas más avanzadas. Un poco sobre, ya saben, tal vez una ilustración de cómo funciona. Así que tenemos un cliente y digamos algunas fuentes de datos y en el medio ponemos, llamémoslo el Motor de GraphQL en lugar de un servidor de GraphQL. Y espero que más adelante entiendan por qué lo llamo un motor y no un servidor. Entonces, y podemos describir los datos de todas estas fuentes de datos utilizando un esquema. Así que escribimos ese esquema. Hay muchas formas diferentes de ejecutar ese esquema. También podemos hablar hoy sobre diferentes formas de escribir un esquema, ese esquema podría, podría escribirse simplemente. Y ese esquema manual podría escribirse en lo que se llama SDL. Así que el lenguaje real de GraphQL, lo que puedes ver aquí a la izquierda, pero también se escribirá con código. Así que podrías escribir como clases que representan estas estructuras de datos y hay ventajas y desventajas o objetos que representan estas estructuras de datos. Y hay ventajas y desventajas para ambos enfoques. Y también hay diferentes bibliotecas para todos estos enfoques. Si estás interesado en eso, avísame porque tengo muchas opiniones al respecto. Así que describimos el esquema y luego el cliente básicamente puede consultar algo que desea, digamos en este caso, el usuario con AB2 y un nombre, y luego el motor de GraphQL obtendría esa consulta y la ejecutaría de la manera más eficiente que pueda. Así que irían a buscar tal vez al usuario y luego extraerían del objeto de usuario el nombre y nos enviarían lo que realmente necesitamos.

2. Funciones y Beneficios de GraphQL

Short description:

GraphQL automatiza gran parte del trabajo de datos que realizamos, espera y orquesta llamadas de red y da forma a los datos según sea necesario. Proporciona rendimiento de red, un esquema del gráfico de datos, orquestación, automatización y la capacidad de modelar datos de diferentes fuentes. Estos son los beneficios de GraphQL.

Y si queremos más información sobre el usuario, digamos que enviamos una consulta más grande, entonces tal vez el servidor nos devuelva el objeto de usuario y luego el motor gráfico realmente buscará en paralelo el nombre y los mensajes si puede ver que puede hacerlo. Y luego tal vez el contenido pueda venir de una fuente completamente diferente, pero la forma en que lo modelamos, lo modelamos como el cliente ve los datos, quiere ver los datos y lo modelamos como mensajes y su contenido se ve básicamente igual. Es parte del objeto de mensajes, por lo que el cliente recibe un solo resultado y no importa qué tan complicado sea el servidor o cuántas fuentes de datos o cuántos servicios tenga su backend. Para el cliente, obtienen la representación de los datos que esperan, lo cual es un punto importante, creo, cuando hablaremos un poco sobre GraphQL Mesh, del cual hablaré, espero poder hablar hoy.

Verás que hay dos filosofías diferentes de cómo describimos el esquema de los datos. El esquema que básicamente es todas nuestras fuentes de datos juntas en un gráfico o el esquema que realmente necesita el cliente. Y espero mostrarte hoy que esos podrían ser dos esquemas diferentes. Así que, sí, esa es una ilustración básica de cómo funciona GraphQL, muy básica. Ahora profundicemos un poco más en eso solo para entender, porque para mí, cuando hablo de GraphQL, en realidad solo veo que hay una función. Así que mostraré lo que esa función realmente es y lo que esa función realmente hace.

Cuando describimos los datos, también escribimos resolutores. Los resolutores son la forma de decirle a GraphQL cómo obtener cada campo. En este caso, tenemos una función. Digamos que queremos el nombre del usuario. Básicamente creamos la función para saber cuál es el objeto que va a recibir como entrada. Sabemos cuáles son las entradas que se están obteniendo en la función. En nuestro caso, es como un objeto de usuario, digamos. El padre, el resolutor padre, el punto de entrada para el gráfico. Y luego podemos ejecutar cualquier código que queramos. Es básicamente una función. Así que podemos hacer lo que queramos en esa función, incluyendo llamar a otro servidor o cualquier cosa, y necesitamos devolver una cadena porque hemos definido una cadena. Así es como se hace cuando creamos un servidor GraphQL o un motor GraphQL.

Ahora, todo lo que verás en esta diapositiva es básicamente una diapositiva en la que intento explicarte el trabajo básico de lo que la función GraphQL está haciendo internamente. Así que todo esto, siempre, cuando muestro esa diapositiva, les pido a las personas que piensen mientras ven esa diapositiva, ¿dónde escriben el código hoy? Entonces, la función GraphQL básicamente obtiene estas funciones de resolución que se crearon en el esquema. Luego crea, y el otro argumento que recibe es una consulta. Realmente, piénsalo como una función que se llama GraphQL y recibe dos variables, dos entradas. Una se llama esquema ejecutable, que son las definiciones que vemos a la izquierda, y sus funciones. Y el otro argumento es la consulta que puede cambiar entre diferentes llamadas. Y luego lo que hará la función GraphQL es que obtendrá ese id 10 que obtuvimos en la parte superior, en la consulta, y ejecutará el primer cuadro, la primera función. Y obtendrá un resultado. Ese resultado sería un objeto de usuario, digamos. Ahora sabe por el crédito que necesitamos un nombre y un mensaje. Entonces, lo que GraphQL hará es tomar los cuadros y los ejecutará en paralelo porque puede, porque ambos de estos cuadros realmente requieren el mismo valor padre. Así que los ejecutará en paralelo. Un cuadro, el nombre nos dará la cadena, hemos terminado. Entonces lo pondrá en el lugar correcto. Luego los mensajes, en realidad obtenemos tres objetos de mensajes diferentes. Y para cada uno de ellos, queremos el título y la fecha. Entonces, ahora el motor GraphQL realmente ejecutará todos estos diferentes cuadros para todos los resultados diferentes. Y cuando los resultados lleguen, porque todo esto es asíncrono, cada cuadro aquí es una función asíncrona. Entonces podemos llamar a un punto final remoto o algo así. Cuando lleguen los resultados, colocará todos los resultados en la estructura correcta en el lugar correcto y nos devolverá los resultados. Esa es la función GraphQL.

Ahora creo que, lo que vimos aquí es que GraphQL no solo minimiza los datos que enviamos a través de la red o algo así, sino que en realidad GraphQL automatiza gran parte del trabajo de datos que hacemos nosotros mismos, tal vez en código u otros medios. Entonces GraphQL espera y orquesta todas las diferentes llamadas de red que necesitábamos hacer y todas las diferentes acciones que necesitábamos tomar para obtener los datos que queremos. Y luego también da forma a los datos de la manera que queremos. Y creo que ese es el mayor beneficio de GraphQL en la mayoría de los entornos. En la mayoría de los entornos, no se trata necesariamente de ahorrar algunos bytes en la red, sino de automatizar gran parte del trabajo de datos que hacemos de todos modos. Y el trabajo de datos se realiza de muchas formas diferentes. Puede hacerse en el cliente, puede hacerse en un servidor, incluso puede hacerse en servicios de análisis de datos y cosas así, que consultan muchos servicios diferentes de muchas fuentes de datos diferentes, obtienen los datos que desean y luego hacen algún análisis. Por lo tanto, todos estos podrían beneficiarse potencialmente de GraphQL. Esos son algunos de los beneficios que creo que tiene GraphQL. Por cierto, si es muy básico, avísame y si tienes preguntas o quieres llevarme en otras direcciones mientras estoy diciendo esto, también avísame.

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 🤐)
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 Conference 2021React Advanced Conference 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.
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
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
Seguridad de tipo de extremo a extremo con React, GraphQL y Prisma
React Advanced Conference 2022React Advanced Conference 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

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

No resuelvas problemas, elimínalos
React Advanced Conference 2021React Advanced Conference 2021
39 min
No resuelvas problemas, elimínalos
Top Content
Los humanos son solucionadores de problemas naturales y somos lo suficientemente buenos en eso que hemos sobrevivido a lo largo de los siglos y nos hemos convertido en la especie dominante del planeta. Debido a que somos tan buenos en eso, a veces también nos convertimos en buscadores de problemas, buscando problemas que podemos resolver. Aquellos que logran sus objetivos de la manera más exitosa son los eliminadores de problemas. Hablemos de la distinción entre resolver y eliminar problemas con ejemplos de dentro y fuera del mundo de la codificación.
Uso efectivo de useEffect
React Advanced Conference 2022React Advanced Conference 2022
30 min
Uso efectivo de useEffect
Top Content
¿Puede useEffect afectar negativamente a tu base de código? Desde la obtención de datos hasta la lucha con las APIs imperativas, los efectos secundarios son una de las mayores fuentes de frustración en el desarrollo de aplicaciones web. Y seamos honestos, poner todo en ganchos useEffect no ayuda mucho. En esta charla, desmitificaremos el gancho useEffect y obtendremos una mejor comprensión de cuándo (y cuándo no) usarlo, así como descubriremos cómo los efectos declarativos pueden hacer que la gestión de efectos sea más mantenible incluso en las aplicaciones React más complejas.
Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
React Advanced Conference 2021React Advanced Conference 2021
47 min
Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
Top Content
Los sistemas de diseño buscan aportar consistencia al diseño de una marca y hacer que el desarrollo de la interfaz de usuario sea productivo. Las bibliotecas de componentes con una API bien pensada pueden facilitar esto. Pero, ¡a veces una elección de API puede accidentalmente sobrepasar y ralentizar al equipo! Hay un equilibrio allí... en algún lugar. Exploremos algunos de los problemas y posibles soluciones creativas.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
¡React 18! ¡Funciones concurrentes! Tal vez ya hayas probado las nuevas APIs como useTransition, o tal vez solo hayas oído hablar de ellas. Pero, ¿sabes cómo React 18 logra las mejoras de rendimiento que trae consigo? En esta charla, echemos un vistazo bajo el capó de las características de rendimiento de React 18: - Cómo React 18 reduce el tiempo que tu página permanece congelada (también conocido como TBT) - Qué sucede exactamente en el hilo principal cuando ejecutas useTransition() - Cuál es la trampa con las mejoras (¡no hay torta gratis!), y por qué Vue.js y Preact se negaron rotundamente a lanzar algo similar
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
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!
TypeScript y React: Secretos de un matrimonio feliz
React Advanced Conference 2022React Advanced Conference 2022
21 min
TypeScript y React: Secretos de un matrimonio feliz
Top Content
TypeScript y React son inseparables. ¿Cuál es el secreto de su exitosa unión? Bastante código extrañamente extraño. Aprende por qué useRef siempre se siente extraño, cómo manejar los genéricos en los hooks personalizados y cómo los tipos de unión pueden transformar tus componentes.