Gatsby-ContentFul project: Impossible to get data from Graphql in my page

Question

I decided to create a small project in new technology and I choose Gatsby. To let you know I don't work with React and GraphQl before. So thanks to Gatsby I can see also other technologies. So, for now, I try to make an index survey page where the footer and header are modifiable. I take for my backend Contentful and I succeed to do the connection between the content from ContentFul and my component footer. But when I try to do a query in the page index.js impossible to get the data, but they exist (I checked on graphql).

I try to make the query in the component, make the query in a hook and then call the hook. But nothing changes always undefined

In my index.js:

const  query = graphql`
    query header{
        contentfulHeader {
          id
          titleCard
          descriptionCard
          logoCard {
            file {
              url
            }
          }
        }
      }
    `

const SurveyTitleCard = props => {
  return (
    <>
      <div className="row">
        <div className="survey-title card blue-grey darken-3 col s10 offset-s1 m6 offset-m3">
          <div className="card-content grey-text text-lighten-3 center-align">
            <div className="row logo valign-wrapper">
              <div className="col s6 offset-s3 m4 offset-m4">
                <img
                  className="responsive-img"
                  src=""
                  alt="logo company"
                />
              </div>
            </div>
            <div className="card-title">
             {query.contentfulHeader.titleCard}
            </div>
            <p>We would love to hear your anonymous thoughts and feedback</p>
          </div>
        </div>
      </div>
    </>
  )
}
// INDEX PAGE
const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <SurveyTitleCard />
  </Layout>
)

Here the data from GraphQl:

Here my gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@AntoineB`,
  },

  plugins: [
    {
      resolve: `gatsby-source-contentful`,
      options:{
        spaceId: `MY_SPACE_ID`,
        accessToken: `MY_ACCESS_TOKEN`,
      },
    },
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

Answer 1

See the docs regarding querying data in components using StaticQuery

import React from "react"
import { StaticQuery, graphql } from "gatsby"

export default () => (
  <StaticQuery
    query={graphql`
        query header{
        contentfulHeader {
          id
          titleCard
          descriptionCard
          logoCard {
            file {
              url
            }
          }
        }
      }
    `}
    render={data => (
      <>
        <div className="row">
          <div className="survey-title card blue-grey darken-3 col s10 offset-s1 m6 offset-m3">
            <div className="card-content grey-text text-lighten-3 center-align">
              <div className="row logo valign-wrapper">
                <div className="col s6 offset-s3 m4 offset-m4">
                  <img
                    className="responsive-img"
                    src=""
                    alt="logo company"
                  />
                </div>
              </div>
              <div className="card-title">
               {data.contentfulHeader.titleCard}
              </div>
              <p>We would love to hear your anonymous thoughts and feedback</p>
            </div>
          </div>
        </div>
      </>
    )}
  />
)