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

我需要访问

{摘录、标题、作者、类别、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

从“React”导入React
从“道具类型”导入道具类型
从“react Helmet”导入{Helmet}
从“gatsby”导入{useStaticQuery，graphql}
const SEO=（）=>{
返回搜索引擎优化组件
}
export const query=graphql`
{
allMdx（限制：3，排序：{fields:frontmatter\uuuuuu\u date，order:DESC}）{
节点{
节选
前沿物质{
标题
作者
类别
日期（格式字符串：“MM，Do YYYY”）
鼻涕虫
阅读时间
形象{
childImageSharp{
盖茨比图像数据
}
}
}
身份证件
}
}
}
`
导出默认搜索引擎优化

在那之后我想要这样

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

const SEO=（{摘录，标题，作者，类别，slug，readTime，image}）=>{
返回搜索引擎优化组件
}

然后我将访问

SEO

组件中的数据

我是graphQL的新手

---

谢谢。

查询的数据在

道具内。数据

，被分解为

{data}

，您在

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

请注意，spread操作符（

…

）将允许您传递

frontmatter

对象下的道具列表，您只需在SEO组件中通过分解

道具来获取道具，如：

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

由于
摘录
比
前沿内容的其余部分处于另一个级别
，您可以将其作为另一个
props
单独传递，或者您可能希望创建一个新对象，混合当前
allMdx
数据的所有属性，并使用扩展运算符传递整个对象，但上述片段的方法将适用于您的用例。如您所愿调整它。
看起来您应该在模板中查询该数据。看看@ksav，谢谢，但我需要这样的直接数据：
const SEO=（{摘录，标题，作者，类别，slug，readTime，image}）=>{返回SEO组件}
查询模板中的数据，并将其作为道具传递给
SEO
组件。@ksav，那对我真的很有帮助。谢谢
const SEO = ({ excerpt, title, author, category, slug, readTime, image }) => {}