Introducción a Gatsby
¿Por qué Gatsby? Seguridad y Velocidad
¿Qué es Gatsby?
Diferencias entre SPA, SSR y Gatsby
Preparando el entorno
Requisitos previos y herramientas de desarrollo
Gatsby y Gatsby CLI y Starters
Configuración de ESLint
Fundamentos de Gatsby
Presentación y Estructura de Archivos de nuestro proyecto: Platziswag
Ecosistema de plugins
Usando React para manejar la parte visual e interactiva de nuestra aplicación
Creando la vista con React
Router en Gatsby y Componente Link
Layout en Gatsby
Graphql en Gatsby
¿Cómo funciona GraphQL en Gatsby?
Accediendo a nuestros datos en Gatsby desde GraphQL
Queries, Edges (conexiones) y Nodos en Gatsby
Consultas en GraphQL desde React
Usando plugins en Gatsby
Instalación y configuración de plugins
Imágenes como fuente de datos
Plugins de transformación
Estilizando nuestros componentes con styled-components
Estilos Globales con styled-components
Stripe checkout
Introducción a la API de Stripe Checkout
Agregando productos a nuestra tienda en línea
Productos en React
Generando páginas programáticamente
Creando páginas en función de los datos
Manejo de Gatsby Templates
Terminando la Vista de Detalle de los Productos
StaticQuery vs. useStaticQuery
Construyendo el Carrito de Compras: useContext
Construyendo el Carrito de Compras: Vista
Construyendo el Carrito de Compras: Agregar productos al carrito
Comprando productos
Gatsby a producción
Gatsby build para compilar nuestro proyecto
Deploy a Netlify
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Invierte en tu educación con el precio especial
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
Imágenes como fuente de datos
17/33Aportes 4
Preguntas 1
se puede hacer un query con props como variables? En este caso pasaría el nombre de la imagen y dentro del componente hace el query para buscarla
Imágenes como fuente de datos
Si usamos GraphQL con este query:
{
allFile{
edges{
node{
id
relativePath
prettySize
publicURL
}
}
}
}
Obtendremos este resultado:
{
"data": {
"allFile": {
"edges": [
{
"node": {
"id": "c50f901b-53a0-5f6b-8f04-03f9f33226df",
"relativePath": "Logo.png",
"prettySize": "6.32 kB",
"publicURL": "/static/3a035444978974a51ae8287cb2ff29f3/Logo.png"
}
},
{
"node": {
"id": "d4447f6e-526b-52a1-859c-43b2e998fc6f",
"relativePath": "cart.png",
"prettySize": "515 B",
"publicURL": "/static/92420c0eceec769bc40ef134a2fcfdcf/cart.png"
}
},
{
"node": {
"id": "056b5e8a-6037-5d04-ab2d-66cc9398b29f",
"relativePath": "gatsby-icon.png",
"prettySize": "21.2 kB",
"publicURL": "/static/4a9773549091c227cd2eb82ccd9c5e3a/gatsby-icon.png"
}
},
{
"node": {
"id": "0a25e8ac-9c62-5144-8f94-f803206f686e",
"relativePath": "mug.png",
"prettySize": "56.5 kB",
"publicURL": "/static/dee1beb3e04c46ffe81e08f73e3e4633/mug.png"
}
},
{
"node": {
"id": "bea94ad1-92a7-5ab0-b1fb-ef0f0c80114e",
"relativePath": "stickers1.png",
"prettySize": "44.8 kB",
"publicURL": "/static/3ed3194a818a11c32a80aa72b0ebe480/stickers1.png"
}
},
{
"node": {
"id": "f9ccd07b-d131-54a7-90da-5b269c28e511",
"relativePath": "camiseta.png",
"prettySize": "97.1 kB",
"publicURL": "/static/d442a8b550c7b907319f1107980f3c59/camiseta.png"
}
},
{
"node": {
"id": "6fc38d8c-5d39-5088-8f4e-dccf699c3e43",
"relativePath": "hoodie.png",
"prettySize": "83.8 kB",
"publicURL": "/static/49b11cd38984eeb59ed83e35872bedcb/hoodie.png"
}
},
{
"node": {
"id": "6fc3aabd-b0db-5725-8b0c-8cf14b3a4dd1",
"relativePath": "icon.png",
"prettySize": "126 kB",
"publicURL": "/static/fc299bb0dde2432db7f768171b09d328/icon.png"
}
},
{
"node": {
"id": "2e44d622-9eec-5091-b26a-5b358689aa0f",
"relativePath": "pin.png",
"prettySize": "71.1 kB",
"publicURL": "/static/43c2d2ed4ca064ce21c4b53ff37fb57a/pin.png"
}
},
{
"node": {
"id": "07583d9f-5c0b-5ab2-97dd-ddd3b7fa6bb6",
"relativePath": "stickers2.png",
"prettySize": "110 kB",
"publicURL": "/static/25f529332fa038fc71b6c83fd9d7a4cb/stickers2.png"
}
},
{
"node": {
"id": "993b466a-67ad-5dd4-a9c9-023fe6e0ac6a",
"relativePath": "gatsby-astronaut.png",
"prettySize": "167 kB",
"publicURL": "/static/6d91c86c0fde632ba4cd01062fd9ccfa/gatsby-astronaut.png"
}
}
]
}
},
"extensions": {}
}
Si están ocupando gatsby-plugin-image y tienen imagenes dinamicas es decir las traen desde un CMS o cualquier otra fuente de datos se ocupa el componente GatsbyImage junto a getImage no soporta svg
https://www.gatsbyjs.com/plugins/gatsby-plugin-image/#dynamic-images
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?