Gatsby: GraphQL queries break after git clone

Created on 2 Dec 2017  ยท  5Comments  ยท  Source: gatsbyjs/gatsby

I'm encountering a strange issue.

I've built a site with Gatsby the works totally fine (gatsby develop and gatsby build) in the original local folder and builds fine on Netlify after pushing to GitLab.

For some reason, though, all my GraphQL queries break when I git clone a new copy of the site and run npm install followed by gatsby develop from the new local folder. Strangely, gatsby build still works fine (possibly because the cached query results are being used).

Here is the error (when I run gatsby develop from the new cloned version of the site):

success delete html files from previous builds โ€” 0.006 s
success open and validate gatsby-config.js โ€” 0.017 s
success copy gatsby files โ€” 0.118 s
success onPreBootstrap โ€” 0.005 s
warning The gatsby-source-filesystem plugin has generated no Gatsby nodes. Do you need it?
success source and transform nodes โ€” 1.561 s
success building schema โ€” 0.224 s
success createLayouts โ€” 2.696 s
success createPages โ€” 0.030 s
success createPagesStatefully โ€” 0.057 s
success onPreExtractQueries โ€” 0.001 s
success update schema โ€” 0.045 s
GraphQL Error There was an error while compiling your site's GraphQL queries.
  Invariant Violation: GraphQLParser: Unknown field `imageSharp` on type `RootQueryType`. Source: document `BiographyPageQuery` file: `GraphQL request`.

success extract queries from components โ€” 0.132 s
success run graphql queries โ€” 0.003 s
error UNHANDLED REJECTION

  TypeError: Cannot read property 'jsonName' of undefined

  - pages-writer.js:79
    [ashley-thouret-website]/[gatsby]/dist/internal-plugins/query-runner/pages-writer.js:79:36

  - Array.forEach

  - next_tick.js:131 _combinedTickCallback
    internal/process/next_tick.js:131:7

  - next_tick.js:180 process._tickCallback
    internal/process/next_tick.js:180:9

Here is one of my queries (which works fine from the original local folder and in the graphql debugger, but doesn't work from the git clone version of the site):

export const query = graphql`
    query BiographyPageQuery {
        heroImage: imageSharp(id: { regex: "/biography/hero/" }) {
            sizes(maxWidth: 1731) {
                ...GatsbyImageSharpSizes
            }
        }
        bioQuotationImage: imageSharp(id: { regex: "/biography/quote/" }) {
            sizes(maxWidth: 1583) {
                ...GatsbyImageSharpSizes
            }
        }
    }
`

(The error message cycles through all my queries if I start commenting out queries to narrow down the issue.)

Here's my .gitignore:

# Project dependencies
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules
.cache/
# Build directory
public/
.DS_Store
yarn-error.log

Here's my package.json:

{
    "name": "[Website name]",
    "description": "[Website description]",
    "version": "1.0.0",
    "author": "[Author Name]",
    "repository": "[Repository URL]",
    "dependencies": {
        "gatsby": "^1.9.127",
        "gatsby-cli": "^1.1.25",
        "gatsby-image": "^1.0.24",
        "gatsby-link": "^1.6.24",
        "gatsby-plugin-purify-css": "^2.2.1",
        "gatsby-plugin-react-helmet": "^1.0.8",
        "gatsby-plugin-react-next": "^1.0.4",
        "gatsby-plugin-sharp": "^1.6.20",
        "gatsby-plugin-styled-components": "^2.0.2",
        "gatsby-source-filesystem": "^1.5.8",
        "gatsby-transformer-sharp": "^1.6.13",
        "object-fit-images": "^3.2.3",
        "react-animate-height": "^0.10.8",
        "react-flip-move": "^2.9.17",
        "react-headroom": "^2.2.2",
        "react-icons": "^2.2.7",
        "react-image-lightbox": "^4.3.0",
        "react-inlinesvg": "^0.7.1",
        "react-slick": "^0.15.4",
        "react-youtube": "^7.5.0",
        "rodal": "^1.6.1",
        "shortid": "^2.2.8",
        "slick-carousel": "^1.8.1",
        "styled-components": "^2.2.3",
        "styled-normalize": "^2.2.1",
        "twitter-fetcher": "^17.0.0",
        "typeface-benchnine": "0.0.44",
        "typeface-droid-sans": "0.0.44"
    },
    "keywords": [
        "gatsby"
    ],
    "license": "MIT",
    "main": "n/a",
    "scripts": {
        "build": "gatsby build",
        "develop": "gatsby develop",
        "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\"",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "devDependencies": {
        "prettier": "^1.8.1"
    }
}

Any help would be appreciated!

Most helpful comment

@ooloth @HarrisJT In my case I was missing gatsby-source-filesystem. After configuring it like here, my queries worked.

All 5 comments

I'm getting a similar issue. I can't run ANY gatsby site, I've tried some of the projects in the readme.md, some of the gatsby tutorials, my own sites. I always get this error

``success createPages โ€” 0.063 s success createPagesStatefully โ€” 0.080 s success onPreExtractQueries โ€” 0.001 s success update schema โ€” 0.063 s GraphQL Error There was an error while compiling your site's GraphQL queries. Invariant Violation: GraphQLParser: Unknown fieldallMarkdownRemarkon typeRootQueryType. Source: documentgetPostsfile:GraphQL request`.

success extract queries from components โ€” 0.197 s
success run graphql queries โ€” 0.019 s
error UNHANDLED REJECTION

TypeError: Cannot read property 'jsonName' of undefined```

@ooloth @HarrisJT In my case I was missing gatsby-source-filesystem. After configuring it like here, my queries worked.

gatsby-source-filesystem is included still i am getting this error

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!

Just to add some detail to this. I was running into a similar issue after I installed gatsby-transformer-remark. This comment above about modifying the config was a clue to me that there might be some caching issues here?

So I merely did touch gatsby-config.js and rebuilt via gatsby develop and the allMarkdownRemark field finally appeared..
Fwiw, I also tried deleting node_modules and deleted the .cache directory. Neither action seemed to fix this issue.

image

Was this page helpful?
0 / 5 - 0 ratings

Related issues

dustinhorton picture dustinhorton  ยท  3Comments

KyleAMathews picture KyleAMathews  ยท  3Comments

theduke picture theduke  ยท  3Comments

3CordGuy picture 3CordGuy  ยท  3Comments

signalwerk picture signalwerk  ยท  3Comments