GraphQL and GatsbyJS: my query isn't working in layouts folder

0
votes

I know that querying is supposed to work in the layouts folder of a GatsbyJS project:

enter image description here

However, my code for the one layout component I am using GraphQL on, is not working, and my this.props.data console logs as 'undefined'. Why is this happening!? I'm so sure that my code is correct, what am I missing??

here is my code: 

import React, { Component } from 'react'

export default class Header extends Component {
    render() {
        // const latestPost = this.props.data.allContentfulBlogPost.edges[1]
        // const secondLatestPost = this.props.data.allContentfulBlogPost.edges[2]
        console.log(this.props.data)

      return (
        <div className='container-fluid bottom-margin-large'>
          <div className='row'>
            <div className='hidden-lg-up header-solink-bar'>0 0 0 0 0</div>
          </div>

          <div className='row'>
            <div className='header-middle'>Blog Title</div>
          </div>
          <div className='row header-bottom'>
            <div className='col-md-6 col-lg-4 header-bottom-input'>
                <div><p><span>for recipe updates</span><br />Subscribe to newsletter</p></div>
                <form>
                    <input className='search-input' type='text' name='search' placeholder='search' />
                </form>
            </div>
            <div className='hidden-sm-down col-md-6 col-lg-4 header-bottom-button header-bottom-middle'>
                <p><span>date</span><br />name of dessert</p>
            </div>
            <div className='hidden-md-down col-lg-4 header-bottom-button'>
                <p><span>date</span><br />name of dessert</p>
            </div>
          </div>
        </div>
      );
    }
  }

  export const headerQuery = graphql`
    query headerQuery {
        allContentfulBlogPost {
            edges {
                node {
                    postTitle
                    postDate
                }
            }
            totalCount
        }
    }
`
2
reactjsgraphqlgatsby
Have you tried your graphql query in GraphiQL? does it return an error? You mentioned you console.log(this.props) but in your example you only have console.log(this.props). this leads me to think its a Query issue with Graphql. If you could please give more information that would be great. - William
i managed to get the query working inside my layouts/index.js file, and moved my components (header component included) to the components folder, which i should have done from the beginning anyway. Thank you for your help, though! - user74843

2 Answers

3
votes

In Gatsby you can only use GraphQL queries inside "page" or "layout" components. This allows for Gatsby's static compiling of your data, pre-fetching, etc. From the comments, looks like you found that solution already.

0
votes

As of version 2 it is able to use GraphQL queries also inside any component trough StaticQuery, an example:

import React from 'react';
import { StaticQuery, graphql } from 'gatsby';

export const Social = () => (
  <div>
    <StaticQuery
      query={graphql`
        {
          site {
            siteMetadata {
              social {
                facebook
                twitter
                instagram
                github
              }
            }
          }
        }
      `}
    >
      {({
        site: {
          siteMetadata: { social },
        },
      }) =>
        Object.keys(social).map(title => (
          <a
            href={social[title]}
            key={title}
          >
            <span>{title}</span>
          </a>
        ))
      }
    </StaticQuery>
  </div>
);

Though, the behaviour is slightly different - variables cannot be used.

You can find more in the official documentation.