Construye con SvelteKit y GraphQL

Rate this content
Bookmark

¿Alguna vez has pensado en construir algo que no requiera mucho código repetitivo y tenga un tamaño de paquete pequeño? En este masterclass, Scott Spence irá desde el 'hola mundo' hasta cubrir el enrutamiento y el uso de endpoints en SvelteKit. Configurarás una API GraphQL en el backend y luego usarás consultas de GraphQL con SvelteKit para mostrar los datos de la API 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 aquellos interesados en Svelte que no tienen mucha experiencia con SvelteKit y desean una comprensión más profunda de cómo utilizarlo en aplicaciones prácticas.

Tabla de contenidos:
- Inicio y presentación de Svelte
- Inicializar el proyecto frontend
- Recorrido por el proyecto esqueleto de SvelteKit
- Configurar el proyecto backend
- Consultar datos con GraphQL
- Obtener 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
- Enviar mutaciones de GraphQL a través de SvelteKit
- Preguntas y respuestas

140 min
08 Dec, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Este masterclass se centra en el uso de Svelte y SvelteKit para construir un CMS basado en GraphQL. Cubre la configuración del proyecto, la configuración y el trabajo con GraphCMS. El masterclass también explora cómo obtener datos de los endpoints, estilizar con SvelteAdd y trabajar con datos de publicaciones de blog y enrutamiento. También se discuten la solución de problemas de la configuración de Tailwind CSS y el despliegue con Versel.

Available in English

1. Introducción a Svelte y Agenda

Short description:

Hola, mi nombre es Scott. Somos uno de los primeros CMS basados en GraphQL. Estamos totalmente enfocados en GraphQL. Echemos un vistazo rápido a la agenda. Crearemos un frontend y un backend. Consultaremos datos con GraphQL. Mostraremos datos en nuestro proyecto Svelte. Gestionaremos datos con directivas de Svelte. Hablaremos sobre el enrutamiento en Svelte y los puntos finales. Cubriremos la implementación en producción. Svelte es un framework de compilación que genera HTML, CSS y JavaScript. SvelteKit es la solución integral para construir proyectos en Svelte.

Hola, mi nombre es Scott. Soy un Defensor del Desarrollador en GraphCMS. Somos uno de los, si no el, único, perdón, el primero, tipo de CMS basado en GraphQL que existe. Estamos totalmente enfocados en GraphQL y eso es básicamente cómo entregamos nuestro contenido a nuestros usuarios. Así que echemos un vistazo rápido a la agenda. Y sé que no he actualizado la fecha en estas diapositivas. Se muestra como [FECHA]. Así que vamos a crear un frontend y un backend. Vamos a ver cómo consultar datos con GraphQL. Vamos a ver cómo mostrar esos datos en nuestro proyecto Svelte. Echaremos un vistazo rápido a las directivas de Svelte para gestionar datos en el archivo Svelte, una vez que lleguen al componente. Vamos a hablar sobre el enrutamiento en Svelte, junto con los puntos finales. Y vamos a ver cómo implementar en producción, si tenemos suficiente tiempo. Ok, ¿qué es Svelte? Es un framework de compilación que te permite dividir tus proyectos en dos componentes, al igual que Vue y Angular. Lo que es diferente en Svelte en comparación con Vue es que no hay un DOM virtual. Svelte genera HTML, CSS y JavaScript en el paso de compilación, por lo que lo que el navegador recibe es simplemente HTML, CSS y JavaScript, fácil de gestionar. Svelte no es particularmente nuevo, la versión 1 se lanzó a finales de 2016, alrededor de noviembre, creo. Así que me voy a centrar en SvelteKit. Será la solución integral para construir proyectos en Svelte.

2. SvelteKit y Configuración del Proyecto

Short description:

En este momento, si vas a crear un nuevo proyecto con SvelteKit, todavía está en beta pública. SvelteKit proporciona las mejores prácticas modernas de desarrollo web de forma predeterminada, incluyendo la división de código y el enrutamiento. Svelte es como React para veganos, ofrece puntos finales HTTP y enrutamiento basado en archivos. Svelte también introduce Visvelte, un subconjunto de HTML, que permite la reactividad dentro de los componentes. La directiva each se utiliza para iterar sobre objetos. Pasemos al frontend e inicialicemos un proyecto Svelte usando la terminal. Utilizaremos Versel como objetivo de implementación. El proyecto incluye un README, package.json y un archivo de configuración JS para definir rutas. También configuraremos el archivo prettier.

Una parada para construir cualquier proyecto en Svelte. Así que en este momento, si vas a crear un nuevo proyecto con SvelteKit, en next, Svelte en next y dale un nombre al proyecto. Una vez que llegue a la versión 1, porque SvelteKit todavía está en beta pública, una vez que llegue a la versión 1, en next desaparecerá y todos construirán proyectos en Svelte de esa manera. Así que hay prácticas modernas de desarrollo web incorporadas en SvelteKit. Tiene la división de código integrada y el enrutamiento basado en archivos y todas las cosas agradables a las que los desarrolladores frontend estamos acostumbrados. Así que Svelte es React para veganos. Me encanta. Obtienes puntos finales HTTP. Vamos a profundizar en ellos. Así que tienes puntos finales HTTP, obtienes tus get, qué puntos finales HTTP, get, put, delete. Pero no es delete, porque delete es una palabra reservada en JavaScript, así que es solo DEL. Así que puedes gestionar cosas de esa manera, lo cual es genial. Ya he cubierto el enrutamiento basado en archivos. Y es muy similar a NextJS o Next. Pero usas esto en lugar de React o Vue. De acuerdo. No creo que haya enviado los recursos para esto. Así que voy a pasar por alto esto y saltar a la siguiente diapositiva aquí.

Entonces, Visvelte, que no cubrí, es un subconjunto de HTML. Así que esto se verá muy familiar si vienes de un fondo de HTML, CSS y JavaScript, donde podemos definir cosas en algunas etiquetas de script aquí. Podemos definir nuestra variable de conteo y luego incrementarla y decrementarla con, lo siento, solo incrementarla aquí con el on click para nuestro botón aquí. Y tenemos declaraciones. Así es como manejamos los cambios de estado dentro de un componente. Usamos esta sintaxis de dos puntos de dólar aquí. Si no estás familiarizado con ella, sé que puede parecer un poco extraña, pero esto es como una etiqueta de JavaScript. Es un JavaScript válido. Pero no se usa en ningún lugar. Así que Rich Harris y el equipo han decidido utilizar esto para la reactividad dentro de los componentes. Así que tenemos directivas aquí, tenemos un bloque if. También podemos usar else. Usamos las llaves para definir nuestra directiva y luego podemos empezar a trabajar con ella dentro de esas. Vamos a empezar a usarlas en nuestro proyecto muy pronto. Así que, sí, esto va a ser como la carne y las papas para la directiva each que simplemente se usa para iterar sobre bloques, como para iterar sobre objetos. Así que empecemos. Creo que estas diapositivas son solo de relleno. Vamos directo al frontend. Voy a necesitar una terminal. ¿Está todo bien con, vamos a aumentar un poco el tamaño de fuente aquí. A ver. ¿Todos ven bien la pantalla? Pulgar arriba de Robert, gracias. Bien, vamos a entrar en mis proyectos de ejemplo aquí. Y voy a NPM init Svelte next y lo que voy a hacer aquí, vamos a decir computation.v1. Código postal para 2021, vamos a ver, esto va a crear nuestros proyectos Svelte dentro de una carpeta definida como GraphQL Galaxy Workshop 2021, así que presionemos enter aquí. Y primero voy a decir proyectos esqueleto. No vamos a usar TypeScript ni ES Lint. Si entro en la carpeta del taller ahora, entro aquí, simplemente cambió mi vista. Si alguien tiene algún problema, solo avísenme, posiblemente en Discord, aquí en este canal. Muevo esto hacia un lado. Volvamos a encenderlo aquí. Bien, echemos un vistazo rápido a este proyecto aquí. Así que si entro en VS Code, mi editor de código. Bien, tenemos nuestra configuración de Svelte. Esta es una nueva adición al inicio de Svelte Kit. Esto es Adapto Auto. En el pasado, todavía necesito investigar esto, pero sé que para los propósitos de esto creo que estará bien. Con Svelte Kit, no tiene realmente ninguna opinión sobre los objetivos de implementación, así que hay varios disponibles. Veamos si podemos conseguir uno aquí. Y de nuevo, si hay algún problema, avísenme, voy a intentar hacerlo lo más grande posible aquí. Y aquí vamos, Adaptadores. No estoy seguro si estos se han actualizado desde el inicio de este adaptador también aquí, pero tenemos entornos de compilación para Netlify, Versel y Cloudflare, y por supuesto puedes crear tu propio adaptador si ninguno de esos encaja. Para los propósitos de este taller, creo que solo usaré Versel, y si hay algo específico que necesites saber sobre los demás, si vas a hacer una compilación estática pura, también hay algunas cosas a tener en cuenta, así que avísame si necesitas información al respecto. De todos modos, siguiendo adelante, tenemos nuestro README, tenemos nuestro package.json aquí, todo está instalado como una dependencia de desarrollo. No hay tiempo de ejecución. Estoy hablando, en realidad estoy mirando mi cámara, y me doy cuenta de que no hay cámara, así que dejaré de hacer eso. Tenemos un archivo de configuración JS aquí. Esto es para que podamos definir nuestras rutas cortas para nuestra librería, también podemos poner componentes, cualquier otra cosa que quieras definir esto nos dará un poco de azúcar sintáctico para importar archivos en nuestros proyectos. Tenemos un archivo prettier aquí. Voy a reemplazar esto con mi propia configuración.

3. Configuración del Proyecto

Short description:

Utilizo pnpm para ahorrar espacio en disco. Tenemos nuestra configuración de prettier y git ignore configuradas. El archivo HTML de la aplicación es donde se construye el proyecto. Svelte tiene su propia API de head.

También voy a necesitar instalarlo. Así que utilizo pnpm. No es necesario utilizar pnpm, puedes usar npm, o yarn o lo que prefieras. Simplemente me gusta ahorrar espacio en disco con pnpm. Así que solo voy a esperar a que se instale, ya está hecho. Y si guardo esto, también debería formatearlo para mí. Genial. Tenemos nuestra configuración de prettier, tenemos un git ignore donde el archivo .env ha sido ignorado ahora, lo cual es genial. Así que tenemos un archivo estático. Creo que lo estamos usando para el favicon. Echemos un vistazo aquí. Sí, aquí está. Así que tenemos nuestro archivo HTML de la aplicación aquí. Y aquí es donde se construye todo el proyecto una vez que ejecutamos Svelte build. Se construye en el cuerpo de Svelte aquí, al igual que lo harías con tu ID de la aplicación, como lo harías con React. No estoy seguro cuál es la convención para un framework como el que tienes y también está el componente head aquí. Svelte tiene su propia API de head.

4. Configuración del Frontend y Backend

Short description:

