Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL

Rate this content
Bookmark

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.

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

FAQ

Utilizar WordPress sin cabeza con Next.js permite a los desarrolladores aprovechar las ventajas de ambos sistemas. WordPress actúa como un sistema de gestión de contenido robusto y amigable para los usuarios, mientras que Next.js ofrece un marco de desarrollo moderno que mejora la velocidad, la seguridad y la experiencia del desarrollador al construir aplicaciones web dinámicas y rápidas.

Apollo Client permite configurar políticas de caché, como 'Caché primero' o 'Red primero', para gestionar cómo se almacenan y recuperan los datos. Además, se pueden usar técnicas como la invalidación de caché y la revalidación después de mutaciones para asegurar que los usuarios siempre vean la información más actualizada sin realizar peticiones innecesarias.

Sí, es posible utilizar Next.js para generar un sitio web completamente estático pre-renderizando las páginas durante la fase de construcción. Esto implica obtener los datos necesarios de un sitio de WordPress sin cabeza, generar archivos HTML estáticos y luego distribuir estos archivos a través de un CDN. Esta técnica es particularmente útil para sitios que no requieren interactividad dinámica en el lado del cliente.

Una estrategia efectiva es utilizar la Generación Estática Incremental (ISR) de Next.js, que permite servir una versión obsoleta de la página mientras se intenta revalidar los datos en segundo plano. Si WordPress está inactivo, Next.js seguirá sirviendo la versión en caché hasta que el servicio se restaure y pueda actualizar el contenido.

Optimizar las consultas GraphQL en proyectos que utilizan WordPress sin cabeza se puede lograr utilizando fragmentos de GraphQL para reutilizar partes de las consultas en diferentes componentes. Esto no solo ayuda a mantener el código organizado, sino que también reduce la duplicidad y mejora el rendimiento al evitar solicitudes de datos innecesarias.

Kellen Mace
Kellen Mace
173 min
04 Jul, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Comencemos con la masterclass sobre la construcción de una aplicación WordPress sin cabeza con Next.js y WP GraphQL. Cubriremos los beneficios y desventajas de un enfoque sin cabeza, exploraremos la aplicación terminada y la página del blog, e implementaremos características como la búsqueda y las páginas de publicaciones individuales del blog. También aprenderemos cómo convertir WordPress en un servidor GraphQL, configurar Apollo Client, componer consultas GraphQL y usar fragmentos. La masterclass discute el almacenamiento en caché, la invalidación de caché y el uso de Next.js como un generador de sitios estáticos. Se comparan varias opciones de CMS, incluyendo WordPress, Contentful, Sanity, Prismic y Strapi.

1. Introducción a WordPress sin cabeza

Short description:

Comencemos con la masterclass sobre la construcción de una aplicación de WordPress sin cabeza con Next.js y WP GraphQL. Cubriremos temas como qué es WordPress sin cabeza y por qué podrías querer considerarlo. Luego nos sumergiremos en la masterclass de codificación en vivo donde clonarás una aplicación Next.js y la conectarás a un backend de WordPress usando GraphQL. También discutiremos los beneficios de una arquitectura sin cabeza y por qué podrías elegirla sobre WordPress tradicional. ¡Así que comencemos!

Entonces sí, comencemos ya que estamos unos minutos pasados de la hora. Así que gracias, en primer lugar, por estar aquí, por sintonizar esta workshop. Estoy realmente emocionado por ello.

El título de esta workshop, como ya sabes, es Construir una aplicación Headless WordPress con Next.js y WP GraphQL. Entonces, lo que haremos es, tengo algunas diapositivas para repasar. Compartiré mis diapositivas, me presentaré y luego repasaré algunos temas, como qué es Headless WordPress, por qué podrías querer considerarlo.

Y después de pasar por esas diapositivas, nos sumergiremos en la parte de la masterclass de codificación en vivo donde realmente clonas una aplicación Next.js, la pones en marcha en tu máquina local, y luego veremos cómo podemos conectarla a un backend de WordPress para que estemos extrayendo data de ese backend de WordPress a través de GraphQL, y luego usándola para renderizar las páginas de nuestra aplicación Next.js. Y repasaremos algunos tipos diferentes de páginas y veremos cómo se construye cada una. Así que espero que realmente lo disfrutes y obtengas mucho de ello.

Muy bien. Así que construyamos una aplicación headless WordPress con Next.js y WP GraphQL. Muy bien. Para empezar, me presentaré. Así que mi nombre es Kellan Mace. Trabajo en una empresa llamada WP Engine, que es una de las plataformas de alojamiento más populares en la web para sitios de WordPress, específicamente. Y lo relevante para esta audiencia y esta charla es el hecho de que WP Engine recientemente, lanzamos esta nueva plataforma de alojamiento llamada Atlas, que está orientada hacia headless WordPress sitios de WordPress incluso.

Así que puedes, con una sola cuenta y un solo proveedor de alojamiento, puedes alojar tanto el backend de WordPress como tu aplicación JavaScript de front-end todo en el mismo lugar, lo cual es bastante genial. Así que echa un vistazo a Atlas si eso te parece interesante. Mi nombre de usuario en Twitter también está aquí, si quieres ponerte en contacto conmigo después de la conferencia. Los DMs están abiertos, así que por favor si te estás sumergiendo en esto y tienes algunas preguntas, por favor ponte en contacto y házmelo saber aquí. Así que con eso nos sumergiremos.

Sé que comienzo con solo una especie de desambiguación o llamada, llamando la atención sobre las diferencias entre WordPress tradicional y luego Headless, y por qué podrías querer ir de una manera versus la otra, como dije. Así que hagamos eso.

Oh sí, antes de hacer eso, solo una diapositiva aquí, y eso es clonar el repositorio de la aplicación. Quería poner esto justo en la parte superior de la baraja de diapositivas aquí, solo porque podría tomar un minuto dependiendo de tu conexión a internet. Pero para que clones este repositorio, y luego puedes seguir los pasos en el readme allí. Te dirán que CD dentro del directorio de este proyecto, y luego ejecuta npm install para instalar las dependencias, y así sucesivamente. Así que si haces eso ahora, te ahorrarás un minuto una vez que llegues a la parte de codificación en vivo más tarde. Entonces no tendrás que esperar a que se instalen las dependencias y así sucesivamente. Así que puedes ir adelante y agarrar ese enlace en la diapositiva en esta diapositiva. Muy bien, así que con eso, hablemos sobre WordPress tradicional o monolítico. Así que como muchos de ustedes en la llamada probablemente ya saben WordPress ha estado alrededor por un tiempo. Así que somos el sistema de gestión de contenido más popular del mundo. En este punto la estadística es bastante impresionante. Es como WordPress ha alcanzado alrededor del 43% de cuota de mercado en internet. Ese es el porcentaje de sitios en línea que están funcionando eso que es simplemente alucinante pensar en ello.

En WordPress tradicional, WordPress tiene muchos trabajos, es responsable de proporcionar la interfaz de administración que tus creadores de contenido inician sesión, cuando crean y editan y gestionan su contenido, es responsable de guardar los data en la database. Y luego cuando las solicitudes llegan de, ya sabes, los visitantes del sitio web WordPress también es responsable de sacar los data de la database, y luego plantillarlo usando su API de tema, como HTML, y finalmente responder a esa solicitud. Así que lleva bastantes sombreros y hace muchos trabajos. Y en muchos casos en la web, esta es una gran configuración y funciona muy bien.

Pero cada vez más personas están eligiendo adoptar una architecture headless o decoupled. Así que hablaremos de eso el próximo año. Así que se ve algo así, donde se utiliza WordPress. Así que puedes verlo a la izquierda de esta diapositiva aquí. Pero se utiliza realmente solo para proporcionar esa agradable experiencia de administración para tus creadores de contenido y para almacenar los data. Pero no maneja ninguna renderización, no devuelve, ya sabes, ningún HTML al visitante del sitio. En cambio, tienes una aplicación de front-end que hace eso y eso es Next.js en nuestro caso en la workshop es lo que usaremos para eso. Así que tienes Next.js y se encarga de, ya sabes, consultar los data de WordPress y usar eso para renderizar las páginas HTML que se sirven a los visitantes del sitio. Y en medio de aquí, tienes que tener algún tipo de capa de API. Así que necesitas alguna forma para que tu front-end javascript y tu back-end WordPress se comuniquen entre sí.

