Construir con SvelteKit y GraphQL

Rate this content
Bookmark

¿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

Scott Spence
Scott Spence
140 min
08 Dec, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta 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. La masterclass también explora la recuperación de datos de los endpoints, la estilización con SvelteAdd y el trabajo con datos de publicaciones de blog y enrutamiento. También se discute la solución de problemas de configuración de Tailwind CSS y el despliegue con Versel.

Available in English

1. Introducción a Svelte y Agenda

Short description:

Hola, me llamo Scott. Somos uno de los primeros CMS basados en GraphQL. Estamos totalmente comprometidos con GraphQL. Echemos un vistazo rápido a la agenda. Crearemos un front end y un back end. Consultaremos datos con GraphQL. Mostraremos datos en nuestro proyecto Svelte. Gestionaremos datos con directivas Svelte. Veremos el enrutamiento en Svelte y los endpoints. Cubriremos la implementación en producción. Svelte es un marco de compilador que construye HTML, CSS y JavaScript. SvelteKit es la solución integral para construir proyectos en Svelte.

Hola, me llamo Scott. Soy un Defensor del Desarrollador en GraphCMS. Somos uno de los, si no el, único, lo siento, el primero, más o menos, GraphQL basado en CMSs por ahí. Estamos totalmente comprometidos con GraphQL y eso es básicamente cómo entregamos nuestro contenido a nuestros usuarios. Entonces, echemos un vistazo rápido a la agenda. Y sé que no he actualizado la fecha en estas diapositivas. Se muestra como Entonces, vamos a crear un front end y un back end. Vamos a ver algunas consultas data con GraphQL. Vamos a ver cómo mostrar esos data en nuestro proyecto Svelte. Echaremos un vistazo rápido a las directivas de Svelte para gestionar data en el archivo Svelte, una vez que llega al componente. Estaremos viendo el enrutamiento en Svelte, junto con los endpoints. Y echaremos un vistazo a la implementación en producción, si tenemos suficiente tiempo. Bueno. Entonces, ¿qué es Svelte? Entonces, es un marco de compilador que te permite dividir tus proyectos en dos componentes, muy parecido a Vue y Angular. Lo que es diferente con Svelte en comparación con Vue es que no hay DOM virtual. Svelte construye HTML CSS y JavaScript en el paso de construcción, por lo que lo que recibe el navegador es simplemente HTML, CSS y JavaScript, fácil de gestionar. Svelte no es particularmente nuevo, la V1 se lanzó a finales de 2016, alrededor de noviembre creo. Entonces, en lo que me voy a concentrar es en SvelteKit. Va a ser la única

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 de desarrollo web moderno de serie, incluyendo la división de código y el enrutamiento. Svelte es como React para los veganos, ofreciendo endpoints HTTP y enrutamiento basado en archivos. Svelte también introduce Visvelte, un superconjunto de HTML, que permite la reactividad dentro de los componentos. La directiva each se utiliza para iterar alrededor de los objetos. Pasemos al front end e inicialicemos un proyecto Svelte utilizando la terminal. Utilizaremos Versell como objetivo de despliegue. El proyecto incluye un README, package.json, y un archivo de configuración JS para definir rutas. También configuraremos el archivo prettier.

tienda única para construir cualquiera de tus proyectos 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 pase a la V1 porque SvelteKit todavía está en beta pública, una vez que pase a la V1, en next se desvanecerá y cómo cualquiera construye un proyecto en Svelte. Así que hay modernas prácticas de desarrollo web mejores prácticas de serie con SvelteKit. Tiene la división de código incorporada y el enrutamiento de fuego y toda la amabilidad que, ya sabes, nosotros como desarrolladores front end estamos acostumbrados a. Así que Svet es React para los veganos. Me encanta. Obtienes endpoints HTTP. Vamos a ir en detalle sobre ellos. Así que tienes puntos HTM, obtienes tu get, qué puntos HTM, get, put, delete. Pero no es delete, porque delete es una palabra reservada en JavaScript, así que es simplemente 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. Vale. No creo que haya enviado los recursos para esto. Así que voy a pasar por alto esto y saltar a la siguiente diapositiva aquí.

Así que Visvelte, que no cubrí, es un superconjunto de HTML. Así que esto se vería 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, sólo incrementarla aquí con el on click para nuestro botón aquí. Y tenemos declaraciones. Así es como nos enfrentamos a los cambios de estado dentro de un componente. Usamos esta sintaxis de dólar dos puntos aquí. Si no estás familiarizado con ella, sé que puede parecer un poco funky, pero esto es como una etiqueta de JavaScript. Es un JavaScript válido. Pero no se usa en ninguna parte. Así que Rich Harris y el equipo se han tomado la libertad de usar esto para la reactividad dentro de los componentes. Así que tenemos directivas aquí, que es que tenemos un bloque if. También podemos usar else. Así que usamos las llaves para definir nuestra directiva y luego podemos empezar a trabajar con ella dentro de esas. Vamos a llegar a usar esas en nuestro proyecto muy pronto. Así que, sí, esto va a ser como la carne y las patatas para la directiva each que simplemente usas para iterar alrededor de bloques de como para iterar alrededor de objetos. Así que empecemos. Creo que estas son sólo diapositivas de aseo ahora. Vamos a ir a el front end. Voy a necesitar una terminal. ¿Todos están bien con, vamos a aumentar el tamaño de la fuente aquí? Así que veamos. ¿Todos ven bien la pantalla? Pulgares arriba de Robert, gracias. Um, vale. Así que, vamos a entrar en mis proyectos de ejemplo aquí. Y sólo voy a NPM init Svelte next y lo que voy a hacer aquí, vamos a decir computation.v1. Zip código para 20. 21, veamos, esto va a crear nuestros proyectos Svelte dentro de una carpeta definida como GraphQL Galaxy Masterclass 2021 así que vamos a pulsar enter aquí. Y primero sólo voy a decir proyectos esqueleto. No vamos a usar TypeScript ni ES Lint. Si entro en la carpeta de la masterclass ahora, cambio aquí, acaba de cambiar mi vista. Si alguien tiene algún problema sólo dispara, posiblemente a mí en el Discord así en este canal aquí. Muevo esto al lado. Vamos a cambiar de nuevo aquí. Bien, vamos a echar un vistazo rápido a este proyecto aquí. Así que si entro en VS Code, mi editor de código. Bien, así que tenemos nuestra configuración de Svelte. Así que esta es una nueva adición a la Kit de inicio de Svelte. Esto es Adapto Auto. Así que en el pasado, todavía necesito mirar esto, pero sé que para los propósitos de esto creo que esto estará bien. Con Svelte Kit, no tiene realmente ninguna opinión sobre como objetivos de despliegue así que hay varios disponibles. Vamos a ver si podemos conseguir uno aquí. Y de nuevo, si hay algún problema para gritar, sólo voy a intentar mi mayor posible aquí. Y aquí vamos, Adaptadores. Así que no estoy seguro si estos han sido actualizados desde la concepción de este adaptador también aquí, pero tenemos ambientes de construcción para Netlify, Versell, y Cloudflare, y por supuesto puedes construir tu propio adaptador si ninguno de esos se ajusta. Para los propósitos de esta masterclass, creo que sólo estaré usando Versell, y si hay algo específico que necesitas saber sobre cualquier otro, si sólo vas a estar haciendo una construcción estática pura, hay algunas trampas alrededor de eso también, así que sólo grita si hay algo que necesitas información sobre con respecto a eso. 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 a mi cámara, y me doy cuenta de que no hay cámara encendida, así que dejaré de hacer eso. Así que tenemos un archivo de configuración JS aquí. Esto es para que podamos definir como nuestras rutas cortas para nuestra librería, también podemos poner en componentes, cualquier otra cosa que quieras definir esto nos dará un poco de azúcar sintáctica para importar archivos en nuestros proyectos. Tenemos un archivo prettier aquí. Sólo voy a reemplazar esto con mi propia configuración.

3. Configuración y Configuración del Proyecto

Short description:

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

Voy a necesitar instalar también. Así que uso pnpm. No tienes que usar pnpm, puedes usar npm, o yarn o lo que quieras. Me gusta ahorrar en el espacio de disco con pnpm. Así que solo voy a esperar a que se instale, eso está hecho. Y si guardo esto debería también formatear eso para mí. Genial. Así que tenemos nuestra configuración de prettier, tenemos un git ignore con 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 app HTML aquí. Y aquí es donde se construye todo el proyecto una vez que pulsamos Svelte build. Así que se construye en el cuerpo de Svelte aquí, mucho como lo harías con tu app ID, que harías con React. No estoy seguro de cuál es la convención para un framework como tienes y también está el componente head aquí. Svelte tiene su propia API de head.

4. Configuración del Front End y Back End

Short description:

La mayoría del trabajo se realiza dentro de la carpeta de raíces. Tenemos nuestro archivo de índice, que es un índice.svelte. Ejecutémoslo y veamos el Hello World en SvelteKit. Puedes usar argumentos como dash p para puertos y dash o para abrirlo. Ahora configuraremos el back end. Si quieres seguir el proceso, puedes usar gitpod.io y la URL del repositorio proporcionada.

