Types are Ok on build but missing on develop

I have this very strange bug where the types are correctly generated when running gatsby build but other types are generated when typing gatsby develop and those type are missing all the custom type of my GraphQl queries …

My workaround right know it to build first, then develop, wait for it to stop on the graphQl types errors and then git checkout . to reset the newly generated types and then it works.

Thanks for your help ! (it used to work, so I guess it’s related to recent upgrades but I couldn’t pinpoint which one)

Here are my dependencies :

  "dependencies": {
    "@date-io/date-fns": "^1.3.13",
    "@material-ui/core": "^4.10.2",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@material-ui/pickers": "^3.2.10",
    "@react-hook/throttle": "^2.2.0",
    "axios": "^0.19.2",
    "babel-preset-react-app": "^9.1.1",
    "classnames": "^2.2.6",
    "date-fns": "^2.15.0",
    "date-fns-timezone": "^0.1.4",
    "deepmerge": "^4.2.2",
    "dompurify": "^2.0.11",
    "elasticsearch-browser": "^16.7.1",
    "gatsby": "^2.24.31",
    "gatsby-background-image": "^1.1.1",
    "gatsby-image": "^2.4.14",
    "gatsby-plugin-google-tagmanager": "^2.3.11",
    "gatsby-plugin-manifest": "^2.4.22",
    "gatsby-plugin-material-ui": "^2.1.10",
    "gatsby-plugin-node-reload": "^1.1.0",
    "gatsby-plugin-offline": "^3.2.22",
    "gatsby-plugin-react-helmet": "^3.3.10",
    "gatsby-plugin-react-leaflet": "^2.0.13",
    "gatsby-plugin-remote-images": "^2.2.0",
    "gatsby-plugin-s3": "^0.3.3",
    "gatsby-plugin-sass": "^2.3.12",
    "gatsby-plugin-sharp": "^2.6.25",
    "gatsby-plugin-typegen": "^2.2.1",
    "gatsby-plugin-typescript": "^2.4.15",
    "gatsby-plugin-typescript-checker": "^1.1.1",
    "gatsby-source-filesystem": "^2.3.20",
    "gatsby-source-graphql": "^2.6.2",
    "gatsby-transformer-sharp": "^2.5.12",
    "leaflet": "^1.6.0",
    "node-sass": "^4.14.1",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-helmet": "^6.1.0",
    "react-intl": "^5.4.5",
    "react-leaflet": "^2.7.0",
    "react-player": "^2.5.0",
    "slugify": "^1.4.5",
    "yup": "^0.29.3"
  },
  "devDependencies": {
    "@formatjs/cli": "^2.1.1",
    "@octokit/core": "^3.1.1",
    "@octokit/plugin-retry": "^3.0.3",
    "@octokit/rest": "^18.0.1",
    "@storybook/addon-actions": "^5.3.19",
    "@storybook/addon-info": "^5.3.19",
    "@storybook/addon-knobs": "^5.3.19",
    "@storybook/addon-links": "^5.3.19",
    "@storybook/addon-viewport": "^5.3.19",
    "@storybook/addons": "^5.3.19",
    "@storybook/react": "^5.3.19",
    "@types/classnames": "^2.2.10",
    "@types/dompurify": "^2.0.3",
    "@types/geojson": "^7946.0.7",
    "@types/jest": "^26.0.8",
    "@types/leaflet": "^1.5.16",
    "@types/react": "^16.9.44",
    "@types/react-dom": "^16.9.7",
    "@types/react-helmet": "^6.0.0",
    "@types/react-leaflet": "^2.5.1",
    "@types/yup": "^0.29.4",
    "@typescript-eslint/eslint-plugin": "^3.8.0",
    "babel-loader": "^8.0.6",
    "env-cmd": "^10.1.0",
    "eslint": "^7.5.0",
    "eslint-config-airbnb-typescript": "^9.0.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.21.2",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.5",
    "eslint-plugin-react-hooks": "^4.0.8",
    "gatsby-plugin-eslint": "^2.0.8",
    "husky": "^4.2.3",
    "lint-staged": "^10.2.11",
    "minimist": "^1.2.3",
    "prettier": "^2.0.5",
    "shelljs": "^0.8.4",
    "typescript": "^3.9.7"
  },

And the options in gatsby-config :

{
    resolve: 'gatsby-plugin-typegen',
    options: {
        emitSchema: {
            'src/__generated__/gatsby-introspection.json': true,
            'src/__generated__/gatsby-schema.graphql': true,
         },
         emitPluginDocuments: {
            'src/__generated__/gatsby-plugin-documents.graphql': true,
          },
     },
},

[hvermeire]

FWIW: I also had this issue and I worked around it by only running the plugin when doing gatsby build

module.exports = {
  plugins: [
    ...(process.env.NODE_ENV === 'production'
      ? [
          {
            resolve: `gatsby-plugin-typegen`,
            options: {
              emitSchema: {
                'src/__generated__/gatsby-introspection.json': true,
                'src/__generated__/gatsby-schema.graphql': true,
              },
              emitPluginDocuments: {
                'src/__generated__/gatsby-plugin-documents.graphql': true,
              },
            },
          },
        ]
      : []),
  ]
}

[adonig]

I tried downgrading to 2.24.8, but sadly it still doesn’t generate gatsby-plugin-documents.graphql. I have gatsby-schema.graphql, gatsby-introspection.json and gatsby-types.ts though. I think the missing file is why I get Unknown fragment "GatsbyImageSharpFluid_withWebp". GraphQL: Validation in Visual Studio Code.