Gatsby: GraphQL not sending data to component

Created on 13 Aug 2017  ·  48Comments  ·  Source: gatsbyjs/gatsby

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.

picture pouretrebelle

Most helpful comment

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.

picture pieh on 30 Jan 2018
❤8 👍3

All 48 comments

From a quick glance it looks fine. Is there any graphql errors in the console?

KyleAMathews picture KyleAMathews on 13 Aug 2017

No errors. I was on v1.6.3 last week and the GraphQL was running fine, but had to upgrade to latest in an attempt to fix this problem, has anything major changed about querying between v1.6.3 and v1.8.4?

pouretrebelle picture pouretrebelle on 13 Aug 2017

Kinda but can't think what what would be related to this. Check the .cache/json directory. These are the files that get written the results of running queries. Any data in them?

KyleAMathews picture KyleAMathews on 13 Aug 2017

There is a json file for each page. For the about page it's -

{
    "pathContext": {}
}

For pages generated with createPages -

{
    "pathContext": {
        "slug": "/artist/charlotte-dann/"
    }
}

There's also a layout-index.json -

{
    "layoutContext": {}
}

and an empty file called nothing. no actual queried data anywhere. curious..

pouretrebelle picture pouretrebelle on 13 Aug 2017

If while the development server is running, you change one of the queries and save it, does that change anything?

KyleAMathews picture KyleAMathews on 13 Aug 2017

Yes it does! All of the markdown content comes through properly when I change a query in its template file. The siteMetadata also comes through but values for all of its fields are null. Here's about.json now -

{
    "data": {
        "site": {
            "siteMetadata": {
                "shortTitle": null,
                "title": null,
                "description": null,
                "keywords": null
            }
        }
    },
    "pathContext": {}
}
pouretrebelle picture pouretrebelle on 13 Aug 2017

Hrmmm try updating the site metadata as well in gatsby-config.js

KyleAMathews picture KyleAMathews on 13 Aug 2017

Yep that does it. Site's working normally once I've forced all the queries to re-run. Can't build though.

pouretrebelle picture pouretrebelle on 13 Aug 2017

What's the build error?

KyleAMathews picture KyleAMathews on 13 Aug 2017

So it looks like this is a caching error — sometimes for reasons we don't understand and don't know how to reproduce the cache gets out of whack and things break.

It'd be helpful if you remember when exactly things stopped working. Was it right when you upgraded to 1.8.4 or did queries work for a bit then stop working?

KyleAMathews picture KyleAMathews on 13 Aug 2017

Also btw, there's Gatsby plugins for v1 for react-helmet & stylus

KyleAMathews picture KyleAMathews on 13 Aug 2017

I'm seeing this issue after upgrading from 1.6.6 to 1.8.4.

Can't complete build and the cache JSON files are empty after running develop. Going to upgrade the versions incrementally to see when it breaks. :)

danoc picture danoc on 13 Aug 2017

1.8.3 is where I start to see the error where the GraphQL queries are not being passed in as data.

1.8.2
This error might just be a bad combination of dependency version numbers.

  "dependencies": {
    "gatsby": "1.8.2",
    "gatsby-link": "^1.6.7",
    "gatsby-plugin-react-helmet": "^1.0.2",
    "gatsby-plugin-styled-components": "^1.0.2",
    "gatsby-source-filesystem": "^1.4.2",
    "gatsby-transformer-remark": "^1.7.0"
  },

error A local install of Gatsby exists but failed to load.


  ReferenceError: regeneratorRuntime is not defined

  - build.js:12
    [danoc.me]/[gatsby]/dist/utils/build.js:12:46

  - build.js:75 Object.<anonymous>
    [danoc.me]/[gatsby]/dist/utils/build.js:75:2

  - module.js:20 require
    internal/module.js:20:19

  - cli.js:85 Command.<anonymous>
    [danoc.me]/[gatsby]/dist/bin/cli.js:85:17

  - index.js:300 Command.listener
    [danoc.me]/[commander]/index.js:300:8

  - index.js:635 Command.parseArgs
    [danoc.me]/[commander]/index.js:635:12

  - index.js:457 Command.parse
    [danoc.me]/[commander]/index.js:457:21

  - cli.js:136 Object.<anonymous>
    [danoc.me]/[gatsby]/dist/bin/cli.js:136:11



