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>