hygraph / gatsby-source-graphcms

The official Gatsby source plugin for GraphCMS projects
https://graphcms.com
MIT License
145 stars 41 forks source link

Problem building GraphCMS nodes when upgrading to Gatsby v4 #213

Closed M4ss1ck closed 2 years ago

M4ss1ck commented 2 years ago

I got the following error after updating gatsby from v2 to v4

ERROR 

[gatsby-source-graphcms]: Problem building GraphCMS nodes

 Error: [
  {
    "message": "not allowed",
    "extensions": {
      "code": "403",
      "path": [
        "authors"
      ]
    }
  }
]

not finished source and transform nodes - 1.849s
not finished [gatsby-graphql-toolkit] fetching Asset - 0.717s
not finished [gatsby-graphql-toolkit] fetching New - 0.717s
not finished [gatsby-graphql-toolkit] fetching Page - 0.723s
not finished [gatsby-graphql-toolkit] fetching Post - 0.735s
not finished [gatsby-graphql-toolkit] fetching ScheduledOperation - 0.735s
not finished [gatsby-graphql-toolkit] fetching ScheduledRelease - 0.731s
not finished [gatsby-graphql-toolkit] fetching Seo - 0.730s
not finished [gatsby-graphql-toolkit] fetching User - 0.723s

 ELIFECYCLE  Command failed with exit code 1.

In gatsby-config.js I have

{
      resolve: "gatsby-source-graphcms",
      options: {
        endpoint: process.env.GRAPHCMS_ENDPOINT,
        token: process.env.GRAPHCMS_TOKEN,
        buildMarkdownNodes: true,
        downloadLocalImages: true,
      },
 },

Steps to reproduce:

clone https://github.com/M4ss1ck/wasting-blog/tree/actualizar-dependencias and run pnpm dev or pnpm build

gatsby-cli info:

System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i3-6100 CPU @ 3.70GHz
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (94.0.992.50)
  npmPackages:
    gatsby: ^4.3.0 => 4.3.0
    gatsby-plugin-dark-mode: ^1.1.2 => 1.1.2
    gatsby-plugin-disqus: ^1.2.3 => 1.2.3
    gatsby-plugin-image: ^2.3.0 => 2.3.0
    gatsby-plugin-manifest: ^4.3.0 => 4.3.0
    gatsby-plugin-mdx: 3.3.0 => 3.3.0
    gatsby-plugin-pnpm: ^1.2.9 => 1.2.9
    gatsby-plugin-postcss: ^5.3.0 => 5.3.0
    gatsby-plugin-react-helmet: ^5.3.0 => 5.3.0
    gatsby-plugin-react-svg: ^3.1.0 => 3.1.0
    gatsby-plugin-sharp: ^4.3.0 => 4.3.0
    gatsby-source-filesystem: ^4.3.0 => 4.3.0
    gatsby-source-graphcms: 2.6.0 => 2.6.0
    gatsby-transformer-sharp: ^4.3.0 => 4.3.0
  npmGlobalPackages:
    gatsby-cli: 4.2.0
M4ss1ck commented 2 years ago

I changed my GRAPHCMS_TOKEN enviroment variable with a different one just for doing something (the previous one was working with gatsby v2) and now I can use gatsby develop just fine. However, gatsby build throws the following errors

> gatsby build