Una forma de hacer eso es usar la API REST que está integrada en WordPress nativo. Sin embargo, yo argumentaría que una mejor elección en estos días es WPGraphQL. Así que ese es el logo que ves aquí en la parte inferior. WPGraphQL es un plugin gratuito de código abierto para WordPress que convierte cualquier sitio de WordPress en una API de GraphQL, lo cual es muy poderoso. Así que entonces obtienes todos los beneficios de GraphQL. En la architecture de la API REST, si quisieras consultar las entradas del blog y los usuarios y las categorías y algo más, podrías tener que golpear múltiples puntos finales de la API REST solo para agregar, ya sabes, solo para obtener todos los data que necesitas, lo cual puede ser lento y causar un golpe en el performance. Pero con WPGraphQL, tienes los beneficios de GraphQL donde puedes entrar en tu data de WordPress en cualquier punto y luego desde allí, consultar como quieras. Puedes decir, quiero las primeras 10 entradas del blog, y para cada uno de esos autores, quiero su nombre y otras entradas que han escrito. Y para cada uno de esos, quiero las categorías y componer estas consultas anidadas y obtener todos esos data de vuelta en una sola solicitud de red, lo cual es muy poderoso. Y tiene otros beneficios, también, pero eso diría que es uno de los principales. Así es como se ve una architecture decoupled. Y esto es lo que realmente estaremos construyendo hoy. Muy bien, así que la siguiente pregunta después de que hayas, ya sabes, me escuchaste hablar sobre tradicional versus decoupled es, ¿okay, pero por qué? ¿Por qué elegiría uno versus el otro? ¿Cuáles son los beneficios allí, verdad? Así que cubramos eso a continuación muy rápido. Así que algunos de los beneficios de ir headless o para una architecture decoupled serían estos. Tus creadores de contenido pueden mantener su CMS. Si hablas con muchos equipos de marketing en muchas empresas, realmente aman y conocen y, ya sabes, dependen de WordPress, y quieren seguir usándolo como su CMS preferido. Así que pueden hacerlo con una configuración headless. Performance y scalability, ya sabes, frameworks como Next.js lo hacen muy fácil para obtener un control muy detallado y decir, quiero que esta ruta sea completamente estática. Esta otra ruta para ser renderizada en el servidor. Esta otra ruta, haría algo de renderizado en el lado del cliente. Obtienes un control muy detallado sobre, ya sabes, performance y cómo cada de tus páginas se construye, y puede scale muy bien también. El tercero es la plataforma agnóstica backend. Este es un poco interesante para pensar. Así que con un enfoque headless o decoupled, tu backend de WordPress, solo sirve puro data JSON. Así que eso significa que podrías tener un cliente web, como una aplicación Next.js que tira de ese JSON y lo renderiza para el cliente web. Pero si quisieras, también podrías construir un cliente iOS, un cliente Android, un cliente de escritorio, y todas estas aplicaciones podrían obtener su data de la misma punto final de GraphQL, ya sabes, el mismo data JSON que utiliza el cliente web. Otras plataformas podrían usar y consumir también. Así que eso lo hace bastante poderoso si tienes, ya sabes, múltiples plataformas que necesitas apoyar. El siguiente es fácil de extraer data de múltiples fuentes. Esto sería como en el momento de la construcción cuando las páginas estáticas de tu sitio se están construyendo, digamos, si quieres extraer algunos data de WordPress, algunos data de Salesforce, data de la API de YouTube, algunos data de Contentful o lo que sea. Lo hace...los modernos frameworks como NOCS lo hacen muy fácil de hacer, para obtener data de todas estas, ya sabes, fuentes, y luego coserlo todo junto en tus páginas HTML. El siguiente es el aumento de la security. He visto arquitecturas de sitios donde harán algo como tendrán un frontend JavaScript que sirve el sitio web a sus visitantes del sitio, llamar al backend de WordPress, donde sus creadores de contenido gestionan el contenido. Y luego ese backend de WordPress, lo bloquearán para que solo ciertas direcciones IP se les permita incluso conectarse a esa instalación de WordPress y iniciar sesión para gestionar el contenido. Cualquier otra persona en todo el internet que intentara, ya sabes, administrador de WordPress para intentar entrar sería rechazado. Ya que no tienen, ya sabes, una de esas direcciones IP permitidas, por ejemplo. En WordPress tradicional, no podrías hacer eso porque todos necesitan poder acceder, ya sabes, a esa dirección web donde vive WordPress porque está haciendo toda la renderización, ¿verdad? Tus visitantes del sitio necesitan visitar eso. Cuando tienes un enfoque decoupled, eso ya no es el caso. Puedes hacer algunos trucos donde bloqueas el acceso al administrador de WordPress mientras dejas que tus visitantes del sitio vean la aplicación JavaScript de front-end aquí. Y el último en esta lista es la mejora de la developer experience.

2. Headless WordPress: Beneficios y Desventajas

Short description:

Cuando se utiliza un enfoque sin cabeza, puedes elegir un framework de front-end para construir componentes y tener una buena experiencia de desarrollo. Sin embargo, existen desventajas, como la complejidad adicional, la necesidad de recrear algunas funciones integradas de WordPress, la incapacidad de utilizar plugins de WordPress para elementos visuales y la incapacidad de utilizar las nuevas funciones de edición de sitio completo. Ahora, sumerjámonos en el contenido de la masterclass, comenzando con la configuración. Exploraremos las páginas de la aplicación terminada, convertiremos WordPress en un servidor GraphQL, configuraremos el entorno de desarrollo local y configuraremos Apollo Client. Luego, pasaremos a la parte de construcción de características, donde cubriremos temas como componer una consulta GraphQL, implementar páginas específicas y aprovechar los fragmentos de GraphQL si el tiempo lo permite.

Yo diría que en estos días, muchos de nosotros en la comunidad de desarrollo web realmente apreciamos y nos gusta construir en una arquitectura basada en componentes. Dado que estás en la Cumbre de React, supongo que te gusta React y te gusta construir en una arquitectura basada en componentes, ¿verdad? Si optas por un enfoque sin cabeza, puedes elegir un framework de front-end para facilitar las cosas y luego construir en componentes y tener una experiencia de desarrollo realmente agradable, lo cual puede ser otra ventaja.

Muy bien, desventajas. Revisemos esta diapositiva y luego revisaré el chat aquí para ver si tenemos alguna pregunta. Una es la complejidad adicional. Por lo tanto, tienes algunas piezas más en movimiento. En lugar de solo WordPress, ahora tienes el sitio de WordPress, que proporciona datos. Y luego tienes tu aplicación de front-end, que consume esos datos. Por lo tanto, hay algunas piezas más en movimiento que gestionar.

A continuación, la desventaja sería que requiere recrear algunas funciones integradas de WordPress. Algunos ejemplos aquí serían la autenticación de usuarios y las vistas previas de publicaciones. En el WordPress tradicional, un creador de contenido puede crear un nuevo borrador de blog y una publicación, escribir un poco de contenido y luego hacer clic en un botón para previsualizar esa publicación y ver cómo se vería en el front-end si se publicara. Ese tipo de cosas no se obtienen de forma gratuita. Si separas tu front-end de tu back-end, ahora no tienes una forma de autenticar al usuario y saber si tienen permiso para ver un borrador no publicado de una publicación, por ejemplo. Algunas soluciones preconstruidas que las personas han creado en WordPress para agregar esa funcionalidad a Headless. Pero debes saber que no es algo que esté fuera de la caja, es decir, debes pensar un poco en cómo voy a agregar esta función a mi arquitectura desacoplada.

La tercera aquí es que no puedes usar plugins de WordPress para agregar elementos visuales. A algunas personas les gusta tener un control total sobre su propio sitio web. Entonces, si construyes un sitio para, por ejemplo, una pequeña tienda en la calle, y quieren poder administrar el sitio ellos mismos, es posible que deseen la capacidad de agregar un complemento de WordPress e agregar un control deslizante de imágenes o algo similar en el front-end del sitio, y eso ya no se puede hacer con un enfoque sin cabeza. No puedes simplemente activar un complemento que agregue elementos visuales a la página porque todos esos elementos visuales están controlados por tu aplicación JavaScript desacoplada, ¿verdad? Así que eso tiene sentido.

