Introducci贸n a Gatsby

1

驴Por qu茅 Gatsby? Seguridad y Velocidad

2

驴Qu茅 es Gatsby?

3

Diferencias entre SPA, SSR y Gatsby

Preparando el entorno

4

Requisitos previos y herramientas de desarrollo

5

Gatsby y Gatsby CLI y Starters

6

Configuraci贸n de ESLint

Fundamentos de Gatsby

7

Presentaci贸n y Estructura de Archivos de nuestro proyecto: Platziswag

8

Ecosistema de plugins

9

Usando React para manejar la parte visual e interactiva de nuestra aplicaci贸n

Creando la vista con React

10

Router en Gatsby y Componente Link

11

Layout en Gatsby

Graphql en Gatsby

12

驴C贸mo funciona GraphQL en Gatsby?

13

Accediendo a nuestros datos en Gatsby desde GraphQL

14

Queries, Edges (conexiones) y Nodos en Gatsby

15

Consultas en GraphQL desde React

Usando plugins en Gatsby

16

Instalaci贸n y configuraci贸n de plugins

17

Im谩genes como fuente de datos

18

Plugins de transformaci贸n

19

Estilizando nuestros componentes con styled-components

20

Estilos Globales con styled-components

Stripe checkout

21

Introducci贸n a la API de Stripe Checkout

22

Agregando productos a nuestra tienda en l铆nea

23

Productos en React

Generando p谩ginas program谩ticamente

24

Creando p谩ginas en funci贸n de los datos

25

Manejo de Gatsby Templates

26

Terminando la Vista de Detalle de los Productos

27

StaticQuery vs. useStaticQuery

28

Construyendo el Carrito de Compras: useContext

29

Construyendo el Carrito de Compras: Vista

30

Construyendo el Carrito de Compras: Agregar productos al carrito

31

Comprando productos

Gatsby a producci贸n

32

Gatsby build para compilar nuestro proyecto

33

Deploy a Netlify

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Plugins de transformaci贸n

18/33
Recursos

gatsby-transformer-sharp:

Se encarga de crear nuevas versiones de nuestras im谩genes con diferentes tama帽os, formatos (.webp, .png, entre otros) y calidad.

gatsby-image:

Utiliza la informaci贸n de gatsby-transformer-sharp para cargar las versiones m谩s livianas de nuestras im谩genes (utilizando el tama帽o y formato que mejor se adapten al usuario) y luego cambiarlas por las versiones actualizadas de mejor calidad, todo esto con el fin de mejorar el tiempo de carga inicial de nuestra aplicaci贸n.

Para usarlo solo debemos seguir los siguientes pasos:

Importar StaticQuery y graphql desde gatsby:

// src/components/image.js
import { StaticQuery, graphql } from 'gatsby';

Importar Img desde gatsby-image:

// src/components/image.js
import Img from 'gatsby-image';

Utilizar graphql para crear una consulta en la propiedad query de StaticQuery y consumir los datos desde la propiedad render:

// src/components/image.js

<StaticQuery
  query={graqhql`
    query GET_IMAGE {
      icon: file(relativePath: { eq: "icon.png" }) {
        childImageSharp {
          fluid(maxWidth: 1000) {
            ...GatsbyImageSharpFluid
          }
        }
      }
  `}
  render={data => {
    console.log(data);

    return <Img fluid={data[name].childImageSharp.fluid}/>;
  }}
/>

Aportes 19

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Debemos usar el componente StaticQuery para hacer consultas en GraphQL desde cualquier archivo o componentes que no este en la carpeta src/pages.

Hay otra forma de traer las imagenes dependiendo del nombre que obtenga como propiedad el componente.

import React from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

const Image = ({ name }) => {

  return (
    <StaticQuery
      query={
        graphql`
        query {
          allImageSharp {
            edges {
              node {
                fluid(maxWidth: 500) {
                  ...GatsbyImageSharpFluid
                  originalName
                }
              }
            }
          }
        }

      `
      }

      render={data => {
        const image = data.allImageSharp.edges.find(
          edge => {
            return edge.node.fluid.originalName === name
          }
        )

        if (!image) {
          return null
        }

        return <Img fluid={image.node.fluid} />
      }}
    />
  )
}

export default Image

obtenemos las imagenes que tenemos en el proyecto y devolvemos la que estamos necesitando por propiedad para no tener que generar una query por cada imagen que se necesite, solo se llama el componente con el nombre de la imagen y ya.

En la versi贸n actual de Gatsby se usa el hook useStaticQuery, se puede implementar la soluci贸n que plantean los compa帽eros, pero se debe tener en cuenta que si tenemos muchas im谩genes en nuestro sitio, se puede ver afectado el performance 馃憖

import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'
import Img from 'gatsby-image'

const Image = ({ name }) => {
  const data = useStaticQuery(graphql`
    query GET_IMAGE {
      images: allImageSharp {
        edges {
          node {
            fluid(maxWidth: 500) {
              originalName
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  `)

  const img = data.images.edges.find((edge) => edge.node.fluid.originalName.split('.')[0] === name)
  return img ? <Img fluid={img.node.fluid} /> : null
}

export default Image

Si quieren hacer un componente para cargar cualquier imagen de manera general, les dejo este componente.

import React from 'react';
import Img from 'gatsby-image';
import { StaticQuery, graphql } from 'gatsby';

function renderImage(file) {
  return <Img fluid={file.node.childImageSharp.fluid} />
}

const MyImg = function (props) {
  return <StaticQuery
    query={graphql`
      query {
      images: allFile(filter:{ extension: { regex: "/jpeg|jpg|png|gif/"}}) {
      edges {
        node {
          extension
          relativePath
          childImageSharp {
            fluid(maxWidth: 1920) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
    }
    `}
    render={({ images }) => renderImage(images.edges.find(image => image.node.relativePath === props.src))}
  />
}
export default MyImg;

Para usarlo solo necesitan pasar como de prop la ruta relativa de su imagen.

<MyImg src={relativePath} />

Usando hooks para traer la imagen.

import React from 'react';
import { graphql, useStaticQuery } from 'gatsby';
import Img from 'gatsby-image';