md5-6865304cce99dd076901b1ea43b82ae6



  "dependencies": {
    "gatsby": "1.8.3",
    "gatsby-link": "^1.6.7",
    "gatsby-plugin-react-helmet": "^1.0.2",
    "gatsby-plugin-styled-components": "^1.0.2",
    "gatsby-source-filesystem": "^1.4.2",
    "gatsby-transformer-remark": "^1.7.0"
  },



md5-991136f76cff399feb8c91d3839c1741



success open and validate gatsby-config.js — 0.005 s
success copy gatsby files — 0.022 s
success source and transform nodes — 0.225 s
success building schema — 0.211 s
success createLayouts — 0.013 s
success createPages — 0.948 s
success createPagesStatefully — 0.031 s
success extract queries from components — 0.157 s
success run graphql queries — 0.081 s
success write out page data — 0.005 s
success update schema — 0.186 s

info bootstrap finished - 3.167 s

success Generating CSS — 3.598 s
success Compiling production bundle.js — 11.319 s

error Generating static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND


  Error:
    Error:

    - render-page.js:46421 Post
      render-page.js:46421:19

    - render-page.js:14584 ReactCompositeComponentWrapp  er._constructComponentWithoutOwner
      render-page.js:14584:15

    - render-page.js:14560 ReactCompositeComponentWrapp  er._constructComponent
      render-page.js:14560:20

    - render-page.js:14463 ReactCompositeComponentWrapp  er.mountComponent
      render-page.js:14463:22

    - render-page.js:7445 Object.mountComponent
      render-page.js:7445:36

    - render-page.js:13674 ReactDOMComponent.mountChild  ren
      render-page.js:13674:45

    - render-page.js:10684 ReactDOMComponent._createCon  tentMarkup
      render-page.js:10684:33

    - render-page.js:10551 ReactDOMComponent.mountCompo  nent
      render-page.js:10551:30

    - render-page.js:7445 Object.mountComponent
      render-page.js:7445:36

    - render-page.js:14646 ReactCompositeComponentWrapp  er.performInitialMount
      render-page.js:14646:35
danoc picture danoc on 13 Aug 2017

Is there an example we can look at that definitely works on the latest version? Happy to dig in some more.

danoc picture danoc on 13 Aug 2017

Check out the example sites. They should be working as we build them on PRs. Appreciate your help tracking down the issue!

KyleAMathews picture KyleAMathews on 13 Aug 2017

Hey sorry for not checking back, I was out for a couple of hours. My error in build was about not being able to find site of undefined - i.e. data wasn't passing through - but now after the json cache has been built properly it's an error about MobX store injection, probably/hopefully something silly on my end in gatsby-ssr.js. Going to go back to 1.8.2 and see what happens.

pouretrebelle picture pouretrebelle on 13 Aug 2017

I'm able to reproduce this in the using-remark example with npm run build.

error Generating static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND


  Error:
    Error:

    - render-page.js:53402 DefaultLayout.render
      render-page.js:53402:51

    - render-page.js:18496 ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext
      render-page.js:18496:31

    - render-page.js:18519 ReactCompositeComponentWrapper._renderValidatedComponent
      render-page.js:18519:33

    - render-page.js:18059 ReactCompositeComponentWrapper.performInitialMount
      render-page.js:18059:31

    - render-page.js:17955 ReactCompositeComponentWrapper.mountComponent
      render-page.js:17955:22

    - render-page.js:11061 Object.mountComponent
      render-page.js:11061:36

    - render-page.js:18068 ReactCompositeComponentWrapper.performInitialMount
      render-page.js:18068:35

    - render-page.js:17955 ReactCompositeComponentWrapper.mountComponent
      render-page.js:17955:22

    - render-page.js:11061 Object.mountComponent
      render-page.js:11061:36

    - render-page.js:18068 ReactCompositeComponentWrapper.performInitialMount
      render-page.js:18068:35

