Background photo not displaying with GraphQL in Gatsby

Question

I'm learning GraphQL and I tried to make a background photo at the Hero section. It does not work and I tried a lot to fix it. The code I used is below. Some modules are imported for other parts of the file. There is no error while running the code. The background photo just does not display. I also attached code from 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; `

The gatsby-config.js file below:

 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/`, }, },

Answer 1

Assuming that your GraphQL query works as expected and fetches the proper data, your issue is on props destructuring and data loop.

Your component should look like:

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 
                    }
                  }
                }
              }
            }
`   

Since you are using a page query , your approach will only work if Hero is a top-level component (a page inside src/pages ). In that case, your fetched data will be always inside props.data.queryOuterNode , where queryOuterNode stands for allFile in this case.

If you are using an isolated component to fetch the data as it seems, you will be forced to use a useStaticQuery hook to fetch data in a non-top-level component. In this case, your component should look like:

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;

In this case, Hero is not receiving any data props and the data is fetched in the runtime, as the code requests it.

Answer 2

I tried both. With the second solution which seemed better to me I received this error below:

Error in function Hero in./src/components/Hero.js:29

Cannot read properties of undefined (reading 'edges')

./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}

Okay, I found the solution. It does not use GraphQL in fact, but I achieved what I wanted to that is a background image in the Hero section. The code is below:

 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>