getImage está devolviendo indefinido, por lo que mi componente GatsbyImage no se procesa.
Estructura del archivo:
Tengo el siguiente código (gallery.js):
import React from "react"; import Layout from "../components/Layout"; import { useStaticQuery, graphql } from "gatsby"; import { GatsbyImage, getImage } from "gatsby-plugin-image"; const Gallery = () => { const { gallery } = useStaticQuery(graphql` query { gallery: allFile( filter: { extension: { eq: "jpg" } absolutePath: { regex: "/images/" } } ) { nodes { id childImageSharp { fluid(maxWidth: 500, maxHeight: 500) { ...GatsbyImageSharpFluid_tracedSVG } } } } } `); return ( <Layout> <div className="container py-5"> <div className="row"> <div className="col-12"> <h1 className="text-gastby mb-4">Gallery</h1> </div> </div> <div className="row"> {gallery.nodes.map((image) => ( <div className="col-lg-3 col-md-4 col-sm-6 mb-3" key={image.id}> <GatsbyImage image={getImage(image.childImageSharp.fluid)} alt="Gallery" /> </div> ))} </div> </div> </Layout> ); }; export default Gallery;¿Qué puedo tener mal?
El problema es que estás mezclando gatsby-image (de Gatsby 1 a Gatsby 2) y gatsby-plugin-image (de Gatsby 3 en adelante). El primero está ahora en desuso.
Esto se puede detectar fácilmente cuando consulta por nodos GraphQL fluid o fixed , ya que son creados por gatsby-image que usa el componente Img ( from 'gatsby-image '), que acepta una propiedad fluid o fixed .
Por otro lado, las consultas de gatsby-plugin-image para gatsbyImageData (no fluid ni fixed ) y el GatsbyImage correspondiente ( from 'gatsby-plugin-image' ) acepta una propiedad de image .
En su caso, está consultando una estructura gatsby-image aplicada en un componente gatsby-plugin-image , por eso está devolviendo undefined .
Consulte la guía de migración, pero esencialmente deberá reemplazar (y eliminar) todas las referencias a gatsby-image e instalar las dependencias requeridas:
npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp Agréguelo a su gatsby-config.js :
module.exports = { plugins: [ `gatsby-plugin-image`, `gatsby-plugin-sharp`, `gatsby-transformer-sharp`, ], }Y cambie su consulta a algo como:
const Gallery = () => { const { gallery } = useStaticQuery(graphql` query { gallery: allFile( filter: { extension: { eq: "jpg" } absolutePath: { regex: "/images/" } } ) { nodes { id childImageSharp { gatsbyImageData(layout: FIXED) } } } } `); return ( <Layout> <div className="container py-5"> <div className="row"> <div className="col-12"> <h1 className="text-gastby mb-4">Gallery</h1> </div> </div> <div className="row"> {gallery.nodes.map((image) => ( <div className="col-lg-3 col-md-4 col-sm-6 mb-3" key={image.id}> <GatsbyImage image={getImage(image.childImageSharp)} alt="Gallery" /> </div> ))} </div> </div> </Layout> ); }; export default Gallery; Vuelva a verificar la consulta, ya que los nodos y la estructura pueden ser diferentes al aplicar gatsby-plugin-image .
Tenga en cuenta que getImage es una función de ayuda y es posible que no la necesite, considere usarla directamente:
<GatsbyImage image={image.childImageSharp.gatsbyImageData} alt="Gallery" />