success open and validate gatsby-configs, load plugins - 1.875s
success onPreInit - 0.006s
success delete worker cache from previous builds - 0.004s
success initialize cache - 0.063s
success copy gatsby files - 0.364s
success Compiling Gatsby Functions - 0.481s
success onPreBootstrap - 0.509s
success createSchemaCustomization - 0.014s
warn Calling `createTypes` in the `sourceNodes` API is deprecated. Please use: `createSchemaCustomization`.
success [gatsby-graphql-toolkit] fetching New - 0.743s
success [gatsby-graphql-toolkit] fetching Page - 0.759s
success [gatsby-graphql-toolkit] fetching ScheduledOperation - 0.753s
success [gatsby-graphql-toolkit] fetching Post - 0.786s
success [gatsby-graphql-toolkit] fetching Seo - 0.878s
success [gatsby-graphql-toolkit] fetching ScheduledRelease - 0.969s
success [gatsby-graphql-toolkit] fetching Author - 1.096s
success [gatsby-graphql-toolkit] fetching Asset - 1.116s
success [gatsby-graphql-toolkit] fetching User - 1.166s
success Checking for changed pages - 0.003s
success source and transform nodes - 2.853s
info Writing GraphQL type definitions to E:/TRABAJO/web/1. Proyectos/wasting-blog/.cache/schema.gql
success building schema - 2.400s
success createPages - 0.490s
success createPagesStatefully - 0.231s
info Total nodes: 122, SitePage nodes: 10 (use --verbose for breakdown)
success Checking for changed pages - 0.003s
success Cleaning up stale page-data - 0.005s
success onPreExtractQueries - 0.003s
warn `createResolvers` passed resolvers for type `GraphCMS_Post` that doesn't exist in the schema. Use `createTypes` to add the type before adding     
resolvers.
success extract queries from components - 2.184s
success write out redirect data - 0.009s
success onPostBootstrap - 0.010s
info bootstrap finished - 15.488s
success write out requires - 0.019s
success Building production JavaScript and CSS bundles - 1.562s
success Building HTML renderer - 1.003s
success Execute page configs - 0.035s
success Caching Webpack compilations - 0.001s

 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "id" on type "GraphCMS_Asset".

If you don't expect "id" to exist on the type "GraphCMS_Asset" it is most likely a typo.
However, if you expect "id" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server      
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query 
and what shape they have
- You want to optionally use your field "id" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL    
schema. A quick fix is to add at least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy       
content". Visit our docs to learn how you can define the schema for "GraphCMS_Asset":
https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#creating-type-definitions

 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "graphCmsAsset" on type "Query".

If you don't expect "graphCmsAsset" to exist on the type "Query" it is most likely a typo.
However, if you expect "graphCmsAsset" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server      
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query 
and what shape they have
- You want to optionally use your field "graphCmsAsset" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the 
GraphQL schema. A quick fix is to add at least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy       
content". Visit our docs to learn how you can define the schema for "Query":
https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#creating-type-definitions

 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "graphCmsAsset" on type "Query".

If you don't expect "graphCmsAsset" to exist on the type "Query" it is most likely a typo.
However, if you expect "graphCmsAsset" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server      
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query 
and what shape they have
- You want to optionally use your field "graphCmsAsset" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the 
GraphQL schema. A quick fix is to add at least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy       
content". Visit our docs to learn how you can define the schema for "Query":
https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#creating-type-definitions

 ERROR #85928 

An error occurred during parallel query running.
Go here for troubleshooting tips: https://gatsby.dev/pqr-feedback

  Error: Worker exited before finishing task

  - index.js:112 ChildProcess.<anonymous>
    [wasting-blog]/[gatsby-worker@1.3.0]/[gatsby-worker]/dist/index.js:112:45

  - child_process.js:277 Process.ChildProcess._handle.onexit
    internal/child_process.js:277:12

not finished run queries in workers - 0.237s

 ELIFECYCLE  Command failed with exit code 1.

I guess it got something to do with the two warnings at the beginning, but in development (pnpm dev) there's only one and there's no error

M4ss1ck commented 2 years ago

I just saw the note for gatsby v4 in the readme, my bad, so I did pnpm add gatsby-source-graphcms@next gatsby-plugin-image@next, however I'm still getting an error, this time with markdown content

