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!

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

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 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.
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
Domina los Patrones de JavaScript
JSNation 2024JSNation 2024
145 min
Domina los Patrones de JavaScript
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
Durante esta masterclass, los participantes revisarán los patrones esenciales de JavaScript que todo desarrollador debería conocer. A través de ejercicios prácticos, ejemplos del mundo real y discusiones interactivas, los asistentes profundizarán su comprensión de las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables. Al final de la masterclass, los participantes ganarán una nueva confianza en su capacidad para escribir código JavaScript de alta calidad que resista el paso del tiempo.
Puntos Cubiertos:
1. Introducción a los Patrones de JavaScript2. Patrones Fundamentales3. Patrones de Creación de Objetos4. Patrones de Comportamiento5. Patrones Arquitectónicos6. Ejercicios Prácticos y Estudios de Caso
Cómo Ayudará a los Desarrolladores:
- Obtener una comprensión profunda de los patrones de JavaScript y sus aplicaciones en escenarios del mundo real- Aprender las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables- Mejorar las habilidades de resolución de problemas y la legibilidad del código- Mejorar la colaboración y la comunicación dentro de los equipos de desarrollo- Acelerar el crecimiento de la carrera y las oportunidades de avance en la industria del software
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

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 2021React Advanced 2021
39 min
No resuelvas problemas, elimínalos
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
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.
Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
React Advanced 2021React Advanced 2021
47 min
Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
Top Content
The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
Gestión del Estado de React: 10 Años de Lecciones Aprendidas
React Day Berlin 2023React Day Berlin 2023
16 min
Gestión del Estado de React: 10 Años de Lecciones Aprendidas
Top Content
This Talk focuses on effective React state management and lessons learned over the past 10 years. Key points include separating related state, utilizing UseReducer for protecting state and updating multiple pieces of state simultaneously, avoiding unnecessary state syncing with useEffect, using abstractions like React Query or SWR for fetching data, simplifying state management with custom hooks, and leveraging refs and third-party libraries for managing state. Additional resources and services are also provided for further learning and support.
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.