render-page.js seems to indicate that this line is the problem:

    const { author, homepage } = this.props.data.site.siteMetadata

I think this is the same issue I'm having. (And possibly the same issue as @pouretrebelle and #1788.)

danoc picture danoc on 14 Aug 2017
👍1

I can confirm that downgrading to Gatsby 1.7 (yarn upgrade [email protected]) fixes it for me.

whmountains picture whmountains on 14 Aug 2017

Tried to reproduce it in using-remark, and faced with really strange behavior:

cd using-remark
npm i
npm run build // error mentioned above
rm -rf .cache
gatsby-dev // copy local gatsby (version 1.8.4) into node_modules
npm run build // no errors

nickmaltsev picture nickmaltsev on 14 Aug 2017

I'm running into this as well. I've tried this on page queries as well as layout queries – changing the query name by one character (with the development server running) triggers a cache update and it builds fine. I can then stop the dev server and run gatsby build successfully.

alampros picture alampros on 14 Aug 2017

So it looks like a race condition. It's happening it seems every 5 or so times I run gatsby. Investigating...

KyleAMathews picture KyleAMathews on 14 Aug 2017

I have the same situation like @alampros just said.
It's happened like pages or templates where I use graphql query, and
when I changing the query name, then It's pass again.

GoreStarry picture GoreStarry on 14 Aug 2017

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.

KyleAMathews picture KyleAMathews on 14 Aug 2017
🎉3

Thank you @KyleAMathews!

danoc picture danoc on 14 Aug 2017
👍3

Out in new release

KyleAMathews picture KyleAMathews on 14 Aug 2017
👍2

I Have the same problem with the latest version. It happens on gatsby develop and gatsby build.

Here's my component:

import React from 'react';
import Link from 'gatsby-link';
import Page from '../components/Page';
import PageSection from '../components/PageSection';

const GeneralPage = ({ data, pathContext }) => {
  const page = data.markdownRemark.frontmatter;
  const html = pathContext.html;
  return (
    <Page>
      <PageSection>
        <h1>
          {page.title}
        </h1>
      </PageSection>
      <PageSection dangerouslySetInnerHTML={{ __html: html }}>
      </PageSection>
    </Page>
  );
};

export default GeneralPage;

export const generalPageQuery = graphql`
  query GeneralPageQuery($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      frontmatter {
        title
      }
    }
  }
`;

