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

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?

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