La mayoría del trabajo se realiza dentro de la carpeta raíz. Tenemos nuestro archivo de índice, que es un index.svelte. Vamos a ejecutarlo y ver el Hola Mundo en SvelteKit. Puedes usar argumentos como dash p para los puertos y dash o para abrirlo. Ahora vamos a configurar el backend. Si quieres seguir el proceso, puedes usar gitpod.io y la URL del repositorio proporcionado.

Todo lo que uses con eso se agrupa aquí también. De acuerdo. Y aquí es donde la mayoría del trabajo se realizará dentro de esta carpeta raíz. Tenemos nuestro archivo de índice aquí que es un index.svelte. Y este es nuestro Hola Mundo. Vamos a ejecutar esto y ¿tengo algo más en ejecución? ¿Dónde está mi ventana? Tenemos nuestro Hola Mundo en SvelteKit. Un par de cosas más aquí es que puedes agregar algunos argumentos como puedes ver que ya he hecho aquí. Entonces el guión guión p es para los puertos. También puedes elegir abrirlo. Ahora se abrirá la pestaña para nosotros. Prefiero que se acorten solo a dash p y dash o para abrirlo. Aunque no voy a usar eso. Así que tenemos nuestro frontend. Vamos a configurar nuestro backend ahora.

Hola, Michael. ¿Puedo pasar el enlace al repositorio? No hay un repositorio. Lo estoy construyendo desde cero. Entonces, si quieres comenzar rápidamente, déjame ir a GitHub aquí. Ya tengo ese esqueleto preconstruido. Así que si tomas esto, déjame ponerlo en el chat aquí. Si quieres seguir el proceso y tener un entorno, puedes usar algo llamado gitpod. Ve a gitpod.io, y luego barra diagonal, y luego puedes ver que ya lo he reutilizado antes, y luego agrega la URL de este repositorio aquí. Si presionas enter, comenzará a configurar el esqueleto para ti, para que puedas seguir el proceso desde allí. Así que vamos a poner esto aquí para todos. Si quieres seguir el proceso de esa manera, puedes hacerlo. No estoy muy familiarizado con Gitpod, así que estoy bastante seguro de que no tiene PMPM, pero creo que puedes instalar MPM desde aquí e instalar lo que creas necesario.

5. Configuración del Proyecto GraphCMS

Short description:

Voy a empezar por el backend ahora y usar una cuenta de demostración de app.graphcms.com. Cuando inicies sesión en tu cuenta de GraphCMS, verás proyectos de inicio para blogs. Selecciona 'crear proyecto' y elige el centro de datos de Londres. Esto creará un nuevo proyecto de GraphCMS basado en la plantilla de blog.

De acuerdo, ¿dónde me quedé? Voy a empezar por el backend ahora, así que solo cierra sesión en esto. De acuerdo, genial. Solo voy a usar una cuenta de demostración aquí. Así que desde app.graphcms.com, si no te has registrado, ahora es un buen momento para hacerlo. Puedes autenticarte con GitHub, o puedes crear una cuenta y autenticarte a través de tu correo electrónico una vez que recibas una confirmación enviada a ti.

Cuando inicies sesión en tu cuenta de GraphCMS por primera vez, verás que hay algunos proyectos de inicio aquí. Tenemos uno para un blog, y esto simplemente creará el esquema y todos los modelos y tipos de datos que necesitamos para empezar a trabajar en nuestro proyecto. Esto se ha hecho en el pasado para Gatsby con Tailwind. Nos vamos a centrar en construir un proyecto en SvelteKit.

Voy a decir, crear proyecto aquí, y puedes darle una descripción. Mantén estas casillas marcadas, si vas a trabajar en ello conmigo. Esto ya incluye contenido en una plantilla. Si desmarcas esto, entonces tendrás que añadir contenido tú mismo. Y para los propósitos de esta masterclass, debido a las limitaciones de tiempo que tenemos, es bueno dejarlo ahí. Y te dará una idea general de cómo trabajar con ello. Si tienes alguna formación específica que te gustaría compartir, siempre puedes hablar con nosotros, y estaremos encantados de responder a todas tus preguntas.

Así que si esa es la idea general de cómo trabajar con ello, voy a elegir el centro de datos de Londres, porque es donde estoy ubicado, puedes elegir el más cercano a ti. Voy a decir, Crear Proyecto. Y esto simplemente creará un nuevo proyecto de GraphCMS para nosotros. Y básicamente a partir de eso, esa plantilla de blog. Así que disculpen, mientras tomo un poco de café. Esta es esa plantilla de blog. Así que voy a crear algunos nuevos artículos. Así que tengo que pensar en lo que quiero hacer más. Una de las razones es porque quiero obtener bienes raíces. Y esa es probablemente una de las razones más importantes por las que quiero ir por bienes raíces. Pero luego quiero crear un proyecto que quiero ver más en el futuro.

6. Configuración del Proyecto GraphCMS

Short description:

Voy a crear una buena asignación para mí mismo con el plan comunitario. No tiene que llegar a $300 al mes. El panel de control del proyecto tiene los tipos de esquema para autor, página, publicación y SEO. Nos centraremos en autor, página y publicación. Podemos editar cualquier contenido en el esquema, incluyendo las relaciones. El contenido predefinido incluye una página de acerca de y algunas publicaciones. Los activos en GraphCMS tienen su propio tipo de contenido. El playground proporciona consultas y mutaciones autocompletadas. Trabajaremos con las publicaciones y recuperaremos campos específicos. Pasemos al frontend de nuestro proyecto.

De acuerdo, voy a crear una buena asignación para mí mismo con el plan comunitario. No tiene que llegar a $300 al mes. Si necesitas algo adicional, puedes ponerte en contacto con el equipo de ventas y llegar a un acuerdo si necesitas algo adicional además del plan comunitario. Pero hay mucho aquí, lo cual debería ser suficiente por un buen tiempo. De todos modos, solo voy a seleccionar ese plan. Invitaré a mis compañeros de equipo más tarde. Y aquí tengo el panel de control del proyecto.

Entonces, aquí a la izquierda es donde estoy actualmente. Está el esquema. Así que aquí tengo un tipo de esquema para autor, página, publicación y SEO. Para los propósitos de esta masterclass, probablemente solo nos centraremos en autor, página y publicación aquí. El SEO no es realmente necesario para esto, pero cada uno de estos modelos tiene su propio tipo de datos, que puedes seleccionar aquí. Una cosa con, digamos, la publicación aquí, este identificador URL amigable con el slug es genial. Esto generaría la información del slug a partir de otras partes de la plantilla, por ejemplo, podría tenerlo como el título, digamos, y el nombre del autor. Y eso generaría un slug único para eso. Esta es una gran opción, que recomendaría, pero en realidad no viene en esta plantilla aquí, así que solo tenemos este campo de slug, que es una línea de texto. De hecho, déjame ver si puedo editar esto y cambiarlo a slug. Genial. Esta opción aquí arriba te permite cambiar el tipo de campo. Así que solo voy a cambiar eso a slug y luego en la validación, oops, lo siento, voy a decir generar slug a partir de la plantilla y voy a decir slug aquí y desplazarme hacia abajo aquí actualizar. ¿El tamaño de pantalla está bien para todos? ¿Necesitan que lo aumente un poco? De acuerdo. Ahora está un poco lleno, pero espero que puedan verlo mejor. De acuerdo. Ese es nuestro esquema y aquí, podemos editar cualquier contenido en ese esquema. Tenemos un par de autores en este momento. Tenemos a Ronak aquí, tenemos su imagen, tenemos su título, tenemos su biografía, que está vacía y tenemos un par de publicaciones relacionadas. De hecho, volvamos a eso en el esquema. Así que si vamos a autor aquí, hay este campo de relación y si me desplazo hacia abajo aquí, puedes seleccionar una referencia y puedes conectar, puedes conectar relaciones. Así que podríamos decir, si es una relación uno a uno, por ejemplo, Ronak solo puede tener una publicación, lo cual no parece correcto para un blog. Podemos decir que un autor puede tener muchas publicaciones o muchos autores pueden tener muchas publicaciones. Echemos un vistazo rápido a esto. Así que no quiero que esto sea como yo vendiendo las características de GraphCMS. Esto es solo nuestro backend, desde el cual vamos a trabajar. Echemos un vistazo a la publicación. Sí, así es como lo harías. Así que puedes decir referencia bidireccional aquí y podríamos tener, verificar eso. Así que un autor puede tener muchas publicaciones y también puedes hacerlo al revés. Así que puedes tener varios autores por publicación y varias publicaciones por autor. De todos modos, sigamos adelante. Lo siento, estamos revisando el contenido en este momento. Tenemos este contenido predefinido para nosotros. Tenemos una página de acerca de y luego tenemos algunas publicaciones aquí también. Y también tenemos los activos. Los activos en GraphCMS tienen su propio tipo de contenido. Podemos agregar campos adicionales aquí si es necesario. Pero solo voy a seguir adelante. Tenemos nuestro playground. Cuando definimos ese esquema, GraphCMS creó todas las consultas, todas las mutaciones que vamos a necesitar para trabajar. Así que como primer intento, si presionas control espacio, aparece esto, ¿qué es? Inteligencia. Y voy a querer seleccionar publicaciones. Solo presiono Control Enter. Se autocompletará para nosotros. Así que voy a querer algo como, espera déjame encontrar lo que vamos a necesitar. Um. Vuelvo en un segundo. Um. De acuerdo. Así que voy a tener el título de la publicación. El slug. Las fechas en que se publicó. Um? Y el extracto de la publicación. ¿Tiene alguna etiqueta relacionada? Y la imagen de portada. Luego aquí podemos decir que solo queremos la URL por ahora. Si entro en. Uhm? Va a omitir esa fuerza de datos. Así que esta es una publicación aquí. Um, luego la siguiente.

7. Obteniendo Datos del Endpoint con el Cliente GraphCMS

Short description:

Asegurémonos de que todos estén bien. Volvamos al proyecto. Voy a instalar algunas dependencias, incluyendo una solicitud GraphQL. Veamos cómo obtener algunos datos de nuestro endpoint. Vamos a definir un módulo de script y crear un cliente GraphCMS.

Y luego en adelante estoy y eso es lo que vamos a ver cómo hacer en el frontend de nuestro proyecto. Ahora, déjame revisar el chat. Asegurémonos de que todos estén bien. ¿Alguna pregunta hasta ahora de alguien? Uhhm? Así que todos pueden escucharme si veo que todos están silenciados. Uhm, no tengo mis auriculares puestos, así que si necesitan decir algo, como dije antes, solo déjenme un mensaje en Discord o en el chat de Zoom aquí y tal vez pueda responderlo, de todos modos volvamos al proyecto aquí.

