Застрял в запросе GraphQl в Гэтсби с помощью imageSharp

Question

Я пытаюсь установить следующую фоновую опору для изображения в моем каталоге src / images / bird.jpg.Вот мой код, но я получаю Cannot read property 'id' of undefined из моего запроса graphQl в консоли, и фоновый реквизит возвращает нулевой в React Inspector, Что я делаю неправильно?

/src/pages/index.js

import React from 'react'
import { graphql } from 'gatsby'
import Img from 'gatsby-image'

import Layout from '../components/layout'

const IndexPage = ({ data }) => (
  <Layout>
    <h1>Hi people</h1>
    <p>{data.site.siteMetadata.title}</p>
    <p>{data.site.siteMetadata.desc}</p>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
  </Layout>
)

export default IndexPage

export const query = graphql`
  query SiteMeta {
    site {
      siteMetadata {
        title
        desc
      }
    }
    background: imageSharp(id: { regex: "/bird.jpg/" }) {
      sizes(maxWidth: 1240) {
        ...GatsbyImageSharpSizes
      }
    }
  }
`