TypeError: data.allFile.edges.node is undefined

[santhoshnumberone]

Description

Trying to set the background of div by following this link
https://www.gatsbyjs.com/plugins/gatsby-background-image/

This is the documented query on the link

const BackgroundSection = ({ className }) => {
  const data = useStaticQuery(
    graphql`
      query {
        desktop: file(relativePath: { eq: "seamless-bg-desktop.jpg" }) {
          childImageSharp {
            fluid(quality: 90, maxWidth: 1920) {
              ...GatsbyImageSharpFluid_withWebp
            }
          }
        }
      }
    `
  )

  // Set ImageData.
  const imageData = data.desktop.childImageSharp.fluid

I used this query as I could find desktop

query {
            allFile(filter: {ext: {regex: "/(jpg)|(png)|(jpeg)/"}, name: {in: ["DSC_0131"]}}) {
              edges {
                node {
                  childImageSharp {
                    fluid {
                        ...GatsbyImageSharpFluid
                    }
                  }
                }
              }
            }
          }
        `
    )
    const imageData = data.allFile.edges.node.childImageSharp.fluid

Now I'm getting this error at this location

24 |       }
  25 |     `
  26 | )
> 27 | const imageData = data.allFile.edges.node.childImageSharp.fluid
  28 | return (

with this specific error inside app.js

./.cache/app.js/</</</<
/home/ffffff/Website/evone/.cache/app.js:133

  130 | const preferDefault = m => (m && m.default) || m
  131 | const Root = preferDefault(require(`./root`))
  132 | domReady(() => {
> 133 |   renderer(<Root />, rootElement, () => {
  134 |     apiRunner(`onInitialClientRender`)
  135 |   })
  136 | })

Could anyone give me please?

[vladar]

Hi @santhoshnumberone

data.allFile.edges should be an array. So try something like this:

-const imageData = data.allFile.edges.node.childImageSharp.fluid
+const imageData = data.allFile.edges[0].node.childImageSharp.fluid

But also keep in mind that it will only work if you have a matching file. If you are not sure this will be a safer bet:

const imageData = data.allFile.edges[0]?.node?.childImageSharp?.fluid

But don't forget to double-check that imageData is not bullish before using it.

[vladar]

Did it help?