Entonces, lo que voy a hacer. Es instalar algunas dependencias, así que estoy bastante seguro de que no quieren ver todas mis aplicaciones abiertas, déjenme cambiar esto rápidamente, uhm. Bien, así que dos es mi monitor principal ahora. Bien, así que dos es mi monitor principal ahora. Voy a necesitar instalar un par de dependencias. Voy a usar una solicitud GraphQL para obtener la información que necesitamos, así que. Una solicitud GraphQL creo que es como un envoltorio HCP para tus llamadas GraphQL. Y esto viene preempaquetado con la etiqueta de lenguaje GraphQL, creo, ¿necesitamos instalarlo por separado? No, estamos en Discord. Ciérralo. Solo instala esto. No, voy a usar mi npm. De acuerdo, aumentemos esto. Ahora tengo tantas ventanas abiertas, ¿dónde se fue el chat? Y... Umm. Umm. Umm. Umm. Umm. Umm. Umm. Umm. Umm. De acuerdo, disculpas.

De acuerdo, lo siento. Umm. Umm. No puedo encontrar la llamada de Zoom. Lo siento. Umm. Umm. Umm. Si alguno de ustedes está tratando de comunicarse. Ja ja. Umm. No puedo encontrar el chat. No eso. O eso. A menos que no sea eso. ¿No se mantiene eso? No puedo encontrar el chat. Bien. Disculpen por todo eso. Disculpa por eso. ¿A dónde se fue? Lo tengo. Lo tengo. Así que lo siento, todos dejaron de compartir mi pantalla porque no podía entender qué estaba pasando. Bien. Vuelvo a compartir mi pantalla. Y... mi panel de código de respaldo. Bien. Listo para... Bien. Veamos cómo obtener algunos data de nuestro endpoint. Entonces vamos a definir... un módulo de script aquí. El módulo de contexto. Así es como puedo usar la función de carga de Svogit. Así que esto... no es una función asíncrona. Esto es una función asíncrona. Así que puedo tener esto como una carga. Y esto es asíncrono. Y desde aquí, voy a necesitar... En realidad, lo dejaré así por ahora. Y aquí es donde puedo crear un cliente GraphCMS. Y esto va a ser un nuevo cliente GraphQL.

8. Solicitudes GraphQL y Configuración del Cliente

Short description:

Instalé las solicitudes GraphQL y GraphQL, pero no obtengo la IntelliSense esperada. Tendré que importarlo manualmente y definir la URL del cliente para mi proyecto de Graph CMS. También crearé una consulta para obtener las publicaciones y pasarla al cliente. Por último, devolveré las publicaciones como props y las mostraré en la página de inicio.

Y estoy bastante seguro de que lo instalé. Volvamos a las solicitudes de GraphQL y GraphQL. Correcto. Debería obtener la IntelliSense de eso, pero no lo estoy obteniendo. Tendré que importarlo nuevamente. Tendré que importarlo manualmente. Salto. El cliente. Y esa no es la URL de mi proyecto. Quiero obtener la URL de mi proyecto de Graph CMS. Vuelvo a eso, que está aquí. Bajo a la configuración del proyecto aquí. Hay una configuración de acceso a la API. Entonces, con esta plantilla, estos permisos ya han sido habilitados para nosotros. Si estás configurando un nuevo proyecto, tendrás que hacer clic en el botón de crear permiso aquí. Eso te dará la opción de crear los valores predeterminados, que es lo que estos son. Así que voy a copiar esto. Lo pondré como la URL. También hay una configuración de encabezados aquí. Lo dejaré vacío por ahora. Solo déjalo completamente. Y ahora tengo mi cliente definido. También puedo encontrar una consulta para usar con eso. Quiero obtener las publicaciones. Entonces, ahora voy a hacer una consulta por ahora. Esto va a ser la etiqueta gql. Puedes ver que también se importa aquí. Así que en estas comillas invertidas aquí, Copilot está haciendo un buen trabajo aquí para todas las publicaciones, ID, contenido, creado. Pero voy a desactivar esto porque está molestando. Y voy a volver a mi proyecto aquí. Y obtener esta consulta y ponerla aquí. Con esa consulta, voy a querer pasarla a mi cliente. Y voy a querer obtener las publicaciones, que son las publicaciones aquí. Voy a esperar el resultado del cliente pasando esta consulta aquí. Así que eso está bien, pero voy a necesitar devolver esa información como props. Vamos a poner las publicaciones aquí. Así que ahora tengo esa información, que estoy obteniendo antes de que se cargue la página aquí. En realidad, podría, voy a salir de aquí, y voy a ir a mi terminal, y ejecutar el servidor de desarrollo. Verás que imprime el mismo objeto que obtuvimos en la consulta aquí. Así que ahora puedo usar esto en esta página, pero voy a necesitar llevar estas publicaciones a la página, y puedo hacerlo con una etiqueta de script, y es exportar let. Así que si eso se ve un poco extraño, exportar let cuando está llegando. Solo voy a decir que está bien. Así es como recibes props en Svelte. Así que ahora, si digo, poner esto en una etiqueta pre aquí, e imprimir eso en la publicación, iremos al proyecto. Sea lo que sea, aquí vamos en localhost. Así que tienes la información mostrada en nuestra página de inicio. Genial, eso se ve bien, no, trabajemos en ello y usemos la directiva each de Svelte o simplemente recorramos las cosas y hagamos una tarjeta para cada una aquí, digamos. Así que volvamos al chat. ¿Todos bien, alguna pregunta de alguien? ¿Algo que necesite repasar? ¿Va demasiado rápido, demasiado lento? Solo avísame.

9. Trabajando con Contenido y Diseño en SvelteKit

Short description:

Trabajemos con el contenido. ¿Quieres ver algún estilo? Si no, podemos continuar tal como está. Repasemos los pasos que hemos seguido. Comenzamos inicializando un nuevo proyecto de Svelte Kit, instalamos las dependencias y creamos un 'Hola Mundo'. Instalamos la solicitud de GraphQL y la implementación de JavaScript de GraphQL. Usamos la función 'load' de SvelteKit para obtener datos del punto final de GraphQL en GraphCMS. Definimos una consulta y la pasamos al cliente de GraphQL. Desestructuramos las publicaciones del resultado y las devolvemos como props. El código está en el módulo de contexto del script. El archivo de diseño en SvelteKit se llama 'slot'. Envuelve información persistente en todo el proyecto. La etiqueta de estilo en el archivo de diseño es donde puedes tener componentes persistentes como un encabezado y un pie de página.

De acuerdo, muy bien. Así que trabajemos con algo de este contenido ahora. Para los propósitos de esto, ¿quieres ver algún estilo? Porque si fuera a hacer algún estilo, probablemente solo usaría Tailwind solo por la rapidez con la que podría avanzar. Y probablemente solo copiaría y pegaría algunas clases y cosas así para que se vea un poco más presentable o estoy perfectamente feliz de seguir adelante tal como está en este momento y trabajar con él sin estilo. Así que si tienes alguna opinión, solo dilo.

De acuerdo. Entonces, Antoine, dijiste que voy demasiado rápido. Lo siento. ¿Qué necesitas que repase? Así que recapitulemos dónde hemos llegado. Así que solo cancelé esto. Solo volveré a través de algunos de mis comandos de terminal. Comencé inicializando un nuevo proyecto de Svelte Kit, lo hice con 'svelte@next'. Como dije, Svelte Kit todavía está en beta pública. Una vez que llegue a la versión 1, eso de '@next' desaparecerá. Así que solo será 'npm init svelte' y crearás un nuevo proyecto de Svelte Kit o cualquier proyecto de Svelte, en realidad. La parte de codificación fue muy rápida, de acuerdo, también me tomaré más tiempo en eso. Y eso es lo que estamos nombrando el directorio del proyecto. Simplemente cambié a eso, instalé las dependencias y luego hicimos 'Hola Mundo'. Y luego pasamos por algunas de las opciones adicionales allí. Instalé la solicitud de GraphQL y la implementación de JavaScript de GraphQL del lenguaje. Entonces eso significa que con cosas como usar esta etiqueta GQL aquí y poner esto aquí, simplemente significa que entiende que esto es GraphQL y puede formatearlo correctamente para mí. Entonces, lo que hice desde aquí es el módulo de contexto del script y en SvelteKit, esto nos da la opción de usar la función 'load' de SvelteKit. Esto significa que puede ir y obtener cualquier información que necesite antes de que se monte la página. Entonces, antes de que se monte la página, vamos al punto final de GraphQL en GraphCMS, que está en la configuración aquí. Si vas a 'API access', podemos obtener la API de contenido desde aquí, copiar eso y pegarlo aquí. Y estoy definiendo una consulta que definí en el playground de GraphCMS aquí. ¿Está todo bien con eso? Y luego usé esa consulta para pasarla a el cliente de GraphQL aquí. Luego estoy usando el cliente para hacer una solicitud con la consulta que se pasa desde aquí arriba. Y luego estoy desestructurando del resultado de eso, las publicaciones, y luego esas publicaciones se devuelven como props. Y como se devuelven antes de que se monte la página, esto se puede pasar a la página aquí. Entonces, el script aquí, esto es para cuando la página se ha montado, podemos pasar las props. Y luego solo estoy usando pre-json, pre-tag aquí, solo para mostrar los resultados de, de lo que se produce desde el archivo de carga, la salida de la función de carga aquí. Entonces, la variable de publicación es con lo que podemos trabajar. Ahora echemos un vistazo a cómo se vería esto ahora aquí, si vuelvo a actualizar. Ahora no estoy ejecutando el servidor. Doo-doo. Entonces sí, solo usando ese pretexto se formatea bien. Un buen consejo de depuración que me gusta usar cuando intento visualizar datos. De acuerdo, ahora puedo, o si hay algo más que deba detallarse nuevamente. Sí, por supuesto, puedo mostrarte el código. Entonces, el código aquí es el módulo de contexto del script. Y luego estamos usando el cliente de GraphQL aquí dentro de una función de carga, que es específica de SvelteKit. Y luego creamos el cliente aquí, pasando el punto final de la API de nuestro proyecto de GraphCMS, creando una consulta solo para obtener todas las publicaciones del punto final. Luego pasamos eso al cliente de GraphQL. Así que solo puedo poner esto en el chat. Va a verse horrible, pero ahí lo tienes. Y también debes tener en cuenta que el punto final allí es el que acabo de crear. Y voy a eliminar eso una vez que hayamos terminado con la masterclass. Entonces, si necesitas algo tú mismo, te sugiero que crees una cuenta en Graph CMS y simplemente inicies un proyecto allí. De acuerdo, ¿quién es MNMarkn? Entonces, si tienes este código exacto y ya has creado tu proyecto de GraphCMS desde el inicio, eso debería estar bien. Entonces no estoy seguro de por qué estaría haciendo eso. Sigues teniendo problemas con el código, que acabo de pegar en el chat. Avísame. Oh, eso está bien. De acuerdo, genial. Entonces, eso es todo lo que tenemos para el ritmo al que vamos. No creo que vaya a entrar mucho en el estilo, pero lo que podemos hacer con SvelteKit es que, por lo tanto, si tienes información como estilos globales, una barra de navegación, un pie de página, y quieres que toda esa información persista en todas las rutas. Hay un archivo especial en SvelteKit llamado archivo de diseño, '_layout.svelte', y debe estar en la carpeta de rutas. La mayoría de la codificación que vamos a hacer va a suceder en la carpeta de rutas o en la carpeta lib, que aún no hemos creado, pero para el archivo de diseño, vamos a encontrar una forma de ilustrar esto. ¿Todos están familiarizados con los hijos de React y cómo funciona en un proyecto? Entonces puedes tener un componente envolvente y pasas los hijos y se colocan dentro del componente envolvente y eso es lo que se muestra. Es prácticamente lo mismo con un diseño aquí, pero en Svelte, se llama 'slot'. Guarda ahora, diremos que la información ha regresado y sin ese slot, no sucede mucho. Entonces, así es como puedes envolver cualquier información persistente en todo el proyecto. Vuelve a poner eso. Y también aquí, puedo poner, digamos, una etiqueta 'main'. Y definir algunos estilos. Entonces, ¿qué puedo decir? 'main', supongo que 'margin auto'. Entonces. La etiqueta de estilo en tu archivo de diseño de SvelteKit será donde tendrías componentes persistentes como, digamos, un encabezado y un pie de página. Y obtendrás estos en el resto del proyecto incluso cuando cambies de ruta.

