gatsby: GraphQL not sending data to component
I’m in the midst of upgrading to V1 and feel like I’m so close to the finish line but for this bamboozling issue. None of my graphql queries are sending data to the component’s props. Here’s a demo file:
import React from 'react';
import PropTypes from 'prop-types';
const AboutPage = ({ data }) => {
console.log(data); // undefined :(
return null;
};
AboutPage.propTypes = {
data: PropTypes.object,
};
export default AboutPage;
export const pageQuery = graphql`
query AboutQuery {
site {
siteMetadata {
shortTitle
title
description
keywords
}
}
}
`;
and yet copying the query into the GraphiQL debugger outputs totally fine. Don’t know how to approach debugging this one, any ideas? This is the branch I’m working on.
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 48 (29 by maintainers)
Commits related to this issue
- Return the promise so bootstrap waits for queries to be extracted fixes #1786 — committed to gatsbyjs/gatsby by KyleAMathews 7 years ago
You can query graphql only in layout and pages components - so put your query in layout and pass data down to header and/or footer as props.
We should propably add notice messages about it when someone tries to query from other components to improve developer experience.
@CrowsVeldt Try deleting the
.cachedirectory. I get this issue on a regular basis and 80% of the time that will fix it.For those ending up here, if your query is in a component and isn’t top level, check out StaticQuery:
https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/static-query.md
@bradennapier or anyone else that might be running into this error:
…I was getting that error in my terminal, but pages were building anyway. I had barely modified the markdown-to-html example from the docs ("Creating and Modifying Pages", and I had gone through the tutorial, so I was quite confused.
Eventually, I found that I was able to get rid of the error by putting my own
blog-post.jstheme into thesrc/templatesfolder, as shown in the docs. I had been trying to put that page template into thesrc/layoutsfolder, and even though I was pointing to it fromgatsby-node.jsand pages were building, it was giving that error and giving me uncertainty.I’m not sure if you had that exact issue or something different, but I couldn’t find the solution anywhere and only fixed it by breaking down every piece I had changed, step-by-step, so … hopefully this post helps someone and saves them time. 🙂
Thank you @KyleAMathews!
Ok, found the problem. A recent refactor stopped returning a promise which meant that during bootstrap, the “extract queries” phase would finish before the queries were extracted which meant the queries wouldn’t be run. This is why changing the query would fix things as this triggered a new extraction of the query and ran the query again. On subway but will PR fix when on internet again and release.
Out in new release
I am getting the same issue data is undefined. In .cache/json my json file is not creating. Can any body tell what is the issue. in gatsby-node.js , code is exports.createPages = ({ graphql, boundActionCreators }) => { return new Promise(resolve => { graphql(
{ allFaqsJson { edges { node { fields { slug } } } } }).then(result => { const { createPage } = boundActionCreators; result.data.allFaqsJson.edges.forEach(({ node }) => { console.log(create page for=========> ${node.fields.slug}); createPage({ path: node.fields.slug, component: path.resolve(./src/templates/faqs.tsx), context: { // Data passed to context is available in page queries as GraphQL variables. slug: node.fields.slug } }); }); resolve(); }); }); };faqs.json is not creating.
@davidlormor Nesting layouts won’t work (it’s not a bug - it’s just how gatsby do things - you could call it limitation). You need to pass data via props.
I’m able to reproduce this in the
using-remarkexample withnpm run build.render-page.jsseems to indicate that this line is the problem:I think this is the same issue I’m having. (And possibly the same issue as @pouretrebelle and #1788.)