gatsby - How to use data from GraphQL in a React component in GatsbyJS

Question

I'm trying to query for a specific category title and returning it inside a div. It gives me the following error message:

TypeError: can't access property "node", data.edges is undefined

This is my file:

import React from "react"
import { graphql, useStaticQuery } from "gatsby"
import styled from "styled-components"
import { H3, BodyMain } from "../styles/TextStyles"

export default function CategorySection() {
  const data = useStaticQuery(graphql`
    query categoryQuery {
      allGraphCmsCategory(filter: { title: { eq: "CSS" } }) {
        edges {
          node {
            title
            slug
            description
          }
        }
      }
    }
  `)
  return (
    <Wrapper>
      <ContentWrapper>
        <TextWrapper>
          <Title>Browse by Categories</Title>
          <Description>
            Use the category tags to narrow down what you are looking for.
          </Description>
        </TextWrapper>
        <CategoryWrapper>
          <Categories>{data.edges.node.title}</Categories>
        </CategoryWrapper>
      </ContentWrapper>
    </Wrapper>
  )
}

const Wrapper = styled.div``

const ContentWrapper = styled.div``

const TextWrapper = styled.div``

const Title = styled(H3)``

const Description = styled(BodyMain)``

const CategoryWrapper = styled.div``

const Categories = styled.div``

I believe my query is right, as I'm able to see results on http://localhost:8000/___graphql

When I have tested it and see it work, I would like to map through all categories and create separate pages for each.

Can you guide me in the right direction?

question from:https://stackoverflow.com/questions/66058544/how-to-use-data-from-graphql-in-a-react-component-in-gatsbyjs

Answer 1

Your query looks good, however, you need to access the nested object as your GraphQL shows, in your case, this should work:

export default function CategorySection() {
  const data = useStaticQuery(graphql`
    query categoryQuery {
      allGraphCmsCategory(filter: { title: { eq: "CSS" } }) {
        edges {
          node {
            title
            slug
            description
          }
        }
      }
    }
  `)

 console.log("your data is", data.allGraphCmsCategory.edges) // use to access to the nested data data.allGraphCmsCategory.edges[0].node.title
  return (
    <Wrapper>
      <ContentWrapper>
        <TextWrapper>
          <Title>Browse by Categories</Title>
          <Description>
            Use the category tags to narrow down what you are looking for.
          </Description>
        </TextWrapper>
        <CategoryWrapper>
          <Categories>{data.edges.node.title}</Categories>
        </CategoryWrapper>
      </ContentWrapper>
    </Wrapper>
  )
}

Note that, inside data, you first need to access allGraphCmsCategory and keep following the object tree. I've assumed (because of the all keyword in allGraphCmsCategory) that the result will have multiple edges nodes (array), that's why the edges[0].

Alternatively, you can use the StaticVersion component:

    export default function CategorySection() {
       return (
    <StaticQuery
      query={graphql`
        query categoryQuery {
          allGraphCmsCategory(filter: { title: { eq: "CSS" } }) {
            edges {
              node {
                title
                slug
                description
              }
            }
          }
        }
      `}
      render={data => {
       console.log(data);
       return (
        <Wrapper>
          <ContentWrapper>
            <TextWrapper>
              <Title>Browse by Categories</Title>
              <Description>
                Use the category tags to narrow down what you are looking for.
              </Description>
            </TextWrapper>
            <CategoryWrapper>
              <Categories>{data.allGraphCmsCategory.edges[0].node.title}</Categories>
            </CategoryWrapper>
          </ContentWrapper>
        </Wrapper>
      )
      }}
    />
  )
    }

To make it dynamic:

{data.allGraphCmsCategory.edges.map(item=>{
return <Categories>{item.title}</Categories>
})}