CODEWITHSUNDEEP
layoutgraphqlgatsby
Hesam Kaveh
Hesam Kaveh

Reputation: 3

Why GraphQL doesn't work on GatsbyJS layouts?

I want to query some data on my layout but {console.log(data)} returns undefined. It means my query doesn't work.

My layouts/index.js file:

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
          }
        }
      }
    `

why so?!

Using react 16.3.2 and gatsby next.

Upvotes: 0

Views: 123

Answers (1)

LekoArts
LekoArts

Reputation: 1569

You need to use StaticQuery. Your layout file is just a normal React component now.

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

Upvotes: 1

Related Questions