Esto puede no ser una desventaja, dependiendo de tu proyecto. Muchas veces no quieres que el cliente mismo agregue todo tipo de elementos visuales a la página todo el tiempo y potencialmente afecte el rendimiento y ese tipo de cosas, por lo que esto también podría verse como una ventaja porque tienes las cosas más controladas y organizadas en cuanto a lo que se renderiza.

Y el último que tengo aquí es que no puedes usar las nuevas funciones de edición de sitio completo. WordPress 6.0 acaba de ser lanzado y tiene nuevas funciones de edición de sitio completo que están orientadas a esa persona que mencioné, donde el propietario del sitio web mismo quiere tener un control completo sobre el sitio web y la capacidad de crear diseños por sí mismo utilizando una especie de experiencia de constructor de páginas. Esas son las funciones de edición de sitio completo que están llegando a WordPress, que habilitan ese tipo de flujo de trabajo. Sin embargo, si optas por un enfoque sin cabeza o desacoplado, no podrás hacer eso porque, nuevamente, la renderización está controlada por la aplicación JavaScript de front-end. Eso podría ser una desventaja para algunos proyectos, pero tener un control estricto sobre lo que se renderiza también podría ser una ventaja, como mencioné.

Muy bien, déjame hacer una pausa por un momento y abrir el chat para ver qué tenemos. Muy bien. Leyendo los comentarios aquí. Sí, puedo poner el enlace de GitHub en el chat, así que déjame hacer esto. Ah, muy bien, así que puse el enlace al repositorio de GitHub en el chat. Sin embargo, no deberías necesitar ese enlace directo porque deberías poder abrir las diapositivas que compartí a las 10:05, mi hora, 10:05 en el chat. Pero copiaré ese enlace nuevamente también. El enlace a las diapositivas, ahí vamos. Así que puse el enlace a las diapositivas en el chat también si eso es útil para alguien. Veamos, oh veo que algunos de ustedes también compartieron el enlace de GitHub, gracias por hacerlo. Me ahorraron el problema, muy bien. Continuemos con esto. Luego tengo, sí, un par más. Eso fue todo en las diapositivas en cuanto a cómo Headless WordPress es diferente de WordPress tradicional y luego los beneficios y desventajas, ahora continuaré con esta presentación. Lo siguiente después de los beneficios y desventajas aquí fue vamos a codificar. En este punto, podemos sumergirnos en nuestra masterclass y hablar sobre lo que vamos a construir juntos hoy. Muy bien, esto es lo que cubriremos. Así que aquí está el contenido de la masterclass, lo llamo la parte de configuración. Entonces, lo que haremos es abrir nuestra aplicación terminada y ponerla en marcha en un navegador. Y veremos tanto las páginas que tiene como el código que alimenta cada una de esas páginas. Por lo tanto, en primer lugar, haremos un recorrido por las páginas de nuestra aplicación terminada. En segundo lugar, veremos cómo podemos convertir WordPress en un servidor GraphQL con el complemento WP GraphQL. En tercer lugar, configuraremos el entorno de desarrollo local. Algunos de ustedes que clonaron el proyecto y siguieron los pasos en el archivo readme ya han hecho parte de ese trabajo, por lo que eso les ahorrará tiempo una vez que lleguen a ese paso. En cuarto lugar, configuraremos Apollo Client. Ese es el cliente GraphQL que vamos a utilizar en nuestra aplicación Next.js para extraer datos de nuestro backend de WordPress. Una vez que hayamos terminado con esto, nuestra parte de configuración, luego pasaremos a la parte de construcción de características. Por lo tanto, cubriremos estas cosas aquí. Entonces, el quinto en la lista es componer una consulta GraphQL utilizando el entorno de desarrollo integrado gráfico. Te mostraré cómo puedes hacer eso. Y luego, del sexto al noveno, aquí se trata de implementar páginas específicas de nuestra aplicación. Tenemos la página de índice del blog o la página de inicio del blog, tenemos la página de una sola publicación de blog. El número ocho, tenemos una página de una sola categoría. El número nueve será divertido, esa es nuestra página de búsqueda, donde, en lugar de pre-renderizar una página estática de antemano, como podríamos hacer con algunas de estas otras páginas, la búsqueda se renderizará sobre la marcha. A medida que el usuario escribe algo y presiona un botón, enviaremos una solicitud en tiempo real a nuestro backend para encontrar publicaciones de blog que coincidan y luego volveremos a renderizar la página para mostrar las publicaciones de blog que coincidan. Veremos cómo podemos hacer eso. Y luego el número 10, si tenemos tiempo, si llegamos a eso, veremos cómo aprovechar los fragmentos de GraphQL. De esta manera, podemos reducir el código repetitivo y tener partes de nuestras consultas de GraphQL desvinculadas de los componentes que realmente las utilizan. Con un fragmento de GraphQL, podemos tener un solo componente de React y colocar los datos que necesita junto con el propio componente. Por lo tanto, hace que tu base de código sea muy agradable y organizada. Veremos cómo podemos hacer eso si, nuevamente, si tenemos tiempo para llegar al paso nueve. Si no, sin embargo, si solo llegamos al paso nueve, creo que aún será muy beneficioso en una masterclass útil ver cómo construyes cada una de las páginas que cubriremos aquí. Muy bien, y después de eso, la última diapositiva de esta presentación son enlaces útiles. A medida que avanzamos en la masterclass, haré referencia a estas cosas. Por lo tanto, el número uno ya lo he mencionado, ¿verdad? Ese es el repositorio de la aplicación Next.js. Pero los números dos a siete aquí son cosas. A medida que avanzamos, simplemente haré referencia a los enlaces en esta página para que puedas hacer clic en ellos para abrirlos. Para sumergirnos en esto, lo primero que haremos es clonar ese repositorio como dije. Entonces, con suerte, la mayoría de ustedes ya lo han hecho, pero si no, pueden hacer clic en el enlace para abrir este repositorio de código. Y solo necesitaremos seguir los pasos en este archivo readme aquí. Por lo tanto, clonar el repositorio, ingresarás al directorio y ejecutarás npm install para instalar las dependencias. Y en realidad, el resto lo haré contigo aquí. Así que sumerjámonos. En la línea de comandos aquí, puedes ver que ya he clonado este proyecto yo mismo aquí en mi escritorio, y ahora ejecutaré npm install solo para asegurarme de que todas las dependencias del proyecto estén instaladas, ¿de acuerdo? Y una vez que estén, continuaremos con el resto de los pasos aquí. Simplemente dice, crea un nuevo archivo.env.local en la carpeta raíz con esto como su contenido. Muy bien, hagamos eso. Entonces, abramos nuestro proyecto en una ventana de VS Code. Permíteme redimensionar esto para nosotros. Ahí vamos, muy bien. Siguiendo las instrucciones aquí, haré clic derecho aquí y simplemente iré a nuevo archivo. Lo llamaré.env.local. Y dentro de esto, vamos a poner una variable de entorno. Copiaré eso y luego lo pegaré en este archivo.

Watch more workshops on 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
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.
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.
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
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
WorkshopFree
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

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

Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
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.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced 2023React Advanced 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
El Nuevo Enrutador de Aplicaciones de Next.js
React Summit 2023React Summit 2023
27 min
El Nuevo Enrutador de Aplicaciones de Next.js
Today's Talk is about the Next.js App Router, which has evolved over the years and is now a core feature of Next.js. The Talk covers topics such as adding components, fetching remote data, and exploring layouts. It also discusses submitting form data, simplifying code, and reusing components. The App Router allows for coexistence with the existing pages router and enables data fetching at the layout level using React Server Components.
No sabes cómo hacer SSR
DevOps.js Conf 2024DevOps.js Conf 2024
23 min
No sabes cómo hacer SSR
The Talk covers the speaker's personal journey into server-side rendering (SSR) and the evolution of web development frameworks. It explores the use of jQuery for animations in SSR, the challenges faced in integrating React with Umbraco, and the creation of a custom SSR framework. The Talk also discusses the benefits of Next.js and the use of serverless artifacts for deployment. Finally, it highlights the features of Astro, including its function per route capability.