[v2] GraphQL race condition

[geddski]

Description

Gatsby compiler is working fine but then browser throws an error because the GraphQL query data is null. I'm using gatsby-mdx and originally thought it was an issue there.

This error happens 90% of the time when I edit a markdown/mdx file. A simple page refresh doesn't fix it. The only way to fix the page again is to change the gatsby-config.js and restart gatsby develop. This is making switching to Gatsby very painful.

Steps to reproduce

• create a starter Gatsby v2 project
• get it working with gatsby-mdx
• put a ton of images/gifs/videos into your static folder (not sure if that's what's causing this but worth mentioning as I have in my blog project)
• make an .mdx post that contains a React component
• edit said post
• wish you were never born

Environment

System:
OS: macOS High Sierra 10.13.4
CPU: x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
Shell: 2.5.0 - /usr/local/bin/fish
Binaries:
Node: 10.8.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.2.0 - /usr/local/bin/npm
Browsers:
Chrome: 68.0.3440.106
Firefox: 61.0.1
Safari: 11.1
npmPackages:
gatsby: next => 2.0.0-beta.99
gatsby-mdx: 0.0.8 => 0.0.8
gatsby-plugin-react-helmet: next => 3.0.0-beta.4
gatsby-plugin-styled-components: next => 3.0.0-beta.3
gatsby-source-filesystem: next => 2.0.1-beta.10
gatsby-transformer-remark: next => 2.1.1-beta.6
npmGlobalPackages:
gatsby-cli: 2.0.0-beta.13

File contents

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: 'Geddski',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-styled-components',
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    {
      resolve: 'gatsby-mdx',
      options: {
        decks: []
      },
    },
  ],
}

package.json:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Dave Geddes",
  "private": true,
  "dependencies": {
    "@mdx-js/mdx": "^0.15.0",
    "@mdx-js/tag": "^0.15.0",
    "babel-plugin-styled-components": "^1.5.1",
    "brace": "^0.11.1",
    "common-tags": "^1.8.0",
    "gatsby": "next",
    "gatsby-mdx": "0.0.8",
    "gatsby-plugin-react-helmet": "next",
    "gatsby-plugin-styled-components": "next",
    "gatsby-source-filesystem": "next",
    "gatsby-transformer-remark": "next",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-helmet": "^5.2.0",
    "react-safe": "^1.1.1",
    "styled-components": "^3.4.0"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write '**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.13.7"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  }
}

gatsby-node.js:

const path = require(`path`)

const { createFilePath } = require(`gatsby-source-filesystem`)

// add fields to the nodes
exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `Mdx`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` })

    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  return new Promise((resolve, reject) => {
    resolve(
      graphql(
        `
          {
            allMdx {
              edges {
                node {
                  fileAbsolutePath
                  fileNode {
                    name
                  }
                  fields {
                    slug
                  }
                }
              }
            }
          }
        `
      ).then(result => {
        if (result.errors) {
          console.log(result.errors)
          reject(result.errors)
        }

        // Create blog posts pages.
        result.data.allMdx.edges.forEach(({ node }) => {
          let slug = ''
          if (node.fields && node.fields.slug) {
            slug = node.fields.slug
          }
          createPage({
            path: `/post/${node.fileNode.name}`,
            component: node.fileAbsolutePath,
            context: {
              slug: slug,
            },
          })
        })
      })
    )
  })
}

gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[KyleAMathews]

Thanks for the nice issue writeup! This is a high priority for us to fix after v2 is out (which should be next week).

[Chuloo]

Here's #7314 which is a similar issue with a clear reproduction. Closing this to as a duplicate issue. Feel free to open a new issue if you experience a different problem.

[pieh]

Fix for #7314 was published with gatsby@2.0.0-beta.106 (but it was really specific to remove trailing slashes plugin so it might not be duplicated issue), please check if this also fixes this issue and let us know. If it didn't I'll reopen this one

[geddski]

Shoot! I was hopeful that would solve it for me but I can confirm I still have the same error happen with gatsby@2.0.0-beta.106. I've added @KyleAMathews to my git repo to test against it directly.

Is it possible somewhere else is clearing the query text? First compile works 100% of the time, then breaks on almost every markdown file edit similar to that other issue.

[pieh]

There are other potential issues here - if possible could you invite me to repo as well? I probably have more time than @KyleAMathews to spend on this

[geddski]

@pieh added. See issue 1 for some additional notes/context. Thank you!

[pieh]

Fix for this - #7388