如何从组件内部的查询访问数据？

Question

我需要从查询中访问{ excerpt, title, author, category, slug, readTime, image }那些数据，我已经尝试了很多次，但我想不出该怎么做。

我的代码是：

import React from 'react'
import PropTypes from 'prop-types'
import { Helmet } from 'react-helmet'
import { useStaticQuery, graphql } from 'gatsby'

const SEO = () => {
  return <div>SEO Component</div>
}

export const query = graphql`
  {
    allMdx(limit: 3, sort: { fields: frontmatter___date, order: DESC }) {
      nodes {
        excerpt
        frontmatter {
          title
          author
          category
          date(formatString: "MMMM, Do YYYY")
          slug
          readTime
          image {
            childImageSharp {
              gatsbyImageData
            }
          }
        }
        id
      }
    }
  }
`

export default SEO

之后我想要这样

const SEO = ({ excerpt, title, author, category, slug, readTime, image }) => {
  return <div>SEO Component</div>
}

然后我将在我的 SEO 组件中访问这些数据。

我是 graphQL 新手

谢谢。

Answer 1

查询的数据在 props.data 中，解构为 { data }。 Page queries，您在 SEO 组件中显示的组件仅在顶级组件（页面）中可用。

处理这种组件的想法是将查询移动到您想要的每个页面，并通过 props 将数据向下钻取到 SEO 组件。例如：

import * as React from 'react'
import { graphql } from 'gatsby'

 const HomePage = ({data}) => {
  console.log("your queried data is", data);

  return (
    <div>
      This is your home page
    </div>
  )
}

export const query = graphql`
  {
    allMdx(limit: 3, sort: { fields: frontmatter___date, order: DESC }) {
      nodes {
        excerpt
        frontmatter {
          title
          author
          category
          date(formatString: "MMMM, Do YYYY")
          slug
          readTime
          image {
            childImageSharp {
              gatsbyImageData
            }
          }
        }
        id
      }
    }
  }
`

export default HomePage

在上面的示例中，allMdx 数据在 props.data.allMdx 中。此时，您可以执行以下操作：

 const HomePage = ({data}) => {
  console.log("your queried data is", data);

  return (
    <div>
    <SEO {...data.allMdx.nodes[0].frontmatter} excerpt={data.allMdx.nodes[0].excerpt}/>
    </div>
  )
}

注意展开运算符（...）允许你传递frontmatter对象下的props列表，你只需要通过解构props在SEO 组件如：

const SEO = ({ excerpt, title, author, category, slug, readTime, image }) => {}

由于 excerpt 与 frontmatter 的其余部分处于另一个级别，您可以将其作为另一个 props 单独传递，或者您可能想要创建一个混合所有内容的新对象当前 allMdx 数据的属性并使用扩展运算符传递整个对象，但上面代码片段的方法适用于您的用例。随意调整。

如何从组件内部的查询访问数据？

How to access data from query inside component?

javascript

reactjs

graphql

gatsby