如何在 GatsbyJS 的 React 组件中使用来自 GraphQL 的数据

Question

我正在尝试查询特定类别标题并将其返回到 div 中。它给了我以下错误信息：

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

这是我的文件：

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``

我相信我的查询是正确的，因为我可以在 http://localhost:8000/___graphql 上看到结果

当我对其进行测试并看到它工作时，我想映射所有类别并为每个类别创建单独的页面。

你能指引我正确的方向吗？

Answer 1

您的查询看起来不错，但是，您需要访问嵌套对象，如 GraphQL 所示，在您的情况下，这应该可以工作：

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

请注意，在内部数据中，您首先需要访问allGraphCmsCategory 并继续跟踪对象树。我假设（因为allGraphCmsCategory 中的all 关键字）结果将有多个边节点（数组），这就是edges[0] 的原因。

或者，您可以使用 StaticVersion 组件：

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

使其动态化：

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