Todo lo que uses con eso también se agrupará en esto. Bien. Y luego aquí es donde la mayoría del trabajo va a suceder dentro de esta carpeta de raíces. Tenemos nuestro archivo de índice aquí que es un índice.svelte. Y este es nuestro Hello World. Ejecutemos esto ¿Tengo algo más en ejecución? ¿Dónde está mi ventana? Tenemos nuestro Hello World en SvelteKit. Un par de otras cosas aquí es que puedes poner algunos argumentos que ves que ya he hecho aquí. Así que el dash dash p es para los puertos. También puedes optar por abrirlo. Ahora abrirá la pestaña para nosotros. Prefiero tener estos acortados solo a dash p y dash o para abrirlo. Aunque no lo usaré. Así que tenemos nuestro front end. Ahora configuraremos nuestro back end.

Hola, Michael. ¿Puedo pasar el enlace al repositorio? No hay un repositorio. Lo estoy construyendo desde cero. Así que si quieres empezar rápidamente, déjame ir a GitHub aquí. Ya tengo ese esqueleto preconstruido. Así que si tomas esto, déjame poner esto en el chat aquí. Si quieres seguir el proceso y tener un entorno, puedes usar algo llamado gitpod. Así que ve a gitpod.io, y luego barra inclinada hacia adelante hash, y luego puedes ver que ya lo he reutilizado antes, y luego añade la URL a este repositorio aquí. Si entras, comenzará a preparar el esqueleto para ti, así que puedes seguir desde allí. Así que solo pongamos 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 conveniente para ti.

5. Configuración del Proyecto GraphCMS

Short description:

Ahora comenzaré en el back end y usaré una cuenta de demostración de app.graphcms.com. Cuando inicies sesión en tu cuenta de GraphCMS, verás proyectos iniciales para blogs. Selecciona 'crear proyecto' y elige el centro de datos de Londres. Esto proporcionará un nuevo proyecto de GraphCMS basado en la plantilla de blog.

Bien, ¿dónde estaba? Comenzaré en el back end ahora, así que solo cierra sesión en esto. Bien, genial. Solo voy a usar una cuenta de demostración aquí. Entonces, desde app.graphcms.com, si no te has registrado, ahora es un buen momento para hacerlo. Puedes authenticate con GitHub, o puedes simplemente crear una cuenta y authenticate a través de tu correo electrónico una vez que te envíen una confirmación.

Entonces, cuando inicies sesión en tu cuenta de GraphCMS por primera vez, verás que hay algunos proyectos iniciales aquí. Así que tenemos uno para un blog, y esto simplemente va a estructurar el esquema y todos los modelos y tipos de data que necesitamos para que nuestro proyecto comience a funcionar. Esto se ha hecho en el pasado para Gatsby con Tailwind. Solo nos vamos a centrar en construir un proyecto en SvelteKit.

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

Entonces, si esa es la idea general de cómo trabajar con ello, voy a elegir el centro de datos de Londres, porque ahí es donde estoy basado, puedes elegir el que esté más cerca de ti. Voy a decir, Crear Proyecto. Y esto simplemente va a provisionar un nuevo proyecto de GraphCMS para nosotros. Y básicamente a partir de eso, esa plantilla de blog. Así que discúlpame, mientras me tomo un café. Esta es esa plantilla de blog. Entonces, en realidad voy a crear algunos nuevos papeles. Así que necesito pensar en lo que quiero hacer más. Una de las razones es porque quiero obtener bienes raíces. Y eso es probablemente una de las razones más grandes por las que quiero optar 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 muy buena asignación con el plan de comunidad. No tiene que subir hasta $300 al mes. El tablero 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 pre-poblado incluye una página acerca de y algunas publicaciones. Los activos en GraphCMS tienen su propio tipo de contenido. El patio de recreo proporciona consultas y mutaciones auto-pobladas. Trabajaremos con publicaciones y recuperaremos campos específicos. Pasemos al frente de nuestro proyecto.

Bueno, entonces voy a crearme, unas muy buenas asignaciones con el plan community. Y no tiene que subir hasta $300 al mes. Si necesitas algo adicional, puedes ponerte en contacto con un equipo de ventas y trabajar algo si hay algo adicional que necesitas encima del plan community. Pero hay mucho aquí, que debería verte muy bien durante bastante tiempo. De todos modos, solo voy a seleccionar ese plan. Voy a invitar a mis compañeros de equipo más tarde. Y aquí tengo el tablero de control del proyecto.

Entonces, aquí a la izquierda es donde estoy actualmente. Ahí 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 me voy a centrar en autor, página y publicación aquí. SEO realmente no es necesario para esto, pero cada uno de estos modelos aquí tiene su propio tipo de data, que puedes elegir desde el lado aquí. Una cosa con, digamos, la publicación aquí, este identificador amigable de URL de slug, esto es genial. Esto generaría tu información de slug de otras partes de la plantilla, así que desde aquí podría tenerlo como el título, digamos, y decir nombre del autor. Y eso generaría un slug único para eso. Esta es una gran opción, que recomendaría, pero esto en realidad no viene en esta plantilla aquí así que solo tenemos este campo de slug, que es una sola línea de texto. De hecho, déjame ver si puedo editar esto y cambiar esto a slug. Genial. Así que, esta opción de aquí arriba te permite cambiar el tipo de campo. Así que solo voy a cambiar eso a slug y luego en la validación, ups, lo siento, voy a decir generar slug desde la plantilla y voy a decir slug aquí y desplazarme hacia abajo aquí actualizar. ¿El tamaño de la pantalla está bien para todos? ¿Necesitas que lo aumente un poco? Vale. Está un poco abarrotado ahora pero espero que puedas ver eso mejor. Vale. Así que ese es nuestro esquema y aquí, podemos editar cualquier contenido en ese esquema. Así que tenemos un par de autores en este momento. Así que 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 vas al autor aquí, hay este campo de relación y si me desplazo por el lado aquí, puedes elegir una referencia y puedes conectar, puedes conectar relaciones. Así que podríamos decir, si es una relación uno a uno, así que Ronak solo puede tener una publicación, lo que no parece correcto para un blog. Podemos decir, un autor puede tener muchas publicaciones o muchos autores pueden tener muchas publicaciones. Echemos un rápido vistazo a esto. Así que no quiero que esto sea como yo vendiendo las características de GraphCMS. Este es solo nuestro backend, con el que 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, revisa eso. Así que un autor puede tener muchas publicaciones y también puedes hacerlo en ambos sentidos. Así que puedes tener varios autores por publicaciones y varias publicaciones por autor. De todos modos, sigamos. Lo siento, estamos mirando el contenido en este momento. Así que tenemos este contenido pre-poblado para nosotros. Tenemos una página acerca de y luego tenemos algunas publicaciones aquí también. Y también tenemos los activos. Así que los activos en GraphCMS son su propio tipo de contenido. Así que podemos añadir campos adicionales aquí si necesitamos. Solo voy a seguir adelante con eso, sin embargo. Tenemos nuestro patio de recreo. Así que cuando definimos ese esquema, GraphCMS se fue y creó todas las consultas, todas las mutaciones para nosotros que vamos a necesitar para trabajar. Así que como primer disparo, si haces control espacio, te aparece esto, ¿qué es? Inteligencia. Y voy a querer seleccionar publicaciones. Solo presiono Control Enter. Va a auto-poblar para nosotros. Así que voy a querer algo como, espera déjame encontrar lo que vamos a necesitar. Um. Vuelvo aquí en un segundo. Um. Bien. Así que voy a tener el título de la publicación. El slug. Las fechas en que fue publicado. Um? Y el extracto de la publicación. ¿Tiene alguna etiqueta relacionada con ella? Y la imagen de portada. Entonces aquí podemos decir que solo queremos la URL por ahora. Así que si. Voy a. Uhm? Va a prescindir de esa data force. Así que esta es una publicación aquí. Um, luego la siguiente.

7. Obteniendo Datos del Punto Final con el Cliente GraphCMS

Short description:

Asegúrate de que todos estén bien. Volvamos al proyecto. Voy a instalar algunas dependencias, incluyendo una solicitud GraphQL. Vamos a ver cómo obtener algunos datos de nuestro punto final. Definiremos un módulo de script y crearemos un cliente GraphCMS.

Y luego avanzo y eso es lo que vamos a ver al entrar en el frente de nuestro proyecto spoke it. Ahora, déjame revisar el chat. Asegúrate de que todos estén bien. ¿Alguna pregunta hasta ahora de alguien? ¿Uhhm? Así que todos podrían oírme si veo que todos están silenciados. Uhm no tengo mis auriculares puestos así que si necesitas decir algo, como dije antes, solo déjanos un mensaje en el discord tal vez o en el chat de zoom aquí y tal vez podría 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 quieres ver todas mis aplicaciones abiertas solo déjame 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. Así que voy a usar una solicitud GraphQL para ir y obtener la información que necesitamos. Una solicitud GraphQL creo que es como un envoltorio HCP para tus llamadas GraphQL. Y esto viene pre-empaquetado con la etiqueta de lenguaje GraphQL creo, ¿necesitamos instalarlo por separado? ¿No estamos en Discord? Cierra eso. Solo instala esto. No, voy a usar mi npm. Vale, así que vamos a aumentar esto. Ahora tengo tantas ventanas abiertas ahora, ¿dónde ha ido el chat? Y... Umm. Umm. Umm. Umm. Umm. Umm. Umm. Umm. Umm. Bueno, disculpas.

