CODEWITHSUNDEEP
graphqlgatsbystrapi
user2371684
user2371684

Reputation: 1555

Gatsby GraphQL issue

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:

enter image description here

I am getting undefined, do I have something undeclared or a typo somewhere?

Upvotes: 0

Views: 149

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29320

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).

Upvotes: 1

Related Questions