Page data from page-data.json for the failed page "/posts/intro": {
  ...
    "content": {
          "markdownNode": null
    },
  ...
failed Building static HTML for pages - 4.146s

 ERROR #95313 

Building static HTML failed for path "/posts/intro"

See our docs page for more info on this error: https://gatsby.dev/debug-html

  WebpackError: TypeError: Cannot read property 'childMdx' of null

  - blog-post.js:38 
    webpack:/wasting-blog/src/templates/blog-post.js:38:51

  - index.js:22 
    [wasting-blog]/[decode-uri-component@0.2.0]/[decode-uri-component]/index.js:22:1

  - index.js:25 
    [wasting-blog]/[decode-uri-component@0.2.0]/[decode-uri-component]/index.js:25:1

  - index.js:31 
    [wasting-blog]/[decode-uri-component@0.2.0]/[decode-uri-component]/index.js:31:1

  - index.js:30 
    [wasting-blog]/[decode-uri-component@0.2.0]/[decode-uri-component]/index.js:30:4

  - index.js:41 
    [wasting-blog]/[decode-uri-component@0.2.0]/[decode-uri-component]/index.js:41:1

  - static-entry.js:293
    webpack:/wasting-blog/.cache/static-entry.js:293:22

  - dev-404-page.js:14
    wasting-blog/.cache/dev-404-page.js:14:11

 ELIFECYCLE  Command failed with exit code 1.

I tried pnpm add gatsby-plugin-mdx@next but the problem persists.

Coffeeri commented 2 years ago

@M4ss1ck I have similar issues, where I also have set

downloadLocalImages: true,

to be able to access images e.g. via

query Analogues {
    allGraphCmsAnalogue {
      nodes {
        heading
        image {
          localFile {
            childImageSharp {
              gatsbyImageData(
                width: 500
                placeholder: BLURRED
                formats: [AUTO, WEBP, AVIF]
              )
            }
          }
        }
      }
    }
  }

While gatsby develop sometimes fetches the images correctly, gatsby build almost never fetches them correctly, such that I get warning messages like:

...
warn [gatsby-plugin-image] Missing image prop
warn [gatsby-plugin-image] Missing image prop
warn [gatsby-plugin-image] Missing image prop
...

Where the returned image from localFile is null.

acidicX commented 2 years ago

@Coffeeri sounds a lot like the issue I'm having, I've opened a new one (#214) because the initial report here seems to be unrelated to images.

nickmarks00 commented 2 years ago

@M4ss1ck I am having the same issue regarding childMdx nodes...running the build in verbose mode, I can see that the markdownNodes are being generated, but not the childMdx part. My project also works fine in develop...Here is my current package.json:

"@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "autoprefixer": "^10.4.0",
    "gatsby": "^4.4.0",
    "gatsby-plugin-image": "^2.5.0-next.2",
    "gatsby-plugin-manifest": "^4.4.0",
    "gatsby-plugin-mdx": "^3.4.0",
    "gatsby-plugin-postcss": "^5.0.0",
    "gatsby-plugin-purgecss": "^6.1.0",
    "gatsby-plugin-react-helmet": "^5.4.0",
    "gatsby-plugin-sass": "^5.2.0",
    "gatsby-plugin-sharp": "^4.4.0",
    "gatsby-plugin-sitemap": "^5.4.0",
    "gatsby-plugin-webfonts": "^2.2.1",
    "gatsby-source-filesystem": "^4.4.0",
    "gatsby-source-graphcms": "^2.7.0-next.1",
    "gatsby-transformer-sharp": "^4.4.0",
    "moment": "^2.29.1",
    "normalize.css": "^8.0.1",
    "postcss": "^8.3.11",
    "prism-react-renderer": "^1.2.1",
    "prop-types": "^15.8.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.3.1",
    "react-modal-image": "^2.5.0",
    "sass": "^1.43.4",
    "slugify": "^1.6.4",
    "styled-components": "^5.3.3",
    "three": "^0.136.0",
    "vanta": "^0.5.21"

And a link to the problematic repo, should someone wish: https://github.com/nickmarks00/chumbers.io

notrab commented 2 years ago

Ok, I think I'm closer to the issue here and it's regarding Rich Text fields that have embeds enabled.

I'll update this thread in a few days as I try to fix this.

notrab commented 2 years ago

The markdownNode issue should be resolved on the latest next release of gatsby-source-graphcms.

I'll close this as there are a few issues related to assets already.

M4ss1ck commented 2 years ago

gatsby-source-graphcms@2.7.0-next.9 didn't solve this for me, unfortunately