10. Estilizando con SvelteAdd, Tailwind y Daisy UI

Short description:

Para hacer que el proyecto sea más presentable, podemos usar SvelteAdd para configurar Tailwind y Daisy UI. Esto nos permitirá agregar fácilmente clases y mejorar el estilo. Podemos instalar las dependencias necesarias y configurar Tailwind y Daisy UI en el proyecto. Además, podemos elegir un tema para Daisy UI y usar el comando svelte-each para trabajar con los datos. Esto nos ayudará a organizar y mostrar el contenido de una manera más estructurada.

Así es como se maneja con Svelte. Entonces, lo que podríamos hacer es usar Daisy UI y generar algunos estilos brevemente. No está realmente relacionado con la construcción con SvelteKit y GraphQL, pero hagámoslo un poco más presentable, digamos. Así que voy a usar algo llamado SvelteAdd. SvelteAdd. SvelteAdd es una excelente manera de tener muchas cosas configuradas para tus proyectos de SvelteKit. Tenemos Tailwind aquí, también está Bulmer, PostCSS, MDSpecs, SCSS, y muchas otras cosas. Y se encarga de toda la configuración por ti.

Así que voy a copiar esto aquí y usar el comando MPX. Vamos a configurar Tailwind solo para poder editar las clases y que se vea un poco más presentable. También voy a usar algo llamado Daisy UI en realidad. Bien, ¿cómo se usa? Vamos a instalarlo también. También hay un excelente complemento de tipografía. Puedes usar la tipografía de Tailwind y Daisy UI. Y eso realmente ayuda si tienes mucho contenido del cual no tienes mucho control sobre cómo se estiliza en la aplicación. La tipografía de Tailwind agrega un conjunto predefinido de estilos a cualquier marcado que se recibe de tu punto final. Así que vamos a ir al proyecto ahora. Verás que el archivo de diseño tiene esto configurado desde Tailwind espera, agrega a Tailwind. Y solo importa el archivo CSS de la aplicación aquí, que es generado por el script MPX. Esto significa que puedo agregar muchas clases a varias partes del proyecto ahora. Y no debería verse tan mal. Así que empecemos. Tenemos nuestra clase principal aquí, puedo agregar solo un contenedor. Podemos agregar el ancho máximo, MX también aquí, que es margen izquierdo y derecho también, y solo un poco de relleno. Ahora, si vuelvo a mi terminal, npm run dev. En realidad, necesitaré instalar las dependencias. Lo siento, el script MPX solo lo configurará y se encargará de instalar las dependencias por ti. Bien, veámoslo ahora. ¿Y dónde nos quedamos? Aquí. Bien, se ve un poco más presentable. Vamos a usar también Daisy Ui. Así que voy a decir Daisy Ui y tipografía de Tailwind. Y también se almacenarán. Nuevamente, son dependencias de desarrollo. Tipografía y Daisy Ui. Ahora voy a tomar esta configuración de complementos aquí. Lo importante es que la tipografía de CSS venga antes de Daisy Ui. Y esto lo pongo en mi configuración de Tailwind aquí, y lo reemplazo. Verifiquemos, asegurémonos de que todos estén bien. Markin, ¿estás bien ahora, sigues obteniendo un error 500? Pasos de instalación para Tailwind. Vamos a encontrarlos. Bien. Dice NPX. Boop. Y luego, necesitas instalar las dependencias una vez que se haya ejecutado. Y también estoy instalando Daisy UI y el, lo siento, probablemente debería haber usado NPM en lugar de PMPM allí. El complemento de tipografía de Tailwind. Y luego, solo reemplazo la matriz de complementos vacía con eso. Genial, genial. Um... Bien, espero que todos estén bien con eso. Volvamos a la terminal y abramos el servidor de desarrollo nuevamente. ¿Corrección? Intentemos hacer esto un poco más... Sí, sí, sí, um... Entonces, sabes que es solo un tema que ha cambiado con DaisyUI aquí. DaisyUI usa... ¿Dónde se fue? Creo que está en themes. Viene con una lista de temas y dice que el predeterminado aquí es light pero parece que es dark. Entonces, dependiendo de cómo quieras que se vea, puedes ir al... Sí, al HTML. De tu proyecto de Svoltkit. Está aquí. Vamos a probar con, probemos con cupcake por ahora. Eso está bien. Bien, Mark, es posible que debas detener y volver a iniciar el servidor de desarrollo si no se actualiza pero eso está bien. Bien, con todos estos datos aquí, voy a necesitar trabajar con ellos. Así que en lugar de simplemente volcar todo en esta etiqueta pre, voy a usar el comando svelte-each. Así que disculpas, estoy usando como un generador de fragmentos, estoy usando un generador de fragmentos que creo que se llama svelte-snippets. Echemos un vistazo.

11. Trabajando con datos de publicaciones de blog y enrutamiento

Short description:

Estoy usando la expresión each para iterar sobre las publicaciones y extraer información del objeto. Puedo desestructurar el título, slug, fecha, extracto, etiquetas e imagen de portada. He estilizado la lista de publicaciones de blog usando clases de DayziUI para que sea más presentable. He agregado un enlace a cada publicación que mostrará más información cuando se haga clic. Para obtener la información específica de la publicación, he creado una nueva consulta en el GraphQL playground utilizando el tipo de publicación y pasando el slug como parámetro de consulta. Ahora puedo recuperar la información de esa publicación y mostrarla en la plantilla.

Svelte-snippets. Creo que estoy usando este svelte-3-snippets. Así que solo elimina un poco de, cómo hacer la sintaxis para los bucles y cosas así. Bien, estamos en esta directiva aquí. Digamos, post.name. No, eso debería ser un ptagsql. Indefinido. Bien, echemos otro vistazo al pre-json. Post. Oh, porque es un título, no un nombre. Esto es muy útil solo para validar lo que hay en los data. Así que estoy usando la expresión each aquí, y para cada publicación en post, puedo obtener la información de ese objeto. Entonces, si volvemos a mirar aquí, puedo obtener el título, slug, fecha, extracto, etiquetas e imagen de portada. Puedo desestructurar esos directamente en este bucle aquí. Así que podría decir, título, slug, fecha, extracto, etiquetas, e imagen de portada. Luego, dentro del bucle aquí puedo decir título, y luego cuando alguien haga clic en el elemento de la lista, ¿no es así? Entonces, haremos de esto una lista desordenada, y cada uno de estos puede ser un elemento de lista. Asegurémonos de que el elemento de lista pueda tener un título. Bueno, ¿qué podemos poner aquí? Los extractos. Obtén la imagen aquí. Eso va a ser, sí, la URL de la imagen de portada. Y debería tener el, sí, debería tener un atributo alt. Nómbralo, título, lo siento. Echemos un vistazo ahora. Entonces, creo que he obtenido toda la información de los objetos que necesito aquí, así que voy a comentar esto y guardarlo. Así que tenemos el comienzo de nuestra lista de publicaciones de blog, digamos. Así que déjame ir al chat, asegurémonos de que todos estén bien. ¿Todos bien? ¿Cuántas personas todavía están aquí? Una, dos, tres, cuatro, cinco personas. Bien, así que voy a tratar de mantener un ritmo. Estoy un poco consciente del tiempo. Creo que solo nos quedan una hora y 45 minutos. Así que voy a intentar cubrir el enrutamiento y los puntos finales en SvelteKit. Si están de acuerdo, trataremos de avanzar con eso, pero si hay algo que no está claro ahora, solo avísenme y trataré de aclararlo para ustedes. Voy a tomar un poco de agua. A partir de ahora, con esto, cómo se ve en este momento, agreguemos algunas clases de DayziUI e intentemos que se vea un poco más presentable. Podríamos usar una tarjeta, creo, para que se vea redondeada en la imagen. Estoy bastante seguro de que debería tener la imagen aquí arriba, digamos. Mejor. Bien, creo que esto necesita una figura. Creo que esto tiene las clases y pongamos esto aquí. Y luego aquí. Bien. Bien. Entonces, también puedes probar estos elementos. Deberíamos tener una especie de, uh, Un enlace técnico para la ruta de esa publicación, esto, digo yo. Um, así que queremos tener más información. Um, digamos que queremos tener más información sobre esto, deberíamos hacer clic en esto y pasar a nuestra ruta de publicación, digamos, y mostrar toda la información para eso. Entonces, um, voy a poner una etiqueta a alrededor de esto. Obteniendo un botón Um, bueno, esto es en realidad una A y tenemos que pasar el slug. Así que pongamos esto en algunos tox y diremos publicaciones. Tenemos el slug de esa publicación, pasemos el cursor sobre este enlace aquí, al que le he dado la clase de botón. No estoy seguro de qué tan visible es para todos, pero puedes ver que esto va a publicaciones, tech, el cuestionario, tenemos CMS, que es el título. Pero si hago clic en él, obtendré un error 404 porque la página aún no existe. Así que voy a necesitar crear eso. Así que vamos a ir a mi VS code aquí, sacar mi explorador de archivos, requerir ser publicaciones, y luego el slug de la publicación aquí. Entonces, en rutas, haz clic en el archivo de publicaciones, escribiendo qchecktilt. Entonces, en rutas, crearé una carpeta de publicaciones. Luego, aquí, voy a tener el slug y relacionarlo con un archivo svelte. Ahora aquí, solo obtendrás la misma plantilla para cada una en la que hagamos clic. Sí. Ahora necesito obtener la información de esa publicación específica en esta plantilla aquí. Y para hacer eso, volvamos al playground de GraphQL en el proyecto de GraphCMS. Entonces, esta es una consulta de publicación, por así decirlo. Voy a crear otra consulta, que será publicación, publicación, publicación. Y esto va a necesitar un slug, que se pasará como parámetro de consulta. Y esto es de tipo cadena. Y luego tenemos el signo de exclamación para decir que es obligatorio. Estoy bastante seguro de que solo voy a necesitar exactamente esto, pero solo para una publicación específica. Así que eso va a ser publicación en lugar de publicaciones. Y obtengamos un slug para pasar a esta consulta. Así que he ejecutado todas las publicaciones.

