Gatsby GraphQL issue - graphql

Question

I am rather new to Gatsby. I am using Strapi as backend and in my frontend Gatsby, in the GraphQL playground I am executing the following query with expected outcome:
query MyQuery {
strapiAssessment {
title
rating {
id
topic
rate
}
}
}
In my Gatsby frontend code I have the following:
import React from "react"
import Title from "../components/Title"
import { graphql } from "gatsby"
const SelfAssesment = ({ data }) => {
const {
strapiAssessment: { title, rating },
} = data
console.log(data)
return (
<section className="section jobs">
<Title title={title} />
<div className="about-stack">
<p>Rankning i olika teknologier:</p>
{rating.map(item => {
return <span key={item.id}>{item.topic}</span>
})}
</div>
<div className="about-stack">
{rating.map(item => {
return <span key={item.id}>{item.rate}</span>
})}
</div>
</section>
)
}
export const query = graphql`
{
strapiAssessment {
title
rating {
id
topic
rate
}
}
}
`
export default SelfAssesment
I am getting the following error:
I am getting undefined, do I have something undeclared or a typo somewhere?

Answer 1

You are running a page query in a component that is not in a top-level (components/SelfAssesment). As you can see from the docs:
Querying data with a Page Query
You can use the graphql tag to query data in the pages of your Gatsby
site. This gives you access to anything included in Gatsby’s data
layer, such as site metadata, source plugins, images, and more.
Querying data with the StaticQuery Component
StaticQuery is a component for retrieving data from Gatsby’s data
layer in non-page components, such as a header, navigation, or any
other child component.
That said, you have two options here. Use the query in a top-level component (page) and drill-down the props down to the component or use a StaticQuery (or useStaticQuery hook).