Question

我想查询布局中的一些数据，但是 {console.log（data）} 返回未定义。这意味着我的查询无效。

我的 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

您需要使用StaticQuery。您的布局文件现在只是普通的React组件。

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

为什么GraphQL在GatsbyJS布局上不起作用？

1 个答案: