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

【问题标题】：How to access data from query inside component?如何从组件内部的查询中访问数据？
【发布时间】：2021-08-23 15:47:19
【问题描述】：

我需要从查询中访问{ 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 的新手

谢谢。

【问题讨论】：

看起来您应该在模板中查询该数据。看看github.com/gatsbyjs/gatsby-starter-blog/blob/master/src/…
@ksav，谢谢，但我需要这样的直接数据：const SEO = ({ excerpt, title, author, category, slug, readTime, image }) => { return <div>SEO Component</div> }
查询模板中的数据，并将其作为 props 传递给SEO 组件。
@ksav，如果可以写在答案部分，那对我真的很有帮助。谢谢。

标签： javascript reactjs graphql gatsby

【解决方案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 对象下的道具列表，您只需通过在 SEO 组件中解构 props 来获取它们，例如：

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

由于excerpt 与frontmatter 的其余部分不同，您可以将其作为另一个props 隔离传递，或者您可能希望创建一个混合当前allMdx 数据的所有属性的新对象并使用扩展运算符传递整个对象，但上面的 sn-p 方法将适用于您的用例。随心所欲地调整它。

【讨论】：