CODEWITHSUNDEEP
reactjsgraphqlgatsby
user74843
user74843

Reputation: 701

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

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

Upvotes: 0

Views: 1043

Answers (2)

crazko
crazko

Reputation: 869

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.

Upvotes: 0

chmac
chmac

Reputation: 12655

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.

Upvotes: 3

Related Questions