Bueno, lo siento. Umm. Umm. No puedo encontrar la llamada de Zoom más. Pido disculpas. Umm. Umm. Umm. Si alguno de ustedes está tratando de comunicarse. Ja ja. Umm. No puedo encontrar el chat. No eso. O eso.olds a menos que no sea eso. ¿Eso no se sostiene? No puedo encontrar el chat. Bien. Lo siento por todo eso. Lamento eso. ¿Dónde se ha ido? Lo tengo. Lo tengo. Así que lo siento, todos dejaron de compartir mi pantalla porque no podía entender qué estaba pasando. Bien. Volver a compartir mi pantalla. Y... mi panel de code de respaldo. Bien. Listo para... Bien. Vamos a ver cómo obtener algunos data de nuestro punto final. Así que voy a definir... un módulo de script aquí. Así que el módulo de contexto. Así es como puedo usar la... función de carga de Svogit. Así que esto es... no es una función asíncrona. Esta 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 el... En realidad, lo dejaré así por ahora. Y aquí, es donde puedo hacer 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 estoy obteniendo el IntelliSense esperado. Necesitaré importarlo manualmente y definir la URL del cliente para mi proyecto de GraphCMS. También crearé una consulta para obtener las publicaciones y la pasaré al cliente. Finalmente, devolveré las publicaciones como props y las mostraré en la página de índice.

Y estoy bastante seguro de que lo instalé. Volvamos a las solicitudes de GraphQL y GraphQL. Correcto. Entonces, debería obtener el IntelliSense de eso, pero no lo estoy obteniendo. Voy a tener que importarlo de nuevo. Voy a tener que importarlo manualmente. Salto. El cliente. Y esa no es la URL de mi proyecto. Quiero obtener mi URL para mi proyecto de GraphCMS. Te devuelvo 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, vas a necesitar hacer clic en el botón de crear permiso aquí. Eso te dará la opción de simplemente crear los valores predeterminados, que son estos. Así que podemos leer cualquier modelo que esté en la etapa de publicación, y puede leer todas las versiones de los modelos. Así que voy a copiar esto. Voy a poner eso para la URL. También hay una configuración de encabezados aquí. Voy a dejar esto vacío por ahora. Solo deja eso completamente. Y ahora tengo definido mi cliente. También puedo encontrar una consulta para usar con eso. Voy a querer sacar 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 allí. Así que en estas comillas invertidas aquí, vemos que copilot está haciendo un buen trabajo aquí para todas las publicaciones, ID contenido creado. Pero voy a desactivar esto porque está estorbando. Y voy a volver a mi proyecto aquí. Y obtener esta consulta y ponerla allí. Así que 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í. Entonces, ahora tengo esa información, que estoy obteniendo antes de que se cargue la página aquí. Podría, de hecho, voy a salir de aquí, y voy a mi terminal, y ejecuto el servidor de desarrollo. Ves que imprime el mismo objeto que lo que obtuvimos en la consulta aquí. Así que ahora puedo usar esto en esta página, pero voy a necesitar meter estas publicaciones en la página, y puedo hacer eso con una etiqueta de script, y es export let. Así que si eso parece un poco raro, export let cuando está entrando. Solo voy a decir que sigas con eso. Así es como recibes props en Svelte. Así que si ahora digo, pon esto en una etiqueta pre aquí, e imprime eso a la publicación, iremos al proyecto. Lo que sea que pueda ser, aquí vamos en localhost. Así que tienes la información mostrada en nuestra página de índice. Genial, así que eso se ve bien, no, trabajemos en ello y usemos la, directiva de cada uno de los hechizos o simplemente podemos recorrer cosas y hacer una tarjeta para cada uno aquí, digamos. Así que voy a volver al chat. ¿Todos bien, alguna pregunta de alguien? ¿Algo necesita repasarse de nuevo? ¿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 como está. Repasemos los pasos que hemos dado. Comenzamos con la inicialización de un nuevo proyecto de Svelte Kit, instalamos dependencias e hicimos hola mundo. Instalamos GraphQL request y la implementación de JavaScript de GraphQL. Usamos la función de carga 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 devolvimos como props. El código está en el módulo de contexto de script. El archivo de diseño en SvelteKit se llama una ranura. 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.

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

Vale. Entonces Antoine, dijiste que voy demasiado rápido. Lo siento. ¿Qué necesitas que repase de nuevo? Así que repasemos por dónde hemos ido. Así que vamos a cancelar esto. Solo voy a volver a algunos de mis comandos de terminal. Empecé con la inicialización de un nuevo proyecto de Spelt Kit, hago eso con Spelt at next. Como dije, Spelt Kit todavía está en beta pública. Una vez que llegue a v1, eso at next simplemente va a desaparecer. Así que solo va a ser npm init spelt y vas a crear un nuevo proyecto de Spelt Kit o cualquier proyecto de Spelt para el caso. La parte de codificación fue tan rápida, vale, también voy a reducir la velocidad en eso. Y eso es lo que estamos nombrando el directorio del proyecto. Solo cambié a eso, instalé las dependencias y luego simplemente hicimos hola mundo. Y luego pasamos por algunas de las opciones adicionales allí. Instalé GraphQL request y la implementación del lenguaje GraphQL JavaScript. Así que eso significa que con cosas como usando esta etiqueta GQL aquí y poniendo esto en, simplemente significa que, entiende que esto es GraphQL y puede formatearlo bien para mí. Así que lo que hice desde aquí es el módulo de contexto de script y SvelteKit, esto nos da la opción de usar la función de carga de SvelteKit. Esto significa que puede ir y obtener cualquier información que necesite antes de que se monte la página. Así que 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 Acceso API, podemos obtener la API de contenido de aquí, copiar eso y pegarlo aquí. Y estoy definiendo una consulta que definí en el patio de juegos de GraphCMS aquí. ¿Está todo el mundo 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 porque esas se devuelven desde antes de que se monte la página, esto puede pasar a la página aquí. Entonces, el script aquí, esto es para cuando se ha montado la página, podemos pasar las props. Y luego solo estoy usando pre-json, pre-tag aquí, solo para mostrar los resultados de, de lo que se está produciendo desde el archivo de carga, producido desde la función de carga aquí. Así que, la variable de publicación es con la que podemos trabajar. Ahora veamos cómo se vería esto ahora en, en aquí, si vuelvo a actualizar. Ahora no estoy ejecutando el servidor. Doo-doo. Así que sí, solo usando ese pretexto está bien formateado. Un buen consejo de debugging que me gusta usar cuando intento visualizar data. Vale, uno que puedo ahora, o hay algo más que necesita ser detallado de nuevo. Sí, por supuesto puedo mostrarte el code. Así que el code aquí es script context module. Y luego estamos usando el cliente de GraphQL aquí dentro de una función de carga, que es específica de Sprockets. Y luego estamos creando el cliente aquí, pasando el punto final de la API de nuestro proyecto GraphsDMS, creando una consulta solo para obtener todas las publicaciones desde el punto final. Luego estamos pasando eso al cliente de GraphQL. Así que puedo poner esto en el chat. Va a parecer horrible, pero ahí lo tienes. Y también solo necesitas tener en cuenta que el punto final allí es lo que acabo de crear. Y voy a estar borrando eso una vez que hayamos terminado con la masterclass. Así que si necesitas algo tú mismo, entonces te sugiero crear una cuenta en Graph CMS y simplemente iniciar el proyecto allí. Vale, entonces ¿quién es MNMarkn? Entonces, si tienes este exacto code y ya has creado tu proyecto GraphCMS desde el inicio, eso debería estar bien. Así que no estoy seguro de por qué estaría haciendo eso. Sigues teniendo problemas con el code, que acabo de pegar en el chat. Avísame. Ah, está bien. Vale, genial. Entonces, eso es bastante todo lo que tenemos nuestro data 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, así que 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 a través de todas las rutas. Hay un archivo especial en SvelteKit llamado archivo de diseño, guión bajo, guión bajo diseño Svelte, y necesita 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. Entonces, ¿todos están familiarizados con el React children y cómo funciona en un proyecto? Así que puedes tener como un componente de envoltura y pasas los hijos y van dentro del componente de envoltura y eso es lo que se muestra. Es prácticamente lo mismo con un diseño aquí, pero en Svelte, se llama una ranura. Si guardo ahora, diremos que la información ha vuelto y sin esa ranura, mucho sucede. Así es como puedes envolver cualquier información persistente a través del proyecto. Pon eso de vuelta. Y también aquí, puedo poner como una etiqueta principal digamos. Y definir algunos estilos. Entonces, ¿qué puedo decir? Principal, margen automático supongo. Entonces. La etiqueta de estilo en tu archivo de diseño Swelkit 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 las raíces.

10. Estilizando con SvelteAdd, Tailwind y Daisy UI

Short description:

