GatsbyJS：是不是可以在布局文件夹中创建的组件内进行查询？

Posted 2023-03-08

【中文标题】GatsbyJS：是不是可以在布局文件夹中创建的组件内进行查询？

【英文标题】：GatsbyJS: is it possible to query inside a component created in the layouts folder?GatsbyJS：是否可以在布局文件夹中创建的组件内进行查询？

【发布时间】：2018-07-12 11:23:07

【问题描述】：

我在我的布局文件夹中创建了一个组件，并尝试使用查询从内容中获取信息。我的代码与我在 pages 文件夹内的另一个工作组件中使用的代码完全相同。但是，布局文件夹中的那个不起作用； this.props.data 控制台日志未定义。

当涉及到 layouts 文件夹中的组件时，是否有一些特殊的方法可以查询？我在这里缺少什么吗？我已经阅读了我可以和不能在 GatsbyJS 的 layouts 文件夹中查询...

这是布局文件夹中我的组件的代码：

import React,  Component  from 'react'

export default class Header extends Component 
    render()   
      return (
          my component code
  

  export const headerQuery = graphql`
    query headerQuery 
        allContentfulBlogPost 
            edges 
                node 
                    postTitle
                    postDate
                
            
            totalCount
        
    
`

【问题讨论】：

布局组件的查询没有什么特别之处。您如何测试查询是正在运行还是现在？

另外，你应该在 layouts/index.js 中只有一个布局组件——这看起来像一个常规组件。将其移动到 src/components/header.js 的文件中，然后将查询移动到 layouts/index.js 中，然后将 Header 组件导入那里，然后将查询中的数据传递给 Header。

我一直在使用 console.log 来检查我是否在渲染函数中获得了数据对象。我按照您的指示进行了操作，现在一切正常。非常感谢您的帮助。

太棒了！祝你的项目好运！

【参考方案1】：

答案已在 cmets 中给出。

没有。

数据仅通过页面或布局中的查询传递给 Gatsby 中的组件。这个单一入口点允许 Gatsby 将您的数据编译为磁盘上的静态 JSON 文件，以及预取数据等。