And the stack trace:

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

   6 | 
   7 | const GeneralPage = ({ data, pathContext }) => {
>  8 |   const page = data.markdownRemark.frontmatter;
     |                     ^
   9 |   const html = pathContext.html;
  10 | 
  11 |   return (


  WebpackError: Cannot read property 'markdownRemark' of undefined

  - general-page.jsx:8 GeneralPage
    src/templates/general-page.jsx:8:21

  - ReactCompositeComponent.js:308 ReactCompositeComponentWrapper._constructComponentWithoutOwne    r
    ~/react-dom/lib/ReactCompositeComponent.js:308:1

  - ReactCompositeComponent.js:284 ReactCompositeComponentWrapper._constructComponent
    ~/react-dom/lib/ReactCompositeComponent.js:284:1

  - ReactCompositeComponent.js:187 ReactCompositeComponentWrapper.mountComponent
    ~/react-dom/lib/ReactCompositeComponent.js:187:1

  - ReactReconciler.js:45 Object.mountComponent
    ~/react-dom/lib/ReactReconciler.js:45:1

  - ReactMultiChild.js:236 ReactDOMComponent.mountChildren
    ~/react-dom/lib/ReactMultiChild.js:236:1

  - ReactDOMComponent.js:659 ReactDOMComponent._createContentMarkup
    ~/react-dom/lib/ReactDOMComponent.js:659:1

  - ReactDOMComponent.js:526 ReactDOMComponent.mountComponent
    ~/react-dom/lib/ReactDOMComponent.js:526:1

  - ReactReconciler.js:45 Object.mountComponent
    ~/react-dom/lib/ReactReconciler.js:45:1

  - ReactMultiChild.js:236 ReactDOMComponent.mountChildren
    ~/react-dom/lib/ReactMultiChild.js:236:1

An excerpt of package.json:

"dependencies": {
  "gatsby": "^1.9.24",
  "gatsby-link": "^1.6.16",
  "gatsby-plugin-canonical-urls": "^1.0.6",
  "gatsby-plugin-catch-links": "^1.0.8",
  "gatsby-plugin-favicon": "^1.0.0",
  "gatsby-plugin-feed": "^1.3.9",
  "gatsby-plugin-glamor": "^1.6.7",
  "gatsby-plugin-google-analytics": "^1.0.7",
  "gatsby-plugin-react-helmet": "^1.0.6",
  "gatsby-plugin-sass": "^1.0.12",
  "gatsby-plugin-sharp": "^1.6.7",
  "gatsby-plugin-sitemap": "^1.2.5",
  "gatsby-remark-autolink-headers": "^1.4.7",
  "gatsby-remark-copy-linked-files": "^1.5.7",
  "gatsby-remark-images": "^1.5.11",
  "gatsby-remark-prismjs": "^1.2.7",
  "gatsby-source-filesystem": "^1.4.12",
  "gatsby-transformer-remark": "^1.7.7",
  "prop-types": "^15.5.10"
}
tinrab picture tinrab on 8 Sep 2017

@tinrab – I believe the export has to be export const pageQuery, whereas you have export const generalPageQuery.

danoc picture danoc on 8 Sep 2017

@danoc I see. That fixed it.

Edit: Just an update. The error still happens sometimes, but not always as before. I think there's a problem with caching. In development mode, it throws that error, and if I re-save the source file it works again.

tinrab picture tinrab on 8 Sep 2017

Same issue -- just installed the boilerplate starter default or whatever and getting this all over the place. Not really sure how all this magic works yet so almost impossible to debug what is happening.

In production I just get "undefined" whereas in developer I can fix it by changing a file -- aka production does not work ever and never will since I do not have the hot reload there.

Have no idea on a lot of these invisible details. Like why it cant find some "id" variable when doing a query:

The GraphQL query from /Users/bradennapier/Desktop/Dash OS/IDE/projects/whaleclub-scam/src/templates/info.js failed

        Errors:
          GraphQLError: Cannot read property 'id' of undefined
        Query:
          query BlogPostByPath(
  $path: String!
) {
  markdownRemark(frontmatter: {path: {eq: $path}}) {
    html
    frontmatter {
      date(formatString: "MMMM DD, YYYY")
      path
      title
    }
  }
}

Doesnt seem like I can print to console either so impossible to debug.

bradennapier picture bradennapier on 14 Nov 2017

@bradennapier can you run the query in GraphiQL?

KyleAMathews picture KyleAMathews on 14 Nov 2017

I mean its definitely something I am doing causing that specific error - trying to figure out what magic is happenign and when/why with all this.

I am running into the other issue as well though which is the main problem.

Now I am getting 

     Errors:
          GraphQLError: Variable "$path" of required type "String!" was not provided.
        Query:

I never have a situation that I am calling this so I don't really know how its getting the query or why or when or anything.

Seems like it would be a lot better if these implementation details were exposed (albeit out of the way) so that when confused one can not only go and check quick in their project but also add whatever console statements etc to debug it easier.

bradennapier picture bradennapier on 14 Nov 2017

Getting this a lot too when I change things 

rror: Invariant Violation: /Users/bradennapier/Desktop/Dash OS/IDE/projects/whaleclub-scam/src/pages/index.js not found in the store components:
bradennapier picture bradennapier on 14 Nov 2017

@bradennapier I highly suggest going through the tutorial before diving into the graphql stuff — it explains the under-the-hood stuff pretty well. If you're already comfortable with React, etc. you can skip directly to part 4 of the tutorial which talks about GraphQL.

KyleAMathews picture KyleAMathews on 14 Nov 2017

I'm also having this issue. I can run the queries in GaraphQl but when I try to reference them in a React component I get errors stating the values are null. I have tried removing node_modules, package-lock.json and I even downgraded my Gatsby and plugins to match version on a site that I don't experience these issues with. No avail.

It is also intermittent. More times than not, it doesn't recognize any data from GraphQL, but then it will.

I have another GatsbyJS project that I've been working on for months without this problem. Just stated a new one today using gatsby-cli.

misscs picture misscs on 20 Jan 2018

I've just started having this issue. I ran through the tutorials with no problem, but now I've started trying to rebuild my site in Gatsby it's happening. I've been extending the default site created by gatsby new. So far it's only effecting the Header, everything else seems to get the data just fine, and I can run queries in GraphiQL without issue.

edit: I tried downgrading as mentioned above with no success

The Component:

import React from 'react'
import Link from 'gatsby-link'

const Header = ({data}) => {
  return (
    <div
      style={{
        background: 'rebeccapurple',
        marginBottom: '1.45rem'
      }}
    >
      <div
        style={{
          margin: '0 auto',
          maxWidth: 960,
          padding: '1.45rem 1.0875rem'
        }}
      >
       <h1 style={{ margin: 0 }}>
          <Link
            to='/'
            style={{
              color: 'white',
              textDecoration: 'none'
            }}
          >
            {data.site.siteMetadata.title}
          </Link>
        </h1>
      </div>
    </div>
  )
}

export default Header

export const query = graphql`
  query HeaderComponentQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`

The console error message:

TypeError: data is undefined
Stack trace:
Header@http://localhost:8000/commons.js:2555:1
instantiate/<@http://localhost:8000/commons.js:40674:25
instantiate@http://localhost:8000/commons.js:40672:9
Header@http://localhost:8000/commons.js line 40689 > Function:4:17
_constructComponentWithoutOwner/<@http://localhost:8000/commons.js:21822:17
measureLifeCyclePerf@http://localhost:8000/commons.js:21592:13
_constructComponentWithoutOwner@http://localhost:8000/commons.js:21821:15
_constructComponent@http://localhost:8000/commons.js:21796:17
mountComponent@http://localhost:8000/commons.js:21704:17
mountComponent@http://localhost:8000/commons.js:28206:19
mountChildren@http://localhost:8000/commons.js:27580:29
_createInitialChildren@http://localhost:8000/commons.js:23237:28
mountComponent@http://localhost:8000/commons.js:23056:8
mountComponent@http://localhost:8000/commons.js:28206:19
performInitialMount@http://localhost:8000/commons.js:21887:19
mountComponent@http://localhost:8000/commons.js:21774:17
mountComponent@http://localhost:8000/commons.js:28206:19
performInitialMount@http://localhost:8000/commons.js:21887:19
mountComponent@http://localhost:8000/commons.js:21774:17
mountComponent@http://localhost:8000/commons.js:28206:19
performInitialMount@http://localhost:8000/commons.js:21887:19
mountComponent@http://localhost:8000/commons.js:21774:17
mountComponent@http://localhost:8000/commons.js:28206:19
performInitialMount@http://localhost:8000/commons.js:21887:19
mountComponent@http://localhost:8000/commons.js:21774:17
mountComponent@http://localhost:8000/commons.js:28206:19
performInitialMount@http://localhost:8000/commons.js:21887:19
mountComponent@http://localhost:8000/commons.js:21774:17
mountComponent@http://localhost:8000/commons.js:28206:19
performInitialMount@http://localhost:8000/commons.js:21887:19
mountComponent@http://localhost:8000/commons.js:21774:17
mountComponent@http://localhost:8000/commons.js:28206:19
performInitialMount@http://localhost:8000/commons.js:21887:19
mountComponent@http://localhost:8000/commons.js:21774:17
mountComponent@http://localhost:8000/commons.js:28206:19
performInitialMount@http://localhost:8000/commons.js:21887:19
mountComponent@http://localhost:8000/commons.js:21774:17
mountComponent@http://localhost:8000/commons.js:28206:19
performInitialMount@http://localhost:8000/commons.js:21887:19
mountComponent@http://localhost:8000/commons.js:21774:17
mountComponent@http://localhost:8000/commons.js:28206:19
performInitialMount@http://localhost:8000/commons.js:21887:19
mountComponent@http://localhost:8000/commons.js:21774:17
mountComponent@http://localhost:8000/commons.js:28206:19
performInitialMount@http://localhost:8000/commons.js:21887:19
mountComponent@http://localhost:8000/commons.js:21774:17
mountComponent@http://localhost:8000/commons.js:28206:19
performInitialMount@http://localhost:8000/commons.js:21887:19
performInitialMountWithErrorHandling@http://localhost:8000/commons.js:21833:17
mountComponent@http://localhost:8000/commons.js:21772:17
mountComponent@http://localhost:8000/commons.js:28206:19
performInitialMount@http://localhost:8000/commons.js:21887:19
mountComponent@http://localhost:8000/commons.js:21774:17
mountComponent@http://localhost:8000/commons.js:28206:19
mountComponentIntoNode@http://localhost:8000/commons.js:26907:17
perform@http://localhost:8000/commons.js:30915:14
batchedMountComponentIntoNode@http://localhost:8000/commons.js:26929:4
perform@http://localhost:8000/commons.js:30915:14
batchedUpdates@http://localhost:8000/commons.js:25910:15
batchedUpdates@http://localhost:8000/commons.js:28991:11
_renderNewRootComponent@http://localhost:8000/commons.js:27122:6
_renderSubtreeIntoContainer@http://localhost:8000/commons.js:27204:22
render@http://localhost:8000/commons.js:27225:13
./.cache/app.js/</<@http://localhost:8000/commons.js:921:13
listener@http://localhost:8000/commons.js:7046:37
CrowsVeldt picture CrowsVeldt on 28 Jan 2018

@CrowsVeldt Try deleting the .cache directory. I get this issue on a regular basis and 80% of the time that will fix it.

$ rm -Rf .cache
whmountains picture whmountains on 29 Jan 2018
❤2 👍2 🎉1 😄1

@whmountains I've tried a couple times, but it didn't help. Thanks, though.

I've also tried renaming the query, deleting and rewriting the query, renaming the file, and moving the file. (just in case)

Just tried removing and reinstalling Gastby, and then the project repo. No change.

CrowsVeldt picture CrowsVeldt on 29 Jan 2018

I've added a Footer component (just a copy of the Header) to the layout and it has the same problem. Is there a reason that only components called from the layout would have this issue?

CrowsVeldt picture CrowsVeldt on 30 Jan 2018

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.

pieh picture pieh on 30 Jan 2018
❤8 👍3

@pieh Oh, right. I assumed I was probably missing something basic. Thanks!

CrowsVeldt picture CrowsVeldt on 30 Jan 2018

I'm running into similar issues to the ones mentioned here - I'm pretty sure it has to do with the fact that I'm nesting layouts...i.e. I have an Index layout that renders Header, Body, and Footer layouts. When I try to add a query to the Footer layout, for example, that query appears to be run (confirmed requested data appears in .cache/layout-footer.js), but the data prop is never passed into the component. Haven't had time to dive any deeper into why it's happening, but figured I'd share in case someone has time to look into this.

davidlormor picture davidlormor on 1 Feb 2018

@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.

pieh picture pieh on 1 Feb 2018
❤1

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.

Neha-takhi-cipl picture Neha-takhi-cipl on 24 Apr 2018
👎1

I am also experiencing this issue. It happened while I was following the part four of the tutorial and I managed to "fix" it by restarting the development server, but it keeps happening randomly. The contents of the page related files of my .cache/json directory also look like this

{
    "pathContext": {}
}

This is my package.json

{                                             
  "name": "gatsby-starter-hello-world",       
  "description": "Gatsby hello world starter",
  "license": "MIT",                           
  "scripts": {                                
    "develop": "gatsby develop",              
    "build": "gatsby build",                  
    "serve": "gatsby serve"                   
  },                                          
  "dependencies": {                           
    "gatsby": "^1.9.250",                     
    "gatsby-link": "^1.6.40",                 
    "gatsby-plugin-glamor": "^1.6.13",        
    "gatsby-plugin-typography": "^1.7.18",    
    "glamorous": "^4.12.5",                   
    "typography-theme-kirkham": "^0.16.3"     
  }                                           
}
idest picture idest on 5 May 2018

@bradennapier or anyone else that might be running into this error:

GraphQLError: Variable "$path" of required type "String!" was not provided.

...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.js theme into the src/templates folder, as shown in the docs. I had been trying to put that page template into the src/layouts folder, and even though I was pointing to it from gatsby-node.js and 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. 🙂

thundernixon picture thundernixon on 13 May 2018
👍3

Hi,

Lately got this problem. I other day I moved new folder/file to the content folder where all my static page resides and the graphql stopped getting the data. I got different error in browser and gatsby build.

in browser I got

TypeError: this.props.data is undefined

class Index extends React.Component 
{  render() {
   const postEdges = this.props.data.allMarkdownRemark.edges;
       return (
        <div className="index-container">
       <Helmet>

while during build I got below error :

` 42 | render() {
43 | const { mobile } = this.state;

44 | const { slug } = this.props.pathContext;
| ^
45 | const expanded = !mobile;
46 | const postOverlapClass = mobile ? "post-overlap-mobile" : "post-overlap";
47 | const postNode = this.props.data.markdownRemark;

WebpackError: Cannot read property 'slug' of undefined

  • post.jsx:44 PostTemplate.render
    src/templates/post.jsx:44:13

  • react-dom-server.node.production.min.js:28 d
    ~/react-dom/cjs/react-dom-server.node.production.min.js:28:207

  • react-dom-server.node.production.min.js:28 wa
    ~/react-dom/cjs/react-dom-server.node.production.min.js:28:493

  • react-dom-server.node.production.min.js:33 a.render
    ~/react-dom/cjs/react-dom-server.node.production.min.js:33:16

  • react-dom-server.node.production.min.js:32 a.read
    ~/react-dom/cjs/react-dom-server.node.production.min.js:32:201

  • react-dom-server.node.production.min.js:43 renderToString
    ~/react-dom/cjs/react-dom-server.node.production.min.js:43:1

  • static-entry.js:126 module.exports
    .cache/static-entry.js:126:31

  • static-entry.js:76 Function.Promise.fromNode.Promise.fromCallback
    .cache/static-entry.js:76:3`

I believe it's more or less related to cache than anything else. Would someone please suggest how to clear the cache or the other way to fix this problem.

@KyleAMathews would you advice ?

Sudip7 picture Sudip7 on 2 Sep 2018

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

braco picture braco on 18 Sep 2018
👍4 🎉1

For those ending up here in 2020, if you want to get data inside some component like Header or Footer, you can use useStaticQuery hook, see https://www.gatsbyjs.org/docs/recipes/querying-data/#querying-data-with-the-usestaticquery-hook

brootle picture brootle on 16 Jun 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

mikestopcontinues picture mikestopcontinues  ·  3Comments
brandonmp picture brandonmp  ·  3Comments
magicly picture magicly  ·  3Comments
kalinchernev picture kalinchernev  ·  3Comments
dustinhorton picture dustinhorton  ·  3Comments