12. Trabajando con Slug y Endpoints

Short description:

Tomemos este slug aquí, tipos de unión y relaciones ordenables. Simplemente estamos especificando una publicación y pasando la cláusula where a la publicación. Eso es lo que vamos a usar como base para las rutas de la publicación. Podríamos crear un método HTTP get y llamar a ese punto final desde cualquier otro lugar en el proyecto.

Tomemos este slug aquí, tipos de unión y relaciones ordenables. Así que copiemos eso y volvamos a mi consulta de publicación. Y luego las variables de consulta aquí, simplemente cierro este panel lateral, no lo necesito. Entonces, las variables de consulta aquí, si simplemente hago clic en este panel, aparece. Y si abro unas llaves y presiono Ctrl + Espacio, reconoce el slug como una variable para la consulta. Así que simplemente presiono Ctrl + Tab allí y luego simplemente codifico duro este slug por ahora. Presiono Enter. Post necesita el argumento where de tipo Post where unique input. Muy bien, sí. Me disculpo. Esto debe ser where... y más llaves rizadas. El slug es el dólar slug. Así que solo pausaré aquí mientras todos echan un vistazo a eso. Voy a tomar un poco de agua en realidad. Entonces aquí, en lugar de obtener todas las publicaciones, simplemente estamos especificando una publicación y pasando la cláusula where a la publicación aquí. De acuerdo, ahí vamos. Solo para poder filtrar los detalles de esa única publicación. Y eso es lo que vamos a usar como base para las rutas de la publicación, que acabo de definir en el proyecto aquí. Entonces, en este caso, sería prácticamente el mismo patrón que acabamos de hacer para el archivo index.svelt. Entonces, lo que podría hacer es copiar todo esto nuevamente y tener un cliente repetido en el archivo slug aquí. Pero lo que realmente me gusta hacer es abstraer esto en su propio archivo reutilizable. Y también me gusta usar puntos finales. Un punto final en SveltKit, como dije en las diapositivas de introducción, se pueden usar métodos HTTP. Entonces podríamos crear un método HTTP get y usar el mismo enfoque que hemos hecho aquí. Pero luego podríamos llamar a ese punto final desde cualquier otro lugar en el proyecto. ¿Está todo el mundo al día? Porque ahora voy a pasar a la siguiente parte y lo explicaré mientras avanzo. Si hay algo que necesiten aclarar, solo griten y estaré encantado de explicarlo un poco más.

13. Creando Cliente y Punto Final de GraphQL

Short description:

Estoy creando un cliente de GraphQL en un archivo separado e importándolo donde sea necesario. También he movido la configuración del cliente a un archivo .env para evitar codificación rígida. Usando el atajo $lib, puedo importar el cliente desde libGraphQLClient. He reiniciado el servidor de desarrollo después de agregar el archivo .env. Ahora estoy extrayendo el cliente a su propio archivo para reutilizarlo. Estoy moviendo el código del cliente a su propio archivo de punto final para evitar repetición. He creado un archivo de índice en la carpeta de publicaciones para definir una solicitud HTTP get al punto final de GraphQL. Ahora tengo una consulta definida.

Lo que voy a hacer es crear una carpeta lib aquí y dentro de ella, crear un cliente de GraphQL. Será un archivo JS y eso es prácticamente todo. Necesito importar el Cliente de GraphQL. Oh, vaya. No sé por qué mi importación no está funcionando hoy. Correcto, solicitud de GraphQL. Cliente de GraphQL, correcto. Y voy a exportar esto. Y otra cosa mientras estoy aquí es que realmente no me gusta dejar nada codificado rígidamente en un proyecto. Esto realmente debería ir en un archivo .env. Así que simplemente copiemos eso. Creemos un nuevo archivo .env en la raíz de nuestro proyecto aquí. Aquí dentro, simplemente voy a pegarlo. No necesita las comillas. Solo lo voy a llamar el punto final de GraphQL de vite_. Entonces, ahora, el guión bajo de vite es importante. Puedo usar eso en mi cliente aquí. Así que simplemente arriba aquí, simplemente defínelo. Y esto va a ser, va a ser. ¿Cómo hacemos las importaciones en vite? Bueno, sé que puedo hacer eso. Puedo importar cualquier texto. Veamos cómo se ve en el escritorio. Guardar eso, abrir GraphQL dost, extraer, voy a pasar mi punto final de GraphQL ahora a mi cliente de GraphQL aquí. Guardar eso. Esta parte es completamente superflua. Realmente no necesitas hacer esto, pero he descubierto que puedes intercambiar las variables cuando las necesites. Podrías simplemente poner esto directamente aquí así. Ese es solo mi enfoque preferido. Y luego revisamos el chat, nos aseguramos de que todos estén bien. Bien, genial. Bien, ahora puedo simplemente importar este cliente en cualquier lugar que lo necesite. Así que hagamos eso aquí. Volvamos aquí. Y si hago comando espacio, me permite importarlo automáticamente. Así que si volvemos aquí arriba, puedes ver que está importando el cliente desde libGraphQLClient. Entonces, el $lib, eso es lo que se definió en el js-config aquí. Es solo un atajo para la ubicación de eso. Así que si guardamos esto y volvemos al proyecto, creo que el servicio de desarrollo para ejecutarlo es. Eso no está funcionando. Oh, esto se debe a que he agregado el archivo .env y no he reiniciado el servidor de desarrollo. Cualquier cambio de configuración, creo que necesitas reiniciarlo. Así que eso parece bien. Oh, estaba mirando la ruta que no existe. Bien, está bien, genial. ¿Todos siguiendo? Así que acabo de extraer el cliente aquí a su propio, vamos a sacar esto un poco, a su propio archivo aquí para poder reutilizarlo en el resto del proyecto. Así que puedo usarlo aquí. Pero si tengo otras áreas en el proyecto donde quiero listar esta información, realmente no quiero repetir esto nuevamente. Así que lo que puedo hacer es mover todo eso a su propio punto final. Por el momento, esto es para las publicaciones. Así que en la nueva carpeta de publicaciones que creé aquí, puedo crear un nuevo archivo. Y esto va a ser el índice. Y esto va a ser de tipo JSON de datos. Y va a ser un archivo JS. Así que toma nota de esa notación. Así que cuando vayamos a como posts.json en nuestro cliente, eso es lo que se devolverá desde el punto final, el .js es solo el lenguaje que estoy usando. También podrías usar TS, pero para los propósitos de esta masterclass, solo voy a usar JS. Así que en nuestra publicación aquí, si voy al archivo de índice, voy a crear una solicitud HTTP get al punto final de GraphQL de Graph CMS. Agua, espera. Puedes hacer eso en SveltKit. Y definiendo un get. Y esto es asíncrono de nuevo. Y va a tomar una solicitud o respuesta. Sí, gracias Copilot. Y aquí, me gusta hacer un try catch. Y definir una consulta. Así que esa consulta va a ser esto. Solo copio eso de aquí. Pongo eso aquí. Y ahora tengo una consulta definida.

14. Obteniendo Datos desde un Punto Final

Short description:

Para obtener datos desde un punto final en Svelte, puedes usar la función fetch. Este enfoque es más seguro ya que las credenciales sensibles se obtienen en el servidor en lugar del cliente. El código debe colocarse dentro del módulo de contexto del script. Se debe verificar que la respuesta tenga un estado de 200 antes de acceder a los datos. Al abstraer el código de GraphQL a un punto final, puedes consultar fácilmente los datos sin necesidad de código de GraphQL específico en cada componente. El punto final se puede acceder utilizando la función fetch y pasando la URL del punto final. La respuesta del punto final se puede devolver como props y utilizar en el componente. Este enfoque es más seguro y sigue las mejores prácticas para obtener datos en Svelte.

Quiero obtener algo similar a lo que he hecho aquí. Ponlo ahí. Y quiero devolver el estado 200. Porque es un punto final. Voy a poner estado 200, porque es una buena solicitud. Y en el cuerpo, este método, voy a querer poner las publicaciones. No estoy seguro si necesitaré poner esto entre llaves. Lo tomaré una vez que haya terminado aquí, ¡ups! Quítalo. Y si hay un error, queremos devolverlo, establecerlo en 500, ahí vamos. Y un cuerpo de error. Ahí vamos. Así es como es. Así que necesito importar mi cliente aquí. Eso ha sido importado. También necesito importarlo en ql tag. No me va a dejar hacer eso. Así que copiemos esto de aquí y peguémoslo allí. Bien, volvamos al chat. Sigo bien. Oh, ahora desde mi cliente, simplemente, de nuevo, podrás ir a las publicaciones raíz y si solo digo .json aquí, es, veo que esto hace referencia a este archivo index.json.js aquí. Así que si presiono enter, se va y esta es la información del punto final. Así que ahora puedo consultar esto, más o menos como lo haría en, como un comando fetch del navegador. Así que en mi archivo index aquí, podría simplemente prescindir de cualquier tipo de código de gráfico o cosas específicas aquí y simplemente usar un fetch desde el punto final. Así que dentro de mi función de carga, puedo deshacerme de todo esto. Aún voy a mantener la devolución de las publicaciones porque quiero consultarlas desde el punto final posts.json desde aquí. Así que, voy a decir respuesta desde un await fetch en mi punto final json, y esto va a ser igual a un await aquí. post.json. Así que si la respuesta está bien, simplemente voy a eliminar eso. Así que si la respuesta está bien, entonces voy a querer obtener las publicaciones en la respuesta json y devolverlas como props. Así que ahora he abstraído toda esa información, que estaba en este módulo de contexto aquí, con solo un fetch a un punto final. Así que si vuelvo a mi índice aquí, debería obtener exactamente la misma información. Así que eso es útil para, sé que está utilizando un punto final REST para GraphQL, y va en contra del ethos de GraphQL, poder usar lo que quieras y donde quieras, pero para cómo está estructurado este proyecto, siempre habrá una lista de publicaciones que quieres obtener, y para el índice de esa única publicación, como digamos para esta, podríamos simplemente hacer lo mismo que hicimos nuevamente inicialmente, o podríamos simplemente usar un punto final y pasar el slug. Así que prefiero este enfoque porque es mucho más seguro. Estás obteniendo desde un punto final en lugar de obtener desde HTTP en el cliente. Si hay credenciales sensibles, se obtienen en el servidor en lugar del cliente. Así que si tienes un token de portador o un token de autor permanente, pueden exponerse en el cliente con la forma en que Vite usa las variables de entorno. Así que esta es una forma mucho más segura de hacerlo. Volvamos al chat. Volvamos a post.json. Así que tienes un archivo raíz post index.json.js. Y luego aquí, estás definiendo una función Get y luego simplemente insertamos la consulta desde la página de índice que teníamos, simplemente la he movido aquí ahora. Y usando, importando el cliente GraphQL que creamos para nuestro, que está en nuestra carpeta Lib. Y luego también estamos importando la etiqueta de lenguaje GraphQL desde las solicitudes de GraphQL aquí, y luego estamos devolviendo un estado 200 y un cuerpo de publicaciones. Así que si tu código es igual que el mío, simplemente copia y pega eso. Así que si tu código es igual que eso, supongo que es, bueno, si es una URL no válida, supongo que no está obteniendo la URL del archivo .env, lo cual debería hacer. Mientras tu punto final esté definido como VITE_graphql_endpoint, y luego en tu cliente, estás pasando eso a tu cliente GraphQL, debería estar bien. Debería estar bien. Bien. Genial. Entonces, Postdoc Jason está funcionando en el navegador. Sin embargo, la solicitud desde index.svelt está dando un error. Bien, volvamos a index.svelt. Debería verse algo así. Simplemente copia, pega eso. Debería estar dentro de tu módulo de contexto del script. Y nada más ha cambiado desde que lo hicimos en el cliente hasta un punto final. Oh, vaya, esto es lo que sucede cuando simplemente sigo ciegamente lo que ofrece GitHub Copilot. Así que eso debería ser respuesta está bien, no respuesta está bien. Lo siento mucho, eso fue simplemente seguir ciegamente lo que GitHub Copilot puso en la pantalla. Así que, Dios mío, lo siento mucho. Sí, sin el signo de exclamación. Muy bien. Mucho mejor ahora, creo que es el software, en realidad ha generado y ordenado SX-ON. Así que eso fue Linux X Fighters, el primero que lanzó el experimento, hicieron sus propias cosas, en realidad no estuvieron tan mal porque la mayoría de sus páginas están en papel engrasado. Así que están en el iPhone reciente, así que no tienen que preocuparse tanto por la escritura a mano o la voz, Jason, ¿verdad? Lo siento, soy yo, no eres tú, lo siento. Inventario de publicaciones, no Jason, ¿así que lo he hecho completamente mal? Quiero decir, eso debería estar bien. ¿Qué estoy haciendo mal aquí? Oh, Dios mío. Lo siento mucho, sí.

15. Solución de problemas de SvelteKit Fetch

Short description:

La función de carga toma, porque esto no está en el navegador, este es un buen punto de aprendizaje. En realidad no tenemos la API fetch. Por lo tanto, eso debe importarse desde Svelte Kit. Detengamos y volvamos a empezar. Error irreparable en el índice. Oh, lo he hecho. Fin de la tecnología, así que en nuestra carga, si hay un borde, estamos esperando la respuesta de nuestro punto final, eso está bien. Volvamos a poner esto en algunos VecTyps aquí. Queremos usar la consulta que definimos anteriormente en nuestro proyecto Graph C y S. Vamos a pasar esta variable de slug a esta consulta en un punto final. Vamos a tener el slug. Echemos un vistazo a la página. Así es la información en nuestro punto final para esa publicación específica. He creado un archivo slug.json.js y esto toma un parámetro de slug entrante, y luego lo uso junto con una consulta que toma un parámetro de slug y luego lo paso al cliente graph12. Revisemos el chat, asegurémonos de que todos estén bien.

La función de carga toma, porque esto no está en el navegador, este es un buen punto de aprendizaje, ¿verdad?, porque este módulo de contexto de script no está en el navegador. En realidad no tenemos la API fetch. Por lo tanto, eso debe importarse desde el kit Svelte, que tiene su propio envoltorio fetch. Así que si lo intentamos y lo probamos, actualicemos. Pero no muestra nada. No, quiero decir, eso debería estar bien, ¿no? Detengamos y volvamos a empezar. Echemos un vistazo a la consola. Error irreparable en el índice. Oh, lo he hecho. Fin de la tecnología, así que en nuestra carga, si hay un borde, estamos esperando la respuesta de nuestro punto final, eso está bien. Así que si vamos aquí, simplemente imprimamos esto. Solo voy a poner respuesta. Eso le dará un... Eso se ve bien. Muy bien. ¿Es porque lo he envuelto, lo he envuelto demasiadas veces en llaves? ¿Eso se ve bien? Ahí vamos. He desestructurado una vez de más, creo, en el punto final aquí. ¿Dónde está? Lo estoy desestructurando aquí y luego... Eso está dentro del cuerpo de la publicación, así que eso debería estar bien. Pero sí, estaba tratando de hacerlo aquí también, pero no era necesario. Así que, lamento la confusión. Revisemos el chat. Está funcionando bien. De acuerdo, genial. Entonces, volvamos a poner esto en algunos VecTyps aquí. Bien, para nuestra ruta ahora, para cada publicación. Esto se ve tan desordenado, lo siento. Así que para cada publicación que queremos ir aquí, queremos usar la consulta que definimos anteriormente en nuestro proyecto Graph C y S, que está aquí. Así que queremos usar algo como esto. Acabo de quitarme los auriculares. No puedo oírme hablar. Vamos a pasar esta variable de slug a esta consulta en un punto final. Así que vamos a ver esto. Eso se verá muy parecido a este aquí, pero en lugar de como index.json, vamos a tener el slug. Así es como se hace con las rutas de página en SA, tiene que ser el mismo formato de archivo. Así que si decimos nuevo archivo aquí, y esto se basará en el slug, y esto será nuevamente un archivo .json.js, y realmente podríamos tomar la mayor parte de esta información de aquí y ponerla aquí. Así que eso es código repetido, pero esto será la consulta de nuestros proyectos aquí. Así que solo una copia de eso. Y ahora, y guardar. De acuerdo, quiero variables para la variable de slug aquí. Para obtener eso, podemos obtener la información del cuerpo de la solicitud. Así que por ahora, solo lo imprimiré en la consola. Sí, parámetros. Así que digamos que este es el slug. Deberíamos poder decir ahora que esto es Jason en la consulta para ese slug. De acuerdo, el slug debe estar definido. Aún no lo hemos definido, pero deberíamos haberlo registrado aquí. Así que tenemos un slug técnico de SEO graph CMS. Así que puedo sacarlo de los parámetros de la solicitud aquí. Solo para desestructurarlo directamente de los parámetros y decir slug. Va a ser igual a los parámetros de la solicitud. Puedo usar ese slug como una variable para pasar al cliente aquí. Así que podría hacerlo así. Echemos un vistazo a la página. Si eso se va a actualizar para nosotros. Así que está vacío. Así que si hice lo mismo con la desestructuración de las publicaciones, cuando no era necesario. Lo sé, porque esta vez solo estoy obteniendo una publicación, no publicaciones. Reemplacemos eso, echemos otro vistazo. Ahí vamos. Así es la información en nuestro punto final para esa publicación específica. Así que, en el proyecto ahora, espera, voy a quedarme aquí solo para que todos puedan tener una idea de lo que está sucediendo. Me encanta que hayas usado el emoji del hombre bailando. Bien, así que revisemos aquí. Espera, hagamos esto un poco más grande. Bien, quiero decir, he creado un archivo slug.json.js y esto toma un parámetro de slug entrante, y luego lo uso junto con una consulta que toma un parámetro de slug y luego lo paso al cliente graph12. Así que lo que podría hacer con esto en lugar de tenerlo allí así, vamos a hacer otra variable con objetos aquí y eso va a ser igual a slug, y simplemente pasamos las variables. Y volvamos al punto final. Eso está funcionando, ahí vamos. De acuerdo, revisemos el chat, asegurémonos de que todos estén bien.

16. Mostrando información de la publicación y estilización

Short description:

Para mostrar la información de una publicación, podemos usar el mismo patrón que el punto final del slug de la publicación. Podemos obtener la publicación utilizando el parámetro slug de los parámetros de la página. Luego podemos renderizar el contenido de la publicación utilizando la propiedad post.content.html. La clase prose de la tipografía de Tailwind CSS se puede utilizar para estilizar el contenido. Hemos cubierto los puntos finales, el enrutamiento y la consulta de datos desde nuestro punto final. Ahora podemos hacer que la página se vea bien agregando elementos de daisy wire, un encabezado y un pie de página. También podemos utilizar información del punto final para crear una barra de navegación dinámica. Si Tailwind no está funcionando, asegúrate de que la clase prose esté configurada en el archivo de Tailwind CSS agregando los complementos necesarios.

Entonces, ahora para lo que he hecho con este punto final del slug de la publicación, puedo usar el mismo patrón. Eso es lo que hice en el archivo de índice aquí. Voy a tomar todo eso, ponerlo aquí y simplemente cambiar. Esto va a ser, esto va a obtener la publicación, no .json. Esto va a ser una barra diagonal slug. Slug.json, que refleja esto. Voy a necesitar obtener un slug de algún lugar. Y va a venir de los parámetros de la página. Voy a desestructurar estos, en realidad. Y puedo obtener el slug del objeto de parámetros. Obtener el slug. Esto va a ser posts. Quiero que esta propiedad sea una publicación, esta publicación. Y esto es post. Voy a llevar esto de vuelta y deshacerme de todo esto. Así que ahora volvamos al navegador y simplemente deshagámonos de esto .json. Ahí vamos. Así que puedo empezar a trabajar con esto para mostrar la información de esa publicación. Voy a necesitar un poco más de datos de los que pondremos aquí el extracto. En realidad, también voy a necesitar la publicación. Así que vamos a ir aquí. Vamos a ir al esquema y a la publicación. Sigamos lo que se llama contenido. Así que también voy a necesitar el contenido. Volvamos al API Playground, publicación. Vamos a poner esto en etiquetas. Vamos a poner contenido. Creo que eso era un campo de texto enriquecido. Así que aquí puedo decir raw HTML o markdown. Creo que diré HTML por ahora y guardaré eso. Lo necesito. Eso lo pongo en mi punto final aquí. Genial. Ahora puedo empezar a trabajar en la representación de alguna de esta información aquí. Vamos a ir al chat, asegurémonos de que todos estén bien. Muy bien, así que solo dame un segundo, espera. Ahí vamos. Lo siento, encendí algunas luces, no puedo ver nada. ¿Dónde estábamos? Bueno, es hora de empezar a mostrar algo de esta información para esa publicación, supongo. Vamos a tener, pongamos una imagen de portada. Voy a empezar a pegar algo de marcado para esto en realidad. Vamos a poner una etiqueta de artículo. Y dentro de la etiqueta de artículo aquí, puedo obtener el contenido de la publicación. ¿Cómo se llamaba? post.content.html. Si digo eso y voy a nuestra página aquí, aquí tenemos etiquetas P, con Socket puedes usar el directorio HTML aquí. Y mostrará tu HTML en el formato adecuado de HTML, pero debes tener cuidado de confiar en la fuente de ese HTML o sanitizarlo antes de mostrarlo. Confiamos en la fuente porque lo pusimos allí. Entonces, ¿qué más podemos poner, podríamos usar, podríamos usar la clase prose aquí también, donde se verán mucho más presentables. Así es como funciona, ¿dónde puedo poner esto? Vamos a ponerlo allí. No, no eso. Oh sí. Oh, no pude moverlo porque estaba en pantalla completa. De acuerdo. Sí, así que la etiqueta pro básicamente agrega todas las clases que necesitamos a este contenido. De lo contrario, probablemente tendríamos que hacer algo como crear un gran archivo de clases CSS solo para ocuparnos de todas las posibilidades de cómo queremos que los diversos elementos HTML que provienen del formato del CMS se vean. Así que tenemos ese Tailwind, Dios, cómo se llama, Tailwind, Tailwind CSS typography que se encarga de muchas de esas cosas por nosotros. Vamos a formatearlo de manera mucho más agradable. De acuerdo. Hemos cubierto los puntos finales, hemos cubierto el enrutamiento y hemos cubierto la consulta de datos desde nuestro punto final. Sé que esto es muy rudimentario. Volvamos a la página de inicio aquí. Tenemos una forma de visitar cada publicación individual que ha sido enrutada para nosotros con SvelteKit. Sí, quiero decir, podríamos seguir adelante y hacer que esto se vea bonito o podríamos repasar algunos otros conceptos antes de terminar. Creo que ahora tenemos un poco menos de una hora. Así que vamos a hablar, asegurémonos de que todos estén bien. Bien, entonces, ¿hay algo que alguien del grupo quiera reiterar, repasar de nuevo o algo más? Lo que podría hacer es que podríamos hacer que se vea bonito rápidamente, poner algunos elementos de daisy wire y como un encabezado y un pie de página y podríamos usar algo de la información del punto final para renderizar una barra de navegación dinámica, digamos, y poner algo de información allí. Antwin, Tailwind no está funcionando. No estoy seguro, cuando dices que Tailwind no está funcionando, ¿te refieres a la clase Pro? ¿Lo tienes configurado en tu archivo de Tailwind CSS? Entonces, en el archivo de configuración de Tailwind CSS, necesitas tener los complementos configurados aquí. Creo que los publiqué en el chat anteriormente, pero los pondré aquí ahora.

17. Solución de problemas de configuración de Tailwind CSS

Short description:

¿Instalaste Tailwind CSS Typerography en tu archivo package.json? En el archivo de diseño, asegúrate de importar tu app.css. Si tienes problemas con Tailwind, intenta ejecutar 'Svelte Add Tailwind' para configurarlo todo. Verifica la configuración y los ajustes de preprocesamiento para asegurarte de que todo esté configurado correctamente.

¿Instalaste Tailwind CSS Typerography en tu archivo package.json? Muy bien. ¿Tienes Tailwind CSS Typerography en tu archivo package.json? ¡Vaya! Lo siento. Así que solo esperaré en, ambos complementos están instalados, ¿de acuerdo? En el archivo de diseño, ¿dónde está? Aquí está. Debes importar tu app.css. Eso debería haberse hecho cuando el comando Svelte Add lo configuró para el proyecto. También podría ser una buena idea verificar si hay dos ranuras aquí también. Si ya tienes una ranura definida, a veces simplemente agrega otra ranura allí. Así que también deberías verificar eso.

Hola. Muy bien. Entonces, en tu archivo Slug.svelte, ¿estás diciendo que la clase prose no se está aplicando? Echemos un vistazo rápido a esto, miremos aquí. Si hago clic en uno de estos y lo inspecciono, solo coloqué esto a un lado aquí. Lo ves. Si no ves que se aplique la clase prose, entonces, no estoy seguro si es un problema de configuración de Tailwind o qué. No lo sé. Si tienes todas esas cosas instaladas, no debería haber problemas para que funcione realmente. Detén y reinicia el servidor de desarrollo tal vez. De acuerdo. Svelte Add Tailwind. Ejecutamos eso para configurar el proyecto. Entonces, eso simplemente agrega. Echemos un vistazo a lo que agrega. Svelte o Tailwind agregará tu configuración, agregarán un archivo postcss.config.cjs. Creo que agregarán un preproceso a Svelte config.js. Estoy seguro de eso. Y luego, en tu archivo de diseño, debería importar app.css, que es esto. Me gustaría echar un vistazo rápido a eso. Necesito tomar un descanso rápido, así que volveré en breve.

Muy bien. Gracias, Hugo. Antoine, ¿sigues teniendo problemas con Tailwind? Sí, deberías usar Svelte Add, como dijiste, Svelte Add Tailwind y eso debería configurarlo todo para ti, luego puedes agregar DaisyUI y el complemento de tipografía de Tailwind CSS después. Ese era el orden correcto. No creo que sea un problema si lo haces al revés, para ser honesto. Y eso debería ser todo. Entonces, quiero decir, el archivo de diseño es donde importas tu archivo CSS, que está aquí. Y la única otra cosa en la que puedo pensar es cómo está configurado. Dices que tienes tus complementos configurados. Eso está bien. Svelteconfig, SvelteAd debería haber agregado el preprocesamiento aquí, creo, con Post CSS. Y tu preprocesador aquí arriba. Debería, si dijiste que tienes un archivo de configuración de Post CSS, eso está bien. No se me ocurre ningún otro lugar donde pueda haber un problema.

18. Trabajando con puntos finales de GraphQL

Short description:

Hemos consultado información directamente desde el punto final de GraphQL en nuestro archivo de índice utilizando el módulo Context. También hemos abstraído el cliente en su propio archivo para reutilizarlo. Además, hemos definido un punto final en SvelteKit para recuperar datos del punto final de GraphQL. Este punto final nos permite especificar el tipo de retorno, como JSON o XML. Utilizando el método fetch, podemos llamar al punto final y devolver los datos como props al componente o página. Luego, podemos recorrer los datos y renderizarlos en la página. El archivo slug.json muestra cómo recuperamos el slug de los parámetros de la página y lo usamos en la consulta de GraphQL. También hemos abstraído este proceso en otro punto final para reutilizarlo.

De acuerdo. Sigamos con lo que estamos haciendo aquí. Tenemos nuestras páginas. Puedo navegar entre ellas. Intentemos que esto no se vea tan horrible. Tal vez un poco menos horrible. Agreguemos, digamos, una imagen. Tal vez una imagen de portada aquí, supongo. O al menos, URL de imagen de portada de la publicación. Pongamos esto en alguna voz rizada, me pregunto si lo llamamos título, o es title? Echemos un vistazo a eso, un poco mejor. Mytribe, pongamos una clase aquí, eso sería 3xl, supongo? Y el nombre... Pongamos también las etiquetas, estoy seguro de que podemos usar... ¿Son esas insignias? Insignia. Hagamos insignia primaria, sí. Use un bucle each. Y diremos post.tags, creo que es, y eso será una etiqueta. Clase de insignia... Primaria, supongo. Pondré la etiqueta aquí. Veamos cómo se ve eso. Uf, eso se ve terrible. Necesitamos usar insignia. Necesitamos usar insignia e insignia primaria, supongo. ¿Cómo va eso? Y luego la fecha, supongo también. Es a tiempo. Vamos a entrar en el formato de fechas y cosas en JavaScript. Se ve bien. De acuerdo. Antoine, dices gracias, muchas gracias por ayudarte. ¿Estás bien ahora? ¿Listo para continuar? De acuerdo, entonces. De acuerdo. Okey dokey. Solo estoy tratando de pensar en qué más podríamos hacer. En los últimos, ¿qué? ¿35 minutos aquí? Creo que eso es todo realmente, así que hagamos un rápido resumen de lo que hemos hecho. Así que intentemos hacer un resumen rápido. Comenzamos consultando la información desde el punto final de GraphQL directamente en nuestro archivo de índice aquí. Y lo hicimos dentro del módulo Context dentro de la función load de SvelteKit. Esto nos permite obtener información de... como información externa o información desde dentro del proyecto antes de que el componente se monte. Y eso significa, como, es visible en el navegador. En primer lugar, lo hicimos definiendo todo dentro de esta función load, pero eso no es realmente muy componentizado. No se puede reutilizar. Así que separamos el cliente en su propio archivo aquí, que luego podemos importar en cualquiera de nuestros archivos Svelte. Y lo llevamos un paso más allá, en lugar de tener... definir consultas dentro de los archivos Svelte. Dimos un paso más, solo desde allí hasta un punto final. Un punto final en SvelteKit se puede acceder mediante un JSON, no puedo escribir JSON, bueno... puedes definir tu método HTTP, ofreciendo definir tu punto final HTTP como una ruta dentro de la carpeta de rutas del proyecto, también puedes definir el tipo de datos. Así que pondré el punto JSON.js aquí, y eso nos da un tipo de retorno JSON. Lo hice en mi blog personal, donde quiero tener un mapa del sitio y un feed RSS. Y toman formato XML. Así que lo que hice fue simplemente cambiar el punto JSON a punto XML, punto JS, y ese es el tipo de retorno de esa función en el punto final. Es realmente flexible en cuanto a lo que obtienes de tu punto final. No tienes que hacerlo así. Simplemente puedes decir en tu método HTTP cuál es el tipo de retorno. Solo encuentro que esta forma es realmente útil porque sabes exactamente lo que obtienes de este punto final, porque es punto JSON. Hicimos eso, descubrimos nuestras llamadas GraphQL a un punto final get. Y luego simplemente las llamamos con el método fetch yendo allí, Scott, con el fetch del navegador de SvelteKit, fuimos a nuestro punto final y luego devolvimos información de la misma manera que lo hicimos inicialmente, definiendo toda la consulta GraphQL dentro del archivo. Eso se devuelve al componente o a la página como props, y luego podemos trabajar con ellos como deseemos. Entonces, con lo que hicimos aquí, simplemente estamos recorriendo cada uno, seleccionando la imagen, el título y el extracto, y luego tenemos una ruta que estamos definiendo para señalar el slug de esa publicación. Aquí en nuestra raíz de publicaciones, estamos trayendo el slug de los parámetros de la página, que podemos, podríamos hacer lo mismo que hicimos en la página de índice, que es simplemente definir todo el cliente y la solicitud aquí, pero simplemente abstraímos esto nuevamente a otro punto final y repetimos lo mismo aquí, por lo que estamos obteniendo nuestras props de la respuesta de nuestra función load aquí, y simplemente estamos recorriendo todo y poniéndolo en el marcado en la página. ¿Puedes abrir slug.json nuevamente? Aquí lo tienes. En el archivo slug.json aquí, estamos obteniendo la solicitud que llega. Entonces, request.params es donde estará el slug. Y luego estamos usando ese slug para nuestra consulta GraphQL aquí. Estamos agregando... No necesitamos hacer esto, pero es una forma de ayudarte a visualizar lo que va al cliente GraphQL aquí. Estamos poniendo nuestro slug en una variable de variables.

