search

d4rekanguok / gatsby-typescript

Alternative typescript support plugin for Gatsbyjs. Aims to make using typescript in Gatsby as painless as possible
MIT License
122 stars 18 forks source link

[gatsby-plugin-graphql-codegen] - Failed to validate error Error [ValidationError]: "name" is not allowed #120

Open jephjohnson opened 3 years ago

jephjohnson commented 3 years ago

Describe the bug All was working great and now I keep getting the error 'Failed to validate error Error [ValidationError]: "name" is not allowed' I've tried removing node modules and re-installing and gatsby clean. Nothing is resolving this issue

To Reproduce yarn build

Environment (please complete the relevant info):

Additional context Package.json

"dependencies": {
    "@hot-loader/react-dom": "^16.11.0",
    "@sanity/block-content-to-react": "^2.0.7",
    "@sanity/image-url": "^0.140.19",
    "@types/gsap": "^1.20.2",
    "classnames": "^2.2.6",
    "date-fns": "^2.16.1",
    "gatsby": "^2.19.10",
    "gatsby-image": "^2.2.39",
    "gatsby-plugin-google-analytics": "^2.11.0",
    "gatsby-plugin-google-tagmanager": "^3.1.0",
    "gatsby-plugin-graphql-codegen": "^2.1.1",
    "gatsby-plugin-layout": "^1.1.21",
    "gatsby-plugin-manifest": "^2.2.40",
    "gatsby-plugin-offline": "^3.0.33",
    "gatsby-plugin-react-helmet": "^3.1.21",
    "gatsby-plugin-react-svg": "^3.0.0",
    "gatsby-plugin-sanity-image": "^0.6.0",
    "gatsby-plugin-sass": "^2.4.2",
    "gatsby-plugin-sharp": "^2.4.4",
    "gatsby-plugin-sitemap": "^3.2.0",
    "gatsby-plugin-tslint": "^0.0.2",
    "gatsby-plugin-typescript": "^2.1.26",
    "gatsby-source-filesystem": "^2.1.47",
    "gatsby-source-graphql": "^2.1.32",
    "gatsby-source-sanity": "^5.0.5",
    "gatsby-transformer-sharp": "^2.3.13",
    "graphql": "^14.6.0",
    "gsap": "^3.5.1",
    "jszip": "^3.5.0",
    "node-sass": "^4.14.1",
    "react": "^17.0.1",
    "react-dom": "^16.12.0",
    "react-dropzone": "^11.2.4",
    "react-helmet": "^5.2.1",
    "react-outside-click-handler": "^1.3.0",
    "react-responsive-carousel": "^3.2.10",
    "react-share": "^4.3.1",
    "react-toggle": "^4.1.1",
    "react-typography": "^0.16.19",
    "typography": "^0.16.19"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "^1.12.1",
    "@graphql-codegen/typescript": "^1.12.1",
    "@types/node": "^13.5.2",
    "@types/react": "^16.9.19",
    "@types/react-dom": "^16.9.5",
    "@types/react-helmet": "^5.0.15",
    "@types/react-toggle": "^4.0.2",
    "@types/styled-components": "^4.4.2",
    "@types/styled-theming": "^2.2.2",
    "@types/typography": "^0.16.3",
    "prettier": "^1.19.1",
    "tslint": "^6.0.0",
    "tslint-config-prettier": "^1.18.0",
    "tslint-loader": "^3.5.4",
    "tslint-react": "^4.2.0",
    "typescript": "^3.7.5",
    "yarn-upgrade-all": "^0.5.2"
  },

tsconfig.json:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": false,
    "module": "commonjs",
    "target": "esnext",
    "jsx": "react",
    "lib": ["dom", "es2015", "es2017"],
    "strict": true,
    "noEmit": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true
  },
  "include": ["./src/**/*"],
  "files": ["custom.d.ts"]
}

gatsby.config:

plugins: [
  ...
    {
      resolve: `gatsby-plugin-graphql-codegen`,
      options: {
        fileName: `./gatsby-graphql.ts`,
        documentPaths: [
          './src/**/*.{ts,tsx}',
          './node_modules/gatsby-*/**/*.js'
        ],
      }
    },
...
jephjohnson commented 3 years ago

Updated to ^2.7.1 and backup and running, however can't update to gatsby 3 due :(

nbaosullivan commented 3 years ago

@jephjohnson Not sure if this will help, but check for any unnamed queries in your src folder, and name them if they aren't. e.g. query MyQuery name{} instead of query{}. Then maybe if nothing there, exclude './node_modules/gatsby-*/**/*.js' from your documentPaths to see if there's something causing it there.

jephjohnson commented 3 years ago

query

Currently the only instances I have when the query doesn't have a name is when using 'useStaticQuery' ie: 

const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            author
          }
        }
      }
    `
  );
nbaosullivan commented 3 years ago

@jephjohnson if you change that to

const { site } = useStaticQuery(
    graphql`
      query SiteDetails {
        site {
          siteMetadata {
            title
            description
            author
          }
        }
      }
    `
  );

Does it help at all? I just ran into this error when adding gatsby-node.ts to codegen documentPaths and I had some unnamed queries. After adding a name, the error went.