Estoy aprendiendo GraphQL e intenté hacer una foto de fondo en la sección Hero. No funciona y traté mucho de arreglarlo. El código que usé está abajo. Algunos módulos se importan para otras partes del archivo. No hay ningún error al ejecutar el código. La foto de fondo simplemente no se muestra. También adjunté código de gatsby-config.js.
import React from 'react' import styled from "styled-components" import { StaticQuery, graphql } from 'gatsby' import { StaticImage, GatsbyImage } from 'gatsby-plugin-image' import { Form } from 'react-bootstrap' import "bootstrap/dist/css/bootstrap.min.css" const Hero = ({myBackground}) => { return ( <HeroContainer> <HeroBg> {myBackground.allFile.edges.map(({node}) => ( <p key={node.id}> {node.base} </p> ))} </HeroBg> </HeroContainer> export default Hero; export const myBackground = graphql` query MyQuery { allFile { edges { node { id base relativePath relativeDirectory childImageSharp { gatsbyImageData } } } } } ` const HeroContainer = styled.div` display: flex; justify-content: center; align-items: center; padding: 0 1rem; position: relative; height: 100vh; margin: -104px -8px -10px -8px; color: #fff; background-color: lightgreen; ` const HeroBg = styled.div` position: absolute; height: 100vh; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; overflow: hidden; `El archivo gatsby-config.js a continuación:
plugins: [ `gatsby-plugin-react-helmet`, `gatsby-plugin-image`, `gatsby-plugin-styled-components`, { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/src/images`, }, }, `gatsby-transformer-sharp`, `gatsby-plugin-sharp`, `gatsby-transformer-json`, { resolve: `gatsby-source-filesystem`, options: { path: `./src/data/`, }, },Suponiendo que su consulta GraphQL funcione como se esperaba y obtenga los datos adecuados, su problema está en la desestructuración de accesorios y el bucle de datos.
Su componente debería verse así:
const Hero = ({data}) => { return ( <HeroContainer> <HeroBg> {data.allFile.edges.map(({node}) => { console.log(node); return <p key={node.id}> {node.base} </p> })} </HeroBg> </HeroContainer> export default Hero; export const myBackground = graphql` query MyQuery { allFile { edges { node { id base relativePath relativeDirectory childImageSharp { gatsbyImageData } } } } } ` Dado que está utilizando una consulta de página , su enfoque solo funcionará si Hero es un componente de nivel superior (una página dentro de src/pages ). En ese caso, sus datos obtenidos siempre estarán dentro de props.data.queryOuterNode , donde queryOuterNode significa allFile en este caso.
Si está utilizando un componente aislado para obtener los datos tal como parece, se verá obligado a utilizar un gancho useStaticQuery para obtener datos en un componente que no sea de nivel superior. En este caso, su componente debería verse así:
const Hero = () => { const data = useStaticQuery(graphql` query MyQuery { allFile { edges { node { id base relativePath relativeDirectory childImageSharp { gatsbyImageData } } } } } `) return ( <HeroContainer> <HeroBg> {data.allFile.edges.map(({node}) => { console.log(node); return <p key={node.id}> {node.base} </p> })} </HeroBg> </HeroContainer> export default Hero; En este caso, Hero no recibe ningún props data y los datos se recuperan en el tiempo de ejecución, tal como lo solicita el código.
Probé ambos. Con la segunda solución que me pareció mejor, recibí este error a continuación:
Error en función Hero en ./src/components/Hero.js:29
No se pueden leer las propiedades de undefined (leyendo 'bordes')
./src/components/Hero.js:29
27 | <HeroContainer> 28 | <HeroBg> > 29 | {data.allFile.edges.map(({node}) => { | ^ 30 | return 31 | <p key={node.id}> 32 | {node.base}Bien, encontré la solución. De hecho, no usa GraphQL, pero logré lo que quería: una imagen de fondo en la sección Hero. El código está abajo:
import React from 'react' import styled from "styled-components" import { StaticImage } from 'gatsby-plugin-image' const Hero = () => { return ( <HeroContainer> <HeroBg> <StaticImage src="../images/Image.jpeg" /> </HeroBg> </HeroContainer>