为什么 GraphQL 不适用于 GatsbyJS 布局？

Question

我想在我的布局上查询一些数据，但是 {console.log(data)} returns undefined.这意味着我的查询不起作用。

我的layouts/index.js文件：

import React from "react";
import Header from '../components/Header'
import Footer from '../components/Footer'
import Slider from "../components/Slider";
import {graphql} from "gatsby";

class DefaultLayout extends React.Component {
    render() {

        const {data} = this.props

        return (
            <div className='container-fluid'>
                <Header/>

                {console.log(data)}
                {console.log(data)}
                {console.log(data)}

                <div className="row rtl">
                    <div className="col routeContainer">
                        {this.props.children}
                    </div>
                    <div className="col slider"><Slider/></div>
                </div>
                <Footer/>
            </div>
        )}}
export default DefaultLayout
export const pageQuery = graphql`
      query {
         site {
          siteMetadata {
            title
            subtitle
          }
        }
      }
    `

为什么会这样？！

接下来使用 React 16.3.2 和 gatsby。

Answer 1

您需要使用静态查询。你的布局文件现在只是一个普通的 React 组件。

https://next.gatsbyjs.org/docs/migrating-from-v1-to-v2/#remove-or-refactor-layout-components

为什么 GraphQL 不适用于 GatsbyJS 布局？

Why GraphQL doesn't work on GatsbyJS layouts?

layout

graphql

gatsby