Para hacer el proyecto 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 lo manejas con Svelte. Así que lo que podríamos hacer es podrías usar Daisy UI y simplemente esbozar 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. Así que SvelteAdd es solo 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 solo voy a copiar esto aquí y usar el comando MPX. Vamos a configurar Tailwind solo para que pueda empezar a editar clases para que se vea un poco más presentable. También voy a usar algo llamado daisy UI en realidad. Bien, ¿cómo usar? Instalemos esto también. También hay un excelente plugin de tipografía. Puedes usar la tipografía Tailwind CSS y daisy UI. Y eso realmente ayuda si tienes mucho contenido en el que no tienes mucho control sobre cómo lo estilizarías dentro de la aplicación. La tipografía Tailwind CSS simplemente agregará como un conjunto predefinido de estilos a cualquier marcado dentro de lo que se devuelve desde tu ensayo de punto final. Así que vamos a ir a proyecto ahora. Ves que el archivo de diseño tiene esto ha sido configurado desde tailwind espera, agrega a tailwind. Y simplemente está importando el archivo de aplicación CSS aquí, que está siendo generado por el script MPX. Así que esto simplemente significa que puedo lanzar un montón de clases en varias partes del proyecto ahora. Y no debería verse tan mal. Así que vamos a empezar. Entonces, tenemos nuestra clase principal aquí, solo puedo poner un contenedor. Podemos poner en el ancho máximo, MX también aquí, que es margen izquierdo y derecho también, y solo un poco de relleno. Así que ahora si vuelvo a mi terminal, MPN run dev. Necesitaré instalar las dependencias en realidad. Lo siento, el script MPX simplemente lo configurará, y va a instalar las dependencias por ti. Bien, echemos un vistazo ahora. ¿Y dónde estábamos? Aquí. Bueno, es un poco más presentable. Pongamos en marcha Daisy Ui también. Así que voy a decir Daisy Ui y tipografía tailwind. Y va a almacenar estos también. De nuevo, son dependencias de desarrollo. Tipografía y Daisy Ui. Ahora solo voy a tomar esta configuración de plugins aquí. Así que lo importante es que la tipografía CSS viene antes de Daisy Ui. Y esto en mi configuración de Tailwind aquí, y reemplazar esto. Verifica, asegúrate de que todos estén bien. Markin, ¿estás bien ahora, todavía estás recibiendo un 500? Así que los pasos de instalación para Tailwind. Vamos a encontrarlos. Bien. Bueno. Dice NPX. Boop. Y luego, necesitas instalar dependencias una vez que eso haya corrido. Y también estoy instalando un Data UI y el, lo siento, probablemente debería haber usado NPM en lugar de PMPM allí. El plugin de tipografía. Y luego, solo estoy reemplazando el array de plugins vacío con eso. Genial, genial. Um... Bueno, espero que todos estén bien con eso. Volvamos a terminal y abramos el servidor de desarrollo de nuevo. ¿Corrección? Intentemos hacer esto un poco más... Sí, sí, sí, um... Así que sabes que es solo un tema que ha cambiado con DaisyUI aquí. DaisyUI utiliza... ¿Dónde se ha ido? Así que creo que está en temas. Así que viene con una lista de temas y dice que el predeterminado aquí es light pero parece que es el dark. Así que dependiendo de cómo quieras que se vea, puedes ir al... Sí, al HTML. De tu proyecto Svoltkit. Está aquí. Vamos con, probemos cupcake por ahora. Eso está bien. Bueno, Mark, es posible que necesites detener y comenzar el servidor de desarrollo de nuevo si no se ha actualizado pero eso está bien. Bueno, con todos estos data aquí voy a necesitar trabajar con ellos. Así que en lugar de simplemente volcarlo 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 utilizando 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 utilizando las clases de DayziUI para hacerla más presentable. He añadido un enlace a cada publicación que mostrará más información al hacer clic. Para obtener la información específica de la publicación, he creado una nueva consulta en el playground de GraphQL 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 simplemente elimina un poco de, cómo hacer la sintaxis para los bucles y cosas así. Bueno, estamos en esta directiva aquí. Digamos, post.name. No, eso debería ser un ptagsql. Indefinido. Bien, echemos un vistazo al pre-json de nuevo. Post. Oh, porque es un título, no un nombre. Así que esto es súper útil solo para validar lo que está en los data. Así que estoy usando, la expresión each aquí, y para cada post en post, puedo obtener la información de ese objeto. Así que, si volvemos a mirar aquí de nuevo, 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 tenemos a alguien haciendo clic en el elemento de la lista, ¿no es así? Así que, haremos esto una lista desordenada, y cada uno de estos aquí puede ser un elemento de la lista. Asegúrate de que el elemento de la lista puede tener un título. Bueno, ¿qué podemos poner aquí? Los extractos. Consigue la imagen aquí. Eso va a ser, sí, fuente URL de la imagen de portada. Y debería tener el, sí, debería tener un atributo antiguo. Nombrarlo, título, lo siento. Echemos un vistazo a eso ahora. Así que, creo que he sacado todo de los objetos aquí que necesito, así que solo voy a comentar esto y guardar eso. Así que tenemos el comienzo de nuestra lista de publicaciones de blog, digamos. Así que solo déjame ir al chat, asegúrate de que todos están bien. ¿Todos están bien? ¿Cuántas personas tenemos todavía? Uno, dos, tres, cuatro, cinco personas. Bueno, así que quiero intentar mantener el ritmo. Estoy un poco consciente del tiempo. Creo que solo nos quedan una hora y 45 minutos. Así que solo voy a intentar pasar por el enrutamiento y los puntos finales en celtkit. Así que si estás bien con eso, intentaremos pasar por esos, pero si hay algo más que no esté claro ahora, solo dame un grito y trataré de aclararlo para ti. Solo voy a conseguir un poco de agua. A partir de ahora todos con esto, cómo se ve esto en este momento, vamos a conseguir algunas clases de DayziUI e intentar hacer que esto se vea un poco más presentable. Así que podrías usar una tarjeta, creo, así que parece que pone redondeado en la imagen. Estoy bastante seguro de que debería tener la imagen aquí arriba, ¿digamos? Mejor. Bueno, creo que esto necesita una figura. Creo que esto tiene las clases y vamos a poner esto. Y luego aquí. Vale. Vale. Así que, intenta estos elementos también. Deberíamos de clasificar en, uh, Un I tech 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 poder hacer clic en esto y pasar a nuestra ruta de publicación, digamos, y mostrar toda la información para eso. Así que, um, debería poner esta etiqueta a alrededor de aquí. Consiguiendo un botón Um, bueno esto es una A en realidad y tenemos que rifar, que puede ser el slug. Así que pongamos esto en algunos tox y diremos publicaciones. Tenemos que slug para esa publicación, pasar el ratón sobre este enlace aquí, al que he dado la clase de botón. No estoy seguro de cuán visible es para todos, pero puedes ver que esto va a publicaciones, tech, la questio, tenemos CMS, que es lo que es el título. Pero si hago clic en él, voy a obtener un cuatro a cuatro porque la página aún no existe. Así que voy a necesitar crear eso. Así que vamos a hacer eso. Así que vamos a mi VS code aquí, saco mi explorador de archivos, requiere ser publicaciones, y luego el slug de la publicación aquí. Así que en rutas, nuestro clic abre el archivo de publicaciones, escribiendo en qchecktilt. Así que en rutas, crearé una carpeta de publicaciones. Luego aquí, voy a tener el slug y lo relacionaré con un archivo svelte. Ahora aquí, solo obtienes la misma especie de plantilla para cada uno en el que hacemos clic. Sí. Así que ahora necesito obtener la información para esa publicación específica en esta plantilla aquí. Y para hacer eso, volvamos al GraphQL playground en el proyecto GraphCMS. Así que esta es una consulta de publicación, por así decirlo. Voy a crear otra consulta, que va a ser publicación, posty, publicación. Y esto va a necesitar tomar un slug, que se le va a pasar, como un parámetro de consulta. Y este es de tipo string. Y luego tenemos el signo de exclamación para decir que es requerido. 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 vamos a conseguir 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. Solo 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 publicación. Podríamos crear un método HTTP get y llamar a ese endpoint 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í, solo cierren este panel lateral, no lo necesitamos. Así que las variables de consulta aquí, si hago clic en este panel, aparece. Y si abro algunas llaves y presiono Ctrl Espacio, reconoce el slug como una variable para la consulta. Así que puedo presionar Ctrl Tab allí y luego simplemente codificar code este slug por ahora. Presionar Enter. La publicación necesita el argumento donde del tipo Post donde la entrada única. Está bien, sí. Pido disculpas. Esto necesita ser donde... y más chicos rizados. El slug es el slug del dólar. Así que me detendré allí mientras todos echan un vistazo a eso. Voy a tomar un poco de agua en realidad. Así que aquí, en lugar de tomar todas las publicaciones, solo estamos especificando una publicación y pasando la cláusula where a la publicación aquí. Vale, ahí vamos. Solo para que pudiéramos filtrar los específicos en esa única publicación. Y eso es lo que vamos a usar como base para las rutas de publicación, que acabo de definir en el proyecto aquí. Así que, así que aquí, sería prácticamente el mismo patrón que lo que acabamos de hacer para el archivo index.svelt. Así que, lo que podría hacer es copiar todo esto de nuevo y tener como un cliente repetido en el archivo slug aquí. Pero lo que realmente me gusta hacer es abstraer esto en su propio archivo reutilizable. Y luego también me gusta usar endpoints. Así que un endpoint en SveltKit, como dije, en las diapositivas de introducción, puedes usar métodos HTTP. Así que podríamos crear un método HTTP get y usar el mismo tipo de enfoque que lo que hemos hecho aquí. Pero luego podríamos llamar a ese endpoint desde cualquier otro lugar en el proyecto. ¿Todos han seguido el ritmo? Porque voy a pasar por esta próxima parte ahora y lo explicaré mientras avanzo. Si hay algo que necesitas aclarar, solo grita y estaré encantado de explicarlo un poco más.

13. Creando Cliente GraphQL y Endpoint

Short description:

Estoy creando un cliente 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 la codificación dura. Al usar 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 su reutilización. Estoy moviendo el código del cliente a su propio archivo de endpoint para evitar la repetición. He creado un archivo de índice en la carpeta de publicaciones para definir una solicitud HTTP get al endpoint de GraphQL. Ahora tengo una consulta definida.

Entonces, lo que voy a hacer es que voy a crear una carpeta lib y aquí, voy a crear un cliente GraphQL. Va a ser un archivo JS y eso es prácticamente esto. Necesito importar el Cliente GraphQL. Oh, vaya. No sé por qué mi importación no está funcionando hoy. Bien, solicitud GraphQL. Cliente GraphQL, correcto. Y voy a exportar esto. Y otra cosa mientras estoy aquí es que realmente no me gusta dejar nada codificado en un proyecto. Así que esto debería ir realmente a un archivo .env. Así que vamos a copiar eso. Vamos a crear un nuevo archivo .env en la raíz de nuestro proyecto aquí. Aquí, solo voy a pegar eso. No necesita las comillas en él. Solo voy a llamar a esto el vite guión bajo endpoint GraphQL. Así que ahora, el guión bajo vite es importante. Puedo usar eso en mi cliente aquí. Así que justo aquí arriba, solo defino eso. Y esto va a ser, va a ser. ¿Cómo hacemos las importaciones en vite? Do do do do do do. Bueno, sé que puedo hacer eso. Puedo importar cualquier texto. Veamos cómo se ve en el escritorio. Guarda eso, abre GraphQL дост, extrae, voy a pasar mi endpoint GraphQL ahora a mi cliente GraphQL aquí. Guarda eso. Entonces, esta parte es completamente superflua. Realmente no necesitas hacer esto, pero encontrarás que puedes intercambiar las variables según las necesites. Podrías simplemente poner esto directamente aquí así. Ese es solo mi enfoque preferido. Y así revisamos el chat, asegurémonos de que todos estén bien. Vale, genial. Vale, así que ahora puedo importar este cliente donde lo necesite. Así que hagamos eso para esto aquí. Volvamos aquí. Y si hago comando espacio, me permite importarlo automáticamente. Así que si vuelves aquí arriba, puedes ver que está importando el cliente desde libGraphQLClient. Así que el $lib, eso fue lo que se definió en el js-config aquí. Así que 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. Así que eso no está funcionando. Oh, esto porque he añadido 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, vale, así que todavía funciona, genial. ¿Todos siguen el ritmo? Así que solo he extraído el cliente aquí a su propio archivo, vamos a sacar esto un poco, a su propio archivo aquí solo para que pueda reutilizarlo en el resto del proyecto. Así que puedo usar eso aquí. Pero si tengo otras áreas en el proyecto donde quiero listar esta información, realmente no quiero repetir esto de nuevo tampoco. Así que lo que puedo hacer es mover esto, todo eso a su propio endpoint. Así que esto en este momento son 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 un tipo de data JSON. Y va a ser un archivo JS. Así que toma nota de esa notación. Así que cuando vamos a posts.json en nuestro cliente, eso es lo que se devolverá desde el endpoint, el .js es solo el lenguaje que estoy usando. Podrías usar TS también, pero para los propósitos de esta masterclass, solo voy a ir con JS. Así que en nuestra publicación aquí, si voy al archivo de índice, voy a crear un HTTP get al endpoint de graph CMS, GraphQL. Agua, espera. Así que puedes hacer eso en SpeltKit. Y definiendo un get. Y esto es sincrónico 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 esta. Solo toma eso de ahí. Pon eso aquí. Y ahora tengo una consulta definida.

14. Obteniendo Datos del Endpoint

Short description:

Para obtener datos de un endpoint 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 de en el cliente. El código debe colocarse dentro del módulo de contexto del script. La respuesta debe ser verificada para un estado de 200 antes de acceder a los datos. Al abstraer el código GraphQL a un endpoint, puedes consultar fácilmente los datos sin la necesidad de código GraphQL específico en cada componente. El endpoint se puede acceder utilizando la función fetch y pasando la URL del endpoint. La respuesta del endpoint se puede devolver como props y utilizarse en el componente. Este enfoque es más seguro y sigue las mejores prácticas para obtener datos en Svelte.

Quiero salir prácticamente como lo que he hecho aquí. Pon eso allí. Y quiero devolver el estado 200. Porque es un endpoint. Voy a poner el estado 200, porque es una buena solicitud. Y en el cuerpo, este método, voy a querer poner las publicaciones. Así que no estoy seguro si voy a necesitar poner estos en rizos. Lo tomaré una vez que haya terminado aquí, vaya. Quítate eso. Y si obtienes un error, queremos devolver, ponerlo a 500, ahí vamos. Y un cuerpo de error. Ahí vamos. Así que es así. Así que necesito importar mi cliente aquí. Eso ha sido importante. Necesito importarlo a la etiqueta ql también. No me va a dejar hacer eso. Así que copiemos esto de aquí y peguémoslo allí. Bien, volvamos al chat. Todavía estoy bien. Oh, ahora desde mi cliente, vamos a, de nuevo, podrás ir a las publicaciones raíz y si solo digo, .json aquí, es, veo que esto está haciendo referencia a este archivo index.json.js aquí. Así que si presiono enter, se va y esta es la información del endpoint. Así que ahora puedo consultar esto, prácticamente como lo harías en, como un comando de búsqueda en el navegador. Así que en mi archivo de índice aquí, podría prescindir de cualquier tipo de gráfico code o cosas específicas aquí y simplemente usar un fetch desde el endpoint. Así que dentro de mi función de carga, puedo deshacerme de todo esto. Todavía voy a mantener las publicaciones de retorno porque quiero consultarlas desde el endpoint posts.json desde aquí. Así que, voy a decir respuesta de debajo de un peso de un fetch en mi jsonendpoint, y esto va a ser igual a un peso, aquí. post.json. Así que si, sí, si la respuesta está bien, solo voy a eliminar eso. Así que si la respuesta está bien, entonces voy a querer obtener las publicaciones en la respuesta json, y convertirlas en props. Así que ahora acabo de abstraer toda esa información, que estaba en este módulo de contexto aquí, con solo un fetch a un endpoint. 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á usando un endpoint de descanso para GraphQL, y eso va en contra del ethos de GraphQL, poder usar lo que quieras y dónde, pero para cómo está estructurado este proyecto, siempre habrá una lista de publicaciones que quieras agarrar, y para el índice de esa una publicación, como digamos para esta, podríamos pasar por lo mismo que hicimos de nuevo, inicialmente, o podríamos simplemente usar un endpoint y pasar el slug. Prefiero este enfoque porque es mucho más seguro. Estás obteniendo de un endpoint en lugar de obtener de HTTP en el cliente. Si hay, digamos, credenciales sensibles, se obtienen en el servidor en lugar de en el 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 ambientales. Así que esta es una forma mucho más segura de hacerlo. Volvamos al chat. Volvamos a post.json. Así que tienes un archivo de raíces post index.json.js. Y luego aquí, estás definiendo una función Get y luego solo vamos a meter la consulta de la página de índice que teníamos, solo 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 de GraphQL solicita aquí, y luego estamos devolviendo un estado 200 y cuerpo de publicaciones. Así que si tu code es el mismo que el mío, así que solo copia y pega eso. Así que si tu code es el mismo que eso, entonces voy a adivinar que es, donde, bueno, si es una URL no válida, solo estoy adivinando que no está obteniendo, la URL del archivo .env, que debería hacerlo. Así que siempre que tu endpoint esté definido como VITE subrayado GraphQL endpoint, y luego en tu cliente, estás pasando eso a tu cliente GraphQL, debería estar bien. Debería estar bien. Bien. Bueno. Así que Postdoc Jason está trabajando en el navegador. Sin embargo, la solicitud de index.svelt está dando el error. Bueno, volvamos a index.svelt. Debería parecerse a algo así. Así que solo copia, pega eso. Eso debería estar dentro de tu módulo de contexto de script. Y nada más ha cambiado en eso desde que nos movimos de un, hacerlo en el cliente a un endpoint. Oh, Mer, mer. Bueno, eso es, entonces, ¿cómo se ve el resto de tu módulo? ¿Qué tienes? Supongo que es solo, oh, ves, este es el problema que tengo cuando simplemente tomo ciegamente lo que CoPilot ofrece. Así que, eso debería ser respuesta bien, no respuesta bien. Así que, realmente lo siento. Eso fue solo yo siguiendo ciegamente lo que GitHub CoPilot puso en la pantalla. Así que, Dios lo siento, pruébalo sin el signo de exclamación. Bien. Mucho mejor ahora, creo que es el software, en realidad generó y ordenó SX-ON. Así que, eso fue Linux X Fighters, el primero que lanzó el experimento, hizo sus propias cosas uh, uh, de hecho no estaban tan mal porque la mayoría de sus páginas están en papel a prueba de grasa. Así que están en el iPhone reciente, así que no tienen que preocuparse por tanta escritura a mano o voz, Jason, ¿verdad? Lo siento, es, es un yo, no un tú, lo siento. Inventario post, no Jason, ¿he hecho eso completamente mal? Quiero decir, eso debería estar bien. ¿Qué estoy haciendo mal aquí? Oh Dios mío, Oh Dios mío. Lo siento mucho, sí.

15. Solución de problemas con SvelteKit Fetch

Short description:

La función load toma, porque esto no está en el navegador, este es un buen punto de aprendizaje. En realidad, no tenemos la API de fetch. Por lo tanto, eso necesita ser importado desde el kit de Svelte. Vamos a detener y comenzar eso de nuevo. Error irrecuperable en el índice. Oh, he hecho. Fin de la tecnología, así que en nuestra carga, si edge, que está esperando la búsqueda desde nuestro endpoint, está bien. Volvamos a poner esto en algunos VecTyps aquí. Queremos usar la consulta que definimos anteriormente en nuestro proyecto de Graph C y S. Vamos a pasar esta variable slug a esta consulta a un endpoint. Vamos a tener el slug. Echemos un vistazo a la página. Así que esa es la información en nuestro endpoint para esa publicación específica. He creado un archivo slug.json.js y esto toma un parámetro slug entrante, y luego estoy usando eso junto con una consulta que toma un parámetro slug y luego lo paso al cliente graph12. Déjame revisar el chat, asegurarme de que todos estén bien.

La función load 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 de fetch. Por lo tanto, eso necesita ser importado desde el svelte kit tiene su propio tipo de envoltorio de fetch. Así que si probamos eso, y probamos, refrescar. Pero no muestra nada. No, quiero decir, eso debería estar bien, ¿verdad? Vamos a detener y comenzar eso de nuevo. Revisemos la console. Error irrecuperable en el índice. Oh, he hecho. Fin de la tecnología, así que en nuestra carga, si edge, que está esperando la búsqueda desde nuestro endpoint, está bien. Así que si vas aquí, solo imprime esto. Solo pondré respuesta. Eso le dará un... Eso parece bien. Bien. ¿Es porque lo he envuelto en, lo he envuelto demasiadas veces en rizos? ¿Eso parece bien? Ahí vamos. He desestructurado una vez demasiadas, creo, en el endpoint aquí. ¿Dónde está? Así que lo estoy desestructurando aquí y luego... Eso está dentro del cuerpo de la publicación, por lo que debería estar bien. Pero sí, estaba tratando de hacerlo aquí también, pero no necesitaba. Así que, pido disculpas por la confusión. Así que revisamos el chat. Está funcionando. Bien, genial. Bien, entonces, volvamos a poner esto en algunos VecTyps aquí. Bien, para nuestra ruta ahora, así que para cada publicación. Esto parece tan basura, lo siento. Así que para cada publicación que queremos ir aquí, queremos usar la consulta que definimos antes en nuestro proyecto Graph C y S, que está aquí. Así que queremos usar algo como esto. Solo tengo que quitarme los auriculares. No puedo oírme hablar. Así que vamos a usar algo como esto, vamos a pasar esta variable slug a esta consulta a un endpoint. Así que vamos a ver esto. Eso va a parecerse mucho a este aquí, pero en lugar de como index.json, vamos a tener el slug. Así que cómo se ha hecho con las rutas de página en SA, tiene que ser el mismo tipo de formato de archivo. Así que si decimos nuevo archivo aquí, y esto va a estar basado en el slug, y esto va a ser un archivo .json.js de nuevo, y realmente podríamos simplemente robar la mayor parte de esta información de aquí y poner eso aquí. Así que eso es code repetido, pero esto va a ser la consulta de nuestros proyectos aquí. Así que solo una copia de eso. Y ahora, y presiona guardar. Bien, quiero variables para la variable slug aquí. Así que para obtener eso, podemos obtener la información fuera del cuerpo de la solicitud. Así que solo vamos a registrar eso en la console por ahora. Sí, parámetros. Así que digamos este slug. Así que deberíamos decir ahora es esto es Jason en la consulta para ese slug. Bien, slug debe estar definido. Todavía no lo tenemos definido, pero deberíamos haberlo registrado aquí. Así que tenemos un slug técnico SEO graph CMS. Así que puedo sacar eso de los parámetros de solicitud aquí. Solo para estructurarlo directamente de los parámetros para decir slug. Va a igualar los parámetros de solicitud. Puedo usar ese slug como una variable para pasar al cliente aquí. Así que podría hacer algo así. Echemos un vistazo a la página. Si eso va a refrescar para nosotros. Así que eso está vacío. Así que si he hecho lo mismo con la estructuración de las publicaciones, cuando no necesitaba. Lo sé, porque solo estoy agarrando una publicación esta vez, no publicaciones. Así que solo reemplaza eso, echa otro vistazo. Ahí vamos. Así que esa es la información en nuestro endpoint para esa publicación específica. Así que, en el proyecto ahora, espera, solo voy a esperar aquí para que todos puedan tener una idea de lo que está pasando. Me encanta que hayas usado el emoji del hombre bailando. Bien, así que revisemos aquí. Espera, hagamos esto un poco más grande. Bien, así que quiero decir, he creado un archivo slug.json.js y esto toma un parámetro slug entrante, y luego estoy usando eso junto con una consulta que toma un parámetro slug y luego lo paso al cliente graph12. Así que lo que podría hacer con esto en lugar de simplemente tenerlo allí así, vamos a hacer otra variable con objetos aquí y eso dará igual slug, y solo pasamos las variables. Y volvamos al endpoint. Eso está funcionando, ahí vamos. Bien, déjame revisar el chat, asegurarme de que todos estén bien.

16. Mostrando Información de la Publicación y Estilizando

Short description:

Para mostrar la información de una publicación, podemos usar el mismo patrón que el endpoint 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 endpoints, el enrutamiento y la consulta de datos desde nuestro endpoint. Ahora podemos hacer que la página se vea bien agregando elementos de alambre de margarita, un encabezado y un pie de página. También podemos utilizar información del endpoint para crear una barra de navegación dinámica. Si Tailwind no está funcionando, asegúrate de que la clase Pros esté configurada en el archivo CSS de Tailwind agregando los plugins necesarios.

Ahora, para lo que he hecho con este endpoint de slug de publicación, puedo usar el mismo patrón. Eso es lo que hice en el archivo de índice aquí. Voy a tomar todo eso, lo pondré aquí y solo cambiaré. Esto va a ser, esto va a obtener la publicación, no dot JSON. Esto va a ser un slash slug. Slug dot 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. Solo voy a desestructurar estos, en realidad. Y puedo obtener el slug del objeto de parámetros. Obtén el slug. Esto va a ser publicaciones. Quiero que esta prop sea una publicación, esta publicación. Y esto es publicación. Solo voy a traer esto de vuelta y deshacerme de todo esto. Así que ahora, si vuelvo al navegador y me deshago de este.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 data que pondremos aquí el extracto. En realidad, voy a necesitar la publicación también. Así que vamos a ir aquí. Vamos al esquema y a la publicación. Solo sigue lo que se llama contenido. Así que voy a necesitar contenido también. Volvamos al API Playground, publicación. Solo pongamos esto a las etiquetas. Pondremos contenido. Creo que era un campo de texto enriquecido. Así que aquí puedo decir HTML o markdown en bruto. Creo que diré, digamos HTML por ahora y guardemos eso. Necesito eso. Eso lo está poniendo en mi endpoint aquí. Genial. Ahora puedo empezar a trabajar en la representación de algo de esta información aquí. Vamos a ver el chat, asegurémonos de que todos estén bien. Bien, así que solo dame un segundo, espera. Oh, ahí vamos. Lo siento, encendí algunas luces, no puedo ver nada. ¿Dónde estábamos? Bueno, es empezar a representar algo de información para esta publicación, supongo. Así que vamos a tener, pongamos una imagen de portada. Solo voy a empezar a pegar algo de marcado para esto en realidad. Pongamos una pestaña de artículo. Y dentro de la etiqueta del artículo aquí, podría obtener el post.content. ¿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 convertirá tu html en un formato adecuado de HTML, pero debes tener cuidado de que confíes en la fuente de ese HTML, o lo desinfectes antes de mostrarlo. Confiamos en la fuente porque la pusimos allí. Entonces, ¿qué más podemos poner en, podríamos usar podríamos usar la clase de prosa aquí también, donde se ve mucho más presentable. Así que esto es lo que pasa con, ¿dónde puedo poner esto? Vamos a ponerlo allí. No, no eso. Oh sí. Oh, no podía moverlo porque estaba en pantalla completa. Vale. Sí, así que la etiqueta pro aquí básicamente añade todas las clases que necesitamos para este contenido. Así que de lo contrario probablemente tendríamos que hacer algo como crear un gran archivo de clases CSS solo para cuidar todas las posibilidades de cómo queremos los varios elementos HTML que vienen del CMS formateado. Así que tenemos eso de Tailwind, Dios, ¿cómo se llama? Tailwind, Tipografía de Tailwind CSS que se encarga de mucho de eso por nosotros. Vamos a formatearlo mucho más bonito. Vale. Así que hemos cubierto los endpoints. Hemos cubierto el enrutamiento y hemos cubierto la consulta de data desde nuestro endpoint. Sé que esto es muy rudimentario. Volvamos a la página de inicio aquí. Tenemos una forma de visitar la, 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 nos queda poco menos de una hora ahora. Así que vamos a ver el chat, asegurémonos de que todos están bien. Bien, entonces, ¿hay algo que alguien en el grupo quiera reiterar, repasar de nuevo, o algo más? Así que lo que podríamos hacer es que podríamos simplemente hacer que se vea bonito, poner algunos elementos de alambre de margarita y como un encabezado y un pie de página y podríamos usar algo de la información del endpoint 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, ¿significa la clase Pros? ¿Lo tienes configurado en tu archivo CSS de Tailwind? Así que, en el Tailwind, lo siento, el Tailwind CSS, la configuración de Tailwind, necesitas tener plugins configurados aquí. Creo que los publiqué en el chat antes, 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 estás experimentando problemas con Tailwind, intenta ejecutar 'Svelte Add Tailwind' para configurar todo. Revisa la configuración y la configuración de preprocesamiento para asegurarte de que todo está configurado correctamente.

¿Instalaste el, okay. ¿Tienes Tailwind CSS Typerography en tu archivo package.json? Ooh. Lo siento. Así que esperaré en el, ambos plugins están instalados okay. En el archivo de diseño, ¿dónde está? Aquí está. Así que necesitas importar tu app.css. Eso debería haberse hecho cuando el spell ad lo configuró para el proyecto, también podría ser una idea ver si hay dos slots aquí también. Si ya tienes un slot definido, a veces solo trae otro slot ahí. Así que también podría ser bueno comprobar eso.

Hola. Okay. Entonces, en tu Slug dot spell, ¿estás diciendo que la clase pros no se está aplicando? Echemos un vistazo rápido a esto en, mira aquí. Así que si hago clic en uno de estos e inspecciono, vamos a acoplar esto al lado aquí. Lo ves. Si no ves la clase pros aplicada, entonces, no estoy seguro si es un problema de configuración de tailwind, o qué. No lo sé. Si tienes todas esas cosas instaladas entonces, no debería haber problemas con su funcionamiento realmente. Detén y reinicia el servidor de desarrollo tal vez. Bien. Entonces, Svelte añade Terwind. Solo ejecutamos eso para configurar el proyecto. Entonces, eso simplemente añadirá. Echemos un vistazo. A lo que añade. Entonces, Svelte o Terwind añadirán tu configuración, añadirán un archivo post CSS.config.cjs. Creo que pondrá un preproceso en Svelte config.js. Estoy seguro de eso. Y luego en tu archivo de diseño, debería importar el app.css, que es este. Me gusta echar un vistazo rápido a eso. Necesito tomar un rápido descanso de confort, así que volveré en breve.

Okay. Gracias, Hugo. Antoine, ¿sigues teniendo problemas con Tailwind? Sí, deberías simplemente usar mejor el Svelte Add, como dijiste, Svelte Add Tailwind y eso debería configurar todo para ti, luego puedes añadir DaisyUI y el plugin de topografía de Tailwind CSS después. Entonces, ese fue 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 que el archivo layout.svelte es donde importas tu, el archivo CSS, que está aquí. Y lo único que se me ocurre es cómo está configurado. Entonces, dices que tienes tus plugins configurados. Eso está bien. Svelteconfig, SvelteAd debería haber añadido el preproceso 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 puedo pensar en ningún otro lugar donde podría haber un problema.

18. Trabajando con Endpoints de GraphQL

Short description:

Hemos consultado información del endpoint de GraphQL directamente en nuestro archivo de índice utilizando el módulo Context. También hemos abstraído el cliente en su propio archivo para su reutilización. Además, hemos definido un endpoint en SvelteKit para recuperar datos del endpoint de GraphQL. Este endpoint nos permite especificar el tipo de retorno, como JSON o XML. Al usar el método fetch, podemos llamar al endpoint 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 endpoint para su reutilización.

Bien. Entonces, sigamos con lo que estamos haciendo aquí. Así que, tenemos nuestras páginas. Así que, puedo navegar entre ellas. Hagamos que esto no parezca tan terrible. Quizás es solo un poco menos terrible. Entonces, agregaré, digamos una imagen. Quizás la imagen de portada aquí, supongo. O al menos, la URL de la imagen de portada del post. Pongamos esto en algunas voces rizadas, me pregunto si lo llamamos título, ¿o es título? Echemos un vistazo a eso, un poco mejor. Mytribe, pongamos una clase aquí, ¿eso es 3xl supongo? Y el nombre... Pongamos también las etiquetas, estoy bastante seguro de que podemos usar... ¿Son esas insignias? Insignia. Hagamos la insignia principal, sí. Use un hechizo cada uno. Y diremos post.tags, creo que es, y eso será una etiqueta. Clase de insignia... Principal, supongo. Pondré la etiqueta aquí. Veamos cómo se ve eso. Uf, eso se ve terrible. Así que necesitamos usar la insignia. Así que necesitamos usar la insignia y la insignia principal, supongo. ¿Cómo va eso? Y luego la fecha, supongo también. Es a tiempo. Vamos a entrar en la formateación de fechas y cosas en JavaScript. Parece bien. Bien. Entonces, Antoine dices gracias, mucho por ayudarte. OK ahora estás bien. ¿Listo para ir? OK, entonces. OK. Okey dokey. Solo intentando pensar en qué más podríamos hacer. ¿En los últimos, qué? 35 minutos aquí. Creo que eso es realmente todo, así que vamos a hacer un rápido recuento de lo que hemos hecho. Entonces, intentemos hacer un rápido resumen. Así que comenzamos consultando la información del endpoint de GraphQL directamente en nuestro archivo de índice aquí. Y lo hicimos dentro del módulo Context dentro de la función de carga de Spellkit. Así que esto nos permite obtener información de... como información externa o información desde dentro del proyecto antes de que se monte el componente. Y eso significa, como, es visible en el navegador. Así que primero, lo hicimos definiendo todo dentro de esta función de carga, pero eso realmente no es muy componentizado. No puedes reutilizarlo. Así que enviamos el cliente a su propio archivo aquí, que luego podríamos importar a cualquiera de nuestros archivos Svelte. Y lo llevamos un paso más allá, en lugar de tener... definiendo consultas dentro de los archivos Svelte. Hicimos un paso más, solo desde allí a un endpoint. Así que un endpoint en SvelteKit puede ser obtenido por un JSON, no puedo escribir JSON, bueno... puedes definir tu método HTTP, ofreciendo definir tu endpoint HTTP como una ruta dentro de la carpeta de rutas en el proyecto, puedes definir el tipo de data también. Así que puse el dot JSON dot 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 cambiar el dot JSON a dot XML, dot JS, y ese es el tipo de retorno de esa función en el endpoint. Así que es realmente flexible en lo que obtienes de tu endpoint. No tienes que hacerlo así. Podrías 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 estás obteniendo de este endpoint, porque es dot JSON. Así que hemos hecho eso, encontramos nuestras llamadas GraphQL a un endpoint get. Y luego simplemente llamamos a esos con el método fetch yendo allí, Scott, con el navegador SpokeKit fetch, fuimos a nuestro endpoint y luego devolvimos información de la misma manera que lo hicimos cuando 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 a través de esos como deseemos. Así que con lo que hicimos aquí, simplemente estamos recorriendo cada uno, seleccionando la imagen, el título y el extracto, y luego teniendo una raíz que estamos definiendo, para apuntar a donde el slug de ese post. En nuestra raíz de posts aquí, estamos trayendo el slug de los parámetros de la página, que podemos, podríamos hacer lo mismo que lo que hicimos en la página de índice, que es simplemente definir todo el cliente y solicitar aquí, pero simplemente abstraímos esto nuevamente a otro endpoint y el mismo tipo de pan, lo repetimos aquí, así que estamos obteniendo nuestras props de la respuesta de nuestra función de carga aquí, y simplemente estamos renderizando todo y lo ponemos en el marcado en la página. ¿Puedes abrir de nuevo el archivo slug.json? Aquí tienes. Así que en el archivo slug.json aquí, estamos obteniendo la solicitud que está entrando. Entonces, request.params es donde va a estar el slug. Y luego estamos usando ese slug para nuestra consulta GraphQL aquí. Estamos agregando el... No necesitamos hacer esto, pero esto es solo una forma de ayudarte a visualizar lo que entra en el cliente GraphQL aquí. Estamos poniendo nuestro slug en una variable de variables.

19. Depuración y Despliegue

Short description:

Simplemente estamos estructurando el post a partir del resultado de la solicitud de la consulta con esa variable que se pasa. Y simplemente estamos obteniendo el post devuelto 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 volver a desplazarme hasta la parte inferior.

Simplemente estamos estructurando el post a partir del resultado de la solicitud de la consulta con esa variable que se pasa. Y simplemente estamos obteniendo el post devuelto 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 volver a desplazarme hasta la parte inferior. Entonces, Mark, estás obteniendo un 404. Simplemente está esperando tu propio mensaje. Entonces, ¿puedes hacer, puedes hacer, sí, como lo he hecho aquí, simplemente agregar. Entonces, ¿podemos volver a los archivos reales? ¿Puedo leer correctamente la imagen de portada de null? Bueno, en lugar de intentar debug eso ahora. Entonces, desde tu plugin de índice, puedes seleccionar una ruta aquí y mostrará la información. Si puedes hacer eso, entonces simplemente intenta takcon.json al final, y eso debería funcionar. Entonces, si eso no funciona, entonces no puedo ver cómo esto debería estar funcionando porque está obteniendo la información del punto final. Entonces, si nos das un poco más de información, podría intentar ayudarte a debug. No funciona sin .json. Entonces, no está funcionando en absoluto. Entonces, echemos un vistazo a tu archivo slug.json. Solo, solo lo publico en el chat. Eso debería ver, creo, si pones eso en tu archivo slug.json.js. Voy a volver a mi archivo slug.svelt aquí. Y simplemente voy a volcar el contenido de este archivo de post. Y debug ese problema para la imagen de portada. Entonces la imagen de portada está aquí, ¿verdad? Y debería tener una URL. Entonces post.coverimage.URL, no sé de qué te estás quejando. Bueno, parece que está bien ahora. ¡Oh, bien! Bueno, solo pausa aquí un segundo para Markin, asegúrate de que está bien. Y una vez que hayamos hecho eso, simplemente cubriremos el despliegue muy rápido, y creo que terminaremos. Entonces voy a usar Vercel, y una muy buena manera de empezar con Vercel, si no lo tienes instalado ya, ups, ¿qué he hecho ahí? Porque puedes instalarlo como un, como, un paquete global de NPM, pero si no lo tienes instalado, puedes usar, creo que es npx-vercel. Y eso configurará el CLI para ti de inmediato. Pero esperemos un poco para mark-in, asegúrate de que está bien. Todavía hay errores, así que si no es el, si no es el punto final mark-in, supongo que es cómo lo llamas a él? Entonces lo que haré es que simplemente desplegaré esto y empujaré este code a GitHub y hagámoslo ahora en realidad, solo para poder compartir en el chat y todos tienen un enlace a él. Entonces despleguémoslo primero, así que voy a usar npx-yself. Esto me va a preguntar una configuración y despliegue, GraphQL Galaxy Workshop, simplemente voy a decir sí. Lo voy a publicar en mi cuenta. No voy a vincularlo a un proyecto existente, le voy a dar ese nombre y está en las raíces. Va a decir no, el predeterminado aquí. Entonces esto va a ir a construir a Vercel, pero esto no va a hacer mucho en Vercel porque la variable de entorno no está allí. Entonces 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 esto se instale. O si lo estoy haciendo desde casa. Entonces, mientras tenemos esta gran pausa, esperando a que esto se construya, podría ir y publicar esto en GitHub. Parece que ha hecho su cosa y estoy parcialmente confundido sobre por qué está mostrando 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í. Entonces, simplemente vamos a buscar desde aquí. Oh espera, el punto final está ahí. ¿Cómo está el punto final ahí? Entonces, si volvemos a mi code, estoy bastante seguro de que el punto final no está detallado en ningún lugar aparte del archivo .env. Ah, también ha subido el archivo .env. Pero eso debería ser ignorado en Git, ¿verdad? Bueno, eso está bien. Entonces, lo que voy a hacer es um, como un proyecto para esto en GitHub. Y digo nuevo repositorio, y le voy a dar el nombre del proyecto, que es GraphQL Galaxy Workshop 2021, copio eso, y lo pego allí. y digo crear repositorio, y simplemente copio esto, en el terminal aquí, Vamos a matar eso, Bueno, entonces, voy a necesitar entrar en él, Ahora puedo agregar ese remoto, darle la rama principal, no maestro, Ahí vamos. Rift name Riftshead, Maine, no encontrado. Huh, supongo que voy a necesitar hacer algunos compromisos a él también. Entonces, vamos a ir a mi finalización de compromisos aquí y decir nuevas características ahora, vamos a decir introducir nuevas características, digo init. Bueno, intentemos eso de nuevo. Bueno, y empujemos esto. Entonces podemos ir a GitHub, puedo actualizar esta página y no hay archivo .env, lo cual es fantástico. Entonces ahora si vuelvo a Vercel aquí y voy al proyecto y digo conectar al repositorio de Git, y es GitHub y este es el GraphQL Galaxy Workshop, y digo conectar. Entonces, cualquier empuje ahora a ese repositorio debería ser construido automáticamente con Vercel aquí. Entonces, ya tenemos este primero. Ahora tengo curiosidad por si hago un cambio ahora, digamos que voy al ReadMe, simplemente cambiaría esto a, ahí vamos. Entonces, si digo actualizar ReadMe, y prueba eso. Entonces, si volvemos a Versel ahora, debería ser desplegado al empujar, oh, necesito empujar eso yo mismo. Entonces eso está empujando a Versel ahora. Entonces, si reviso esto, debería tenerlo construido, aquí vamos. Entonces ahora voy a decir que esto no se construye porque el punto final de la API no está aquí. Entonces podemos ir rápidamente a configurar en 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 necesita tener un archivo package.json. Anteriormente, Versel permitía empujar cualquier cosa a la plataforma, pero ahora se ha vuelto más selectivo. Puedes navegar a una subcarpeta y desplegarla. Al desplegar desde un entorno local, Versel empuja todo independientemente del archivo de ignorar. Para definir el punto final, necesitas 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 la instantánea cuando se añaden zapatos a la aplicación. En la sección de componentes, puedes encontrar los últimos datos, capturas de pantalla y número de pies. No dudes en hacer cualquier pregunta sobre el repositorio.

No creo que podamos terminar. Déjame revisar el chat. Marken todavía está luchando. Así que aquí vamos, aquí está el repositorio en el que todos hemos estado trabajando juntos Marken. Así que puedes echarle un vistazo. ¿Puede Versel desplegar una subcarpeta dentro de un repositorio seleccionado? Sí. Pero depende de lo que haya en esa carpeta. Así que si es, creo que necesita tener un package.json. No estoy seguro. Solía ser que él podía simplemente empujar cualquier cosa. Podrías simplemente decir, V-C o Versel y simplemente empujar cualquier cosa que necesitaras. Pero creo que se ha vuelto un poco más selectivo ahora cuando cambian las plataformas. Hace un tiempo, hace un par de años, podrías usarlo como un CDM simplemente empujando 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 de la masterclass? Volvamos a Versel. Así que estoy diciendo que debería haber un error. Yay, bien. Bien, esto es porque el punto final no ha sido definido. Así que supongo que cuando haces Versel desde localmente, simplemente empuja todo independientemente de 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. Voy a necesitar tener esto como el nombre y luego la URL como el valor, así que si digo añadir, 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 aparte de las variables faltantes, así que supongo que si refresco esto deberíamos obtener algunos registros, tal vez no, ahí vamos. Si hago eso debería ser capaz de traer de vuelta algunas de las variables y cargarlas para mí. Genial, super rápido. Ahora si vas a visitar esta página, la Configuración de Validation, podrás ver los colores de la instantánea cuando los zapatos se añaden a la aplicación. De nuevo, vas a componentes y aquí puedes ver todos los últimos de堡data, capturas de pantalla, número de pies, voy a dejar un par de minutos para el chat, específicamente el repositorio que creaste allí. ¿Alguna pregunta, grita? De lo contrario, dejando un par de minutos, ¿terminamos?

Watch more workshops on topic

Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
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.
End-To-End Type Safety with React, GraphQL & Prisma
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
Sabin Adams
Sabin Adams
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 for React Developers
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
Roy Derks
Roy Derks
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.
Build a Headless WordPress App with Next.js and WPGraphQL
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
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.
Relational Database Modeling for GraphQL
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Relational Database Modeling for GraphQL
Top Content
WorkshopFree
Adron Hall
Adron Hall
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
Building GraphQL APIs on top of Ethereum with The Graph
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Building GraphQL APIs on top of Ethereum with The Graph
WorkshopFree
Nader Dabit
Nader Dabit
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

Full Stack Documentation
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.
From GraphQL Zero to GraphQL Hero with RedwoodJS
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!
Local State and Server Cache: Finding a Balance
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.
Batteries Included Reimagined - The Revival of GraphQL Yoga
GraphQL Galaxy 2021GraphQL Galaxy 2021
33 min
Batteries Included Reimagined - The Revival of GraphQL Yoga
The Guild has recently released Envelop - a new, modern GraphQL Server Framework and plugin system. In this talk I’ll share a brief overview of Envelop and why you should probably upgrade your existing GraphQL server to it.
Rock Solid React and GraphQL Apps for People in a Hurry
GraphQL Galaxy 2022GraphQL Galaxy 2022
29 min
Rock Solid React and GraphQL Apps for People in a Hurry
In this talk, we'll look at some of the modern options for building a full-stack React and GraphQL app with strong conventions and how this can be of enormous benefit to you and your team. We'll focus specifically on RedwoodJS, a full stack React framework that is often called 'Ruby on Rails for React'.