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

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