19. Depuración y Despliegue

Short description:

Estamos estructurando la publicación a partir del resultado de la solicitud de la consulta con esa variable que se pasa. Y estamos obteniendo la publicación devuelta como el cuerpo de ese método HTTP. Entonces, cada vez que alguien publica en el chat, por alguna razón, se desplaza hasta la parte superior del chat y tengo que desplazarme hacia abajo nuevamente.

Estamos estructurando la publicación a partir del resultado de la solicitud de la consulta con esa variable que se pasa. Y estamos obteniendo la publicación devuelta como el cuerpo de ese método HTTP. Entonces, cada vez que alguien publica en el chat, por alguna razón, se desplaza hasta la parte superior del chat y tengo que desplazarme hacia abajo nuevamente. Entonces, Mark, estás obteniendo un error 404. Está esperando tu propio mensaje. Así que, ¿puedes hacerlo, puedes hacerlo, sí, como lo he hecho aquí, simplemente agregarlo? Entonces, volvamos a los archivos reales. ¿Puedo leer correctamente la imagen de portada como nula? Bueno, en lugar de intentar depurar eso ahora. Desde tu complemento de índice, puedes seleccionar una ruta aquí y mostrará la información. Si puedes hacer eso, entonces simplemente intenta agregar takcon.json al final, y eso debería funcionar. Entonces, si eso no funciona, no puedo ver cómo debería funcionar porque está obteniendo la información del punto final. Así que, si nos das un poco más de información, puedo intentar ayudarte a depurarlo. No funciona sin .json. Entonces, no está funcionando en absoluto. Echemos un vistazo a tu archivo slug.json. Acabo de publicarlo en el chat. Eso debería verlo, creo, si lo pones en tu archivo slug.json.js. Voy a volver a mi archivo slug.svelt aquí. Y voy a mostrar el contenido de este archivo de publicación. Y depuraré ese problema con la imagen de portada. Entonces, la imagen de portada está aquí, ¿de acuerdo? Y debería tener una URL. post.coverimage.URL, no sé de qué te quejas. De acuerdo, parece que está bien ahora. ¡Oh, bien! De acuerdo, así que pausamos aquí un segundo para Markin, asegurémonos de que esté bien. Y una vez que hayamos hecho eso, cubriremos rápidamente el despliegue y creo que terminaremos. Así que voy a usar Vercel, y una forma realmente buena de comenzar con Vercel, si aún no lo tienes instalado, oops, ¿qué he hecho aquí? Porque puedes instalarlo como un paquete global de NPM, pero si no lo tienes instalado, puedes usar, creo que es npx-vercel. Y eso configurará la CLI para ti de inmediato. Pero esperemos a Markin, asegurémonos de que esté bien. Todavía hay errores, así que si no es el punto final, Markin, supongo que es cómo lo llamas. Entonces, lo que haré es simplemente implementar esto y subiré este código a GitHub y hagámoslo ahora mismo, solo para poder compartirlo en el chat y que todos tengan un enlace. Así que primero lo implementemos, así que voy a usar npx-yself. Esto me pedirá una configuración y un despliegue, GraphQL Galaxy Workshop, solo diré que sí. Lo voy a publicar en mi cuenta. No lo voy a vincular a un proyecto existente, le daré ese nombre y está en las raíces. Dirá que no, el valor predeterminado aquí. Esto se va a construir en Vercel, pero esto no va a hacer mucho en Vercel porque la variable de entorno no está allí. Así que si voy a vercel.com y este proyecto debería aparecer aquí, GraphQL Galaxy Workshop, luego voy a despliegues y hago clic en esto. Y hago clic en esto. No debería tardar mucho en construir. Necesito esperar a que se instale esto. O si lo estoy haciendo desde casa. Mientras tenemos esta gran pausa, esperando a que se construya esto, podría ir y publicarlo en GitHub. Parece que ha hecho su trabajo y estoy un poco confundido en parte porque muestra el contenido aquí. Porque no he definido el punto final. ¿Cómo sabe de dónde viene esto? No he definido el punto final. ¿Cómo sabe de dónde viene esto? Red y xhr. Sí. Así que simplemente obtengamos desde aquí. Oh, espera, el punto final está ahí. ¿Cómo está el punto final ahí? Entonces, si volvemos a mi código, estoy bastante seguro de que el punto final no se detalla en ningún lugar aparte del archivo .env. Ah, también ha subido el archivo .env. Pero eso debería ignorarse en Git, ¿verdad? Bueno, eso es más o menos correcto. Entonces, lo que voy a hacer es, como un proyecto para esto en GitHub. Y decir nuevo repositorio, y le daré el nombre del proyecto, que es GraphQL Galaxy Workshop 2021, copiar eso, y pegarlo allí y decir crear repositorio, y simplemente copiar esto, en la terminal aquí. Matemos eso. De acuerdo, así que voy a necesitar inicializarlo, ahora puedo agregar ese control remoto, darle la rama principal, no maestro, ahí vamos. Error de nombre de falla de Riftshead, Maine, no encontrado. Huh, supongo que también voy a necesitar comprometer algunas cosas. Así que vamos a ir a mis completados de confirmaciones aquí y decir nuevas características ahora, vamos a decir introducir nuevas características, digo init. De acuerdo, intentémoslo de nuevo. De acuerdo, y empujemos esto. Así que podemos ir a GitHub, puedo actualizar esta página y no hay archivo .env, lo cual es fantástico. Así que ahora, si vuelvo a Vercel aquí y voy al proyecto y digo conectar al repositorio Git, y es GitHub y este es el GraphQL Galaxy Workshop, y digo conectar. Entonces, cualquier empuje ahora a ese repositorio debería construirse automáticamente con Vercel aquí. Ya tenemos este primero. Ahora tengo curiosidad por saber si hago un cambio ahora, digamos que voy a la ReadMe, solo cambio esto, ahí vamos. Así que si digo actualizar ReadMe y lo intento. Entonces, si volvemos a Vercel ahora, debería estar desplegado en el empuje, oh, necesito empujar eso yo mismo. Así que eso se está empujando a Vercel ahora. Si reviso esto, debería haberse construido aquí, aquí vamos. Ahora voy a decir que esto no se construye porque el punto final de la API no está aquí. Así que podemos ir rápidamente a configurar las variables de entorno.

20. Desplegando una Subcarpeta y Definiendo Puntos Finales

Short description:

¿Puede Versel desplegar una subcarpeta dentro de un repositorio seleccionado? Sí, puede, pero depende del contenido de la carpeta. La carpeta debe tener un archivo package.json. Anteriormente, Versel permitía enviar cualquier cosa a la plataforma, pero ahora es más selectivo. Puedes navegar a una subcarpeta y desplegarla. Al desplegar desde un entorno local, Versel envía todo sin importar el archivo de ignorar. Para definir el punto final, debes agregar la variable Vite del archivo .env en la configuración. Después de volver a desplegar, se pueden cargar las variables faltantes. Visita la página de Configuración de Validación para ver los colores de instantáneas cuando se agregan zapatos a la aplicación. En la sección de componentes, puedes encontrar los datos más recientes, capturas de pantalla y número de pies. Siéntete libre de hacer cualquier pregunta sobre el repositorio.

Creo que no podemos concluir. Déjame revisar el chat. Marken todavía está luchando. Aquí está el repositorio en el que todos hemos estado trabajando juntos, Marken. Puedes echarle un vistazo. ¿Puede Versel desplegar una subcarpeta dentro de un repositorio seleccionado? Sí. Pero depende de lo que haya en esa carpeta. Creo que necesita tener un archivo package.json. No estoy seguro. Solía ser que podías enviar cualquier cosa. Podías simplemente decir, V-C o Versel y enviar cualquier cosa que necesitaras. Pero creo que ahora es más selectivo cuando cambiaron de plataforma. Hace un tiempo, un par de años atrás, podías usarlo como un CDM y simplemente enviar todo. Pero no creo que sea tan flexible ahora. Pero sí, puedes navegar a una subcarpeta y decir, Versel, y desplegará esa subcarpeta.

Entonces, ¿todos tienen el enlace del masterclass? Volvamos a Versel. Estoy diciendo que debería haber un error. ¡Bien, okay, bien! Correcto, esto se debe a que no se ha definido el punto final. Supongo que cuando haces Versel desde local, simplemente envía todo sin importar si quieres ignorarlo o no. Entonces, en mi configuración aquí, si voy a las variables de entorno, voy a necesitar agregar esa variable Vite que está en mi archivo .env. Necesitaré tener esto como el nombre y URL como el valor, así que si digo agregar, y vuelvo a los despliegues ahora y hago clic en esto, pero realmente no ha fallado, pero no está usando la URL, y si digo volver a desplegar podría haber incluido la caché de construcción allí porque todo estaba bien excepto las variables faltantes, así que supongo que si actualizo esto deberíamos obtener algunos registros, tal vez no, ahí vamos. Si hago eso, debería poder recuperar algunas de las variables y cargarlas para mí. Genial, super rápido. Ahora, si vas a visitar esta página, la Configuración de Validación, podrás ver los colores de instantáneas cuando se agregan zapatos a la aplicación. Nuevamente, ve a componentes y aquí puedes ver todos los más recientes de堡data, capturas de pantalla, número de pies, voy a dejar un par de minutos para el chat, específicamente sobre el repositorio que creaste allí. ¿Alguna pregunta? ¡Dime! De lo contrario, dejando un par de minutos, ¿concluimos?

Watch more workshops on topic

JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Featured WorkshopFree
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Relational Database Modeling for GraphQL
Top Content
WorkshopFree
In this workshop we'll dig deeper into data modeling. We'll start with a discussion about various database types and how they map to GraphQL. Once that groundwork is laid out, the focus will shift to specific types of databases and how to build data models that work best for GraphQL within various scenarios.
Table of contentsPart 1 - Hour 1      a. Relational Database Data Modeling      b. Comparing Relational and NoSQL Databases      c. GraphQL with the Database in mindPart 2 - Hour 2      a. Designing Relational Data Models      b. Relationship, Building MultijoinsTables      c. GraphQL & Relational Data Modeling Query Complexities
Prerequisites      a. Data modeling tool. The trainer will be using dbdiagram      b. Postgres, albeit no need to install this locally, as I'll be using a Postgres Dicker image, from Docker Hub for all examples      c. Hasura
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Building GraphQL APIs on top of Ethereum with The Graph
WorkshopFree
The Graph is an indexing protocol for querying networks like Ethereum, IPFS, and other blockchains. Anyone can build and publish open APIs, called subgraphs, making data easily accessible.

In this workshop you’ll learn how to build a subgraph that indexes NFT blockchain data from the Foundation smart contract. We’ll deploy the API, and learn how to perform queries to retrieve data using various types of data access patterns, implementing filters and sorting.

By the end of the workshop, you should understand how to build and deploy performant APIs to The Graph to index data from any smart contract deployed to Ethereum.

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

JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.