export default function Image({ name }) {
    const data = useStaticQuery(graphql`query {
        icon: file(relativePath: {eq: "icon.png"}) {
            childImageSharp {
                fluid(maxWidth: 500) {
                    ...GatsbyImageSharpFluid
                }
            }
        }
    }`);
    return (<Img fluid={data[name].childImageSharp.fluid} />);
};```

Hola!!!
A los usuarios de Mac les muestra el error de la imagen (33% Generating image thumbnails
ERROR)
. Lo solucione ejecutando este comando rm -rf node_modules y luego volver a instalar: npm install.

Actualmente este m茅todo para las im谩genes ya no se utiliza en Gatsby, ya que en la misma p谩gina indica que est谩 obsoleto.

Ahora se utiliza 鈥淪taticImage鈥

https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image

Ocupando gatsby-plugin-image

import React from "react"
import { graphql, useStaticQuery } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"

const Image = ({ name, alt }) => {
  const data = useStaticQuery(graphql`
    query {
      icon: file(relativePath: { eq: "icon.png" }) {
        childImageSharp {
          gatsbyImageData(
            width: 200
            placeholder: BLURRED
            formats: [AUTO, WEBP, AVIF]
          )
        }
      }
    }
  `)
  return (
    <GatsbyImage image={getImage(data[name].childImageSharp)} alt={alt ?? ""} />
  )
}

export default Image

Por cierto, si no te funciona el ctrl + space, para ver las opciones en GraphiQL.
A mi me funciona usando option + space.

As铆 me que un componente con gatsby-plugin-image, paso como props image=鈥渘ombre.jpg鈥 y alt=鈥渁lgo鈥, con esto puedo usar este componente para toda la im谩genes.

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"

const ImageComponent = (props) => {

   const imageQuery = useStaticQuery(graphql`query{
	allFile(filter: {ext: {regex: "/(jpg)|(png)/"}}) {
	   edges {
	      node {
	         base
                 childImageSharp {
                    gatsbyImageData(transformOptions: {fit: CONTAIN})
                 }
              }
           }
        }
     }`)

   const data = imageQuery.allFile.edges.find(edge => {
      return edge.node.base === props.image
   })

   const image = getImage(data.node)

   return (
      <GatsbyImage image={image} alt={props.alt}/>
   )
}

export default ImageComponent

As铆 quedan los plugins de gatsby-config.js

plugins: [
   `gatsby-plugin-image`,
   `gatsby-transformer-sharp`,
   {
      resolve: `gatsby-plugin-sharp`,
      options: {
         defaults: { 
            quality: 100,
            placeholder: `blurred`,
         },
      }
   },
   {
      resolve: `gatsby-source-filesystem`,
      options: {
         name: `images`,
         path: `${__dirname}/src/images`,
      },
   },
],

Les recomiendo que le echen un ojo a este nuevo plugin de gatsby.
gatsby-plugin-image

Por lo que veo, el codigo que nos dice Joss(el profesor) tiene un funcionamiento extra帽o (el cual nos da un error): El callback 鈥渄ata鈥 recibe dos o tres llamados seguidos en vez de solo uno(puedes probarlo con un console.log(data)), el primero llega correctamente siendo la variable name = icon, sin embargo, el segundo llega como name = undefined, por esto saca el error en el navegador 鈥淭ypeError: Cannot read property 鈥榗hildImageSharp鈥 of undefined鈥. Pude encontrar la solucion a este problema.
La solucion para esto es la siguiente: cambia un poco el codigo pero logramos exactamente el mismo objetivo que es renderizar una sola imagen de forma 鈥渇luida鈥. No pasamos el parametro name como prop, si no, usamos el mismo server de GrapQL para traenos la imagen que queremos asi:

jumbo.js

import React from "react"
import { StyledJumbo } from "../styles/components"
import Image from "./image.js"

export default function Jumbo({ description }) {
  return (
    <StyledJumbo>
      <div>
        <h2>Consigue el mejor swag exclusivo y especial de Platzi</h2>
        <small>{description}</small>
      </div>
      <Image />
    </StyledJumbo>
  )
}

image.js

export default function Image() {
  return (
    <StaticQuery
      query={graphql`
        query GET_IMAGE {
          icon: file(relativePath: { eq: "icon.png" }) {
            childImageSharp {
              fluid(maxWidth: 1000) {
                ...GatsbyImageSharpFluid
              }
            }
            name
          }
        }
      `}
      render={data => (
        <Img fluid={data[data.icon.name].childImageSharp.fluid} />
      )} //data llega como callback
    />
  )
}

Espero les sirva bastante!

A mi como usuario que la imagen tarde en cargar me da la sensaci贸n de lentitud.
Y de momento las queries son horribles. Demasiada dot notation.
Espero que mejore luego.

Si no te funciona el c贸digo del profesor en GraphiQL, prueba con este:

{
	allImageSharp {
    edges {
      node {
        fluid(maxWidth: 500) {
          src
          srcWebp
          sizes
          originalImg
          base64
        }
      }
    }
  }
}

Existe un problema: el atributo fluid se reusa a identificar al prop llamado 鈥渘ame鈥

Estoy siguiendo con las instrucciones y me esta generando el siguiente error

TypeError: Cannot read property 鈥榗hildImageSharp鈥 of undefined
render
src/components/image.js:19
16 | }
17 | }
18 | `}

19 | render={data => <Img fluid={data[name].childImageSharp.fluid} />}
20 | />
21 | )
22 | }

seg煤n pude ver la forma cambio:
https://www.gatsbyjs.org/tutorial/gatsby-image-tutorial/#image-fragments

pero no se como implementarlo

Ten铆a este error al agregar la imagen

TypeError: Cannot read property 'childImageSharp' of undefined

Para solucionarlo cambi茅 el valor del atributo del componente Image en Jumbo.js; en vez de 鈥渋con鈥 deber铆a ser 鈥渓ogo鈥

import React from "react"
import { StyledJumbo } from "../styles/components"
import { Image } from "./"

export default function Jumbo({ description }) {
  return (
    <StyledJumbo>
      <div>
        <h2>隆Consigue el mejor swag exclusivo y especial de platzi!</h2>
        <small>{description}</small>
      </div>
      <Image name="logo" />
    </StyledJumbo>
  )
}

A alguien m谩s le pasa que el query no funciona?

<StaticQuery
  query={graphql`
    query GET_IMAGE {
      icon: file(relativePath: { eq: "icon.png" }) {
        childImageSharp {
          fluid(maxWidth: 1000) {
            ...GatsbyImageSharpFluid
          }
        }
      }
  `}
  render={data => {
    console.log(data);

    return <Img fluid={data[name].childImageSharp.fluid}/>;
  }}
/>

Output

- Unknown field 'fluid' on type 'ImageSharp'. 
      file: /Users/behar/git/platzi/frontend/gatsby/Gatsby-platzi/src/components/image.js

El render tambi茅n se puede realizar asi:

render={data => {
        console.log(data)

        return <Img fluid={data.icon.childImageSharp.fluid} />
      }}