Imágenes como fuente de datos

Clase 17 de 33 • Curso de Desarrollo de Aplicaciones Web con Gatsby JS

Pablo Maurig

student•

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

Miguel Angel Reyes Moreno

student•

Imágenes como fuente de datos

Working with Images in Gatsby

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": {}
}

Willy Da Conceicao

student•

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

David Santiago González Ramos

student•

Tengo una duda, por qué en este query, no se inicia con la palabra reservada query como si se hizo en la clase anterior??

Cristian Blandon

student•

Cuando haces queries en GraphQL, la palabra query es opcional... Puedes ponerla y abrir llaves, o solo abrir llaves y por defecto se entenderá que quieres hacer una query.

{
  "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": {}
}

Imágenes como fuente de datos

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