search

hygraph / gatsby-source-graphcms

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

error "gatsby-source-graphcms" threw an error while running the sourceNodes lifecycle: #146

Closed GermainGirndt closed 3 years ago

GermainGirndt commented 3 years ago

I'm evaluating GraphCMS for my company using the gatsby-source-graphcms plugin for fetching data from a GraphCMS endpoint, for now public available at https://api-us-east-1.graphcms.com/v2/ckh67cd5i176t01z23h0fe7dy/master

GraphCMS's Graphiql playground ist working perfectly well for all needs.

Still, I faced some issues while fetching/accessing data from the GraphCMS API using Gatsby locally:

1) Gatsby DID work pretty well fetching and showing the models. Still, some model's fields aren't there: for instance, it couldn't find most fields related my Homepage model (foreign key), as shown in the images bellow.

Homepage model with many fields image

Most fields are not there image

And not here too: image

2) I made some experiments to try to figure out the problem source and I end up excluding the Foreign Key relation between the Homepage and SlideHeader models.

Since I made it, I'm running in the error Error: Schema customization failed to find remote field SlideHeader.homepage using Gatsby, although everything seems to work pretty well using GraphCMS's online Graphiql playground.

I've already tried cleaning the (i) cache and (ii) updating some packages locally, (iii) commenting some other gatsby plugins, (iv) republishing and (v)updating my project's contents at graphcms.com and (vi) cloning the GraphCMS project and using the new API's url, but nothing seems to work.

I'm suspecting it's an intern error from the GraphCMS GraphQL API by deleting/renaming models and it's relations.

Gatsby's complete log running gatsby develop:

success open and validate gatsby-configs - 0.037s
success load plugins - 0.830s
success onPreInit - 0.029s
success initialize cache - 0.006s
success copy gatsby files - 0.057s
success onPreBootstrap - 0.020s
success createSchemaCustomization - 0.007s

 ERROR #11321  PLUGIN

"gatsby-source-graphcms" threw an error while running the sourceNodes lifecycle:

Schema customization failed to find remote field SlideHeader.homepage

  189 |   const config = await createSourcingConfig(gatsbyApi, pluginOptions)
  190 | 
> 191 |   await createSchemaCustomization(config)
      |         ^
  192 | 
  193 |   if (webhookBody && Object.keys(webhookBody).length) {
  194 |     const { operation, data } = webhookBody

File: node_modules/gatsby-source-graphcms/src/gatsby-node.js:191:9

  Error: Schema customization failed to find remote field SlideHeader.homepage

  - build-fields.ts:96 buildFieldConfig
    [netlex-site2]/[gatsby-graphql-source-toolkit]/src/create-schema-customization/build-fields.ts:96:11

  - build-fields.ts:34 
    [netlex-site2]/[gatsby-graphql-source-toolkit]/src/create-schema-customization/build-fields.ts:34:20

  - Array.reduce

  - build-fields.ts:33 Object.buildFields
    [netlex-site2]/[gatsby-graphql-source-toolkit]/src/create-schema-customization/build-fields.ts:33:17

  - build-types.ts:99 objectType
    [netlex-site2]/[gatsby-graphql-source-toolkit]/src/create-schema-customization/build-types.ts:99:13

  - build-types.ts:156 buildTypeDefinition
    [netlex-site2]/[gatsby-graphql-source-toolkit]/src/create-schema-customization/build-types.ts:156:12

  - build-types.ts:176 Object.buildTypeDefinitions
    [netlex-site2]/[gatsby-graphql-source-toolkit]/src/create-schema-customization/build-types.ts:176:21

  - create-schema-customization.ts:14 createSchemaCustomization
    [netlex-site2]/[gatsby-graphql-source-toolkit]/src/create-schema-customization/create-schema-customization.ts:14:20

  - gatsby-node.js:191 Object.exports.sourceNodes
    [netlex-site2]/[gatsby-source-graphcms]/src/gatsby-node.js:191:9

  - api-runner-node.js:460 runAPI
    [netlex-site2]/[gatsby]/src/utils/api-runner-node.js:460:16

  - From previous event:

  - api-runner-node.js:589 Promise.catch.decorateEvent.pluginName
    [netlex-site2]/[gatsby]/src/utils/api-runner-node.js:589:9

  - From previous event:

  - api-runner-node.js:588 
    [netlex-site2]/[gatsby]/src/utils/api-runner-node.js:588:14

  - timers.js:461 processImmediate
    internal/timers.js:461:21

  - From previous event:

  - api-runner-node.js:561 
    [netlex-site2]/[gatsby]/src/utils/api-runner-node.js:561:13

  - From previous event:

  - api-runner-node.js:477 module.exports
    [netlex-site2]/[gatsby]/src/utils/api-runner-node.js:477:3

  - source-nodes.ts:97 _default
    [netlex-site2]/[gatsby]/src/utils/source-nodes.ts:97:9

  - source-nodes.ts:24 sourceNodes
    [netlex-site2]/[gatsby]/src/services/source-nodes.ts:24:9

  - interpreter.js:722 Interpreter.exec
    [netlex-site2]/[xstate]/lib/interpreter.js:722:27

  - interpreter.js:204 Interpreter.execute
    [netlex-site2]/[xstate]/lib/interpreter.js:204:22

  - interpreter.js:224 Interpreter.update
    [netlex-site2]/[xstate]/lib/interpreter.js:224:18

  - interpreter.js:125 
    [netlex-site2]/[xstate]/lib/interpreter.js:125:23

  - scheduler.js:60 Scheduler.process
    [netlex-site2]/[xstate]/lib/scheduler.js:60:13

  - scheduler.js:44 Scheduler.schedule
    [netlex-site2]/[xstate]/lib/scheduler.js:44:14

  - interpreter.js:121 Interpreter.send
    [netlex-site2]/[xstate]/lib/interpreter.js:121:29

  - interpreter.js:840 actor.id
    [netlex-site2]/[xstate]/lib/interpreter.js:840:23

warn The gatsby-source-graphcms plugin has generated no Gatsby nodes. Do you need it?
success Checking for changed pages - 0.002s
success source and transform nodes - 1.289s
success building schema - 0.287s
info Total nodes: 505, SitePage nodes: 25 (use --verbose for breakdown)
success createPages - 0.045s
success Checking for changed pages - 0.001s
success createPagesStatefully - 0.115s
success update schema - 0.051s
success write out redirect data - 0.002s
success onPostBootstrap - 0.001s
info bootstrap finished - 5.778s
success onPreExtractQueries - 0.001s
success extract queries from components - 0.914s
success write out requires - 0.040s
success run page queries - 0.046s - 1/1 21.55/s
⠀
You can now view XXXXX [removed by the author] in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 9.508s

Dependencies in the package.json file

{
  [...]
  "dependencies": {
    "axios": "^0.19.2",
    "framer-motion": "^1.8.4",
    "gatsby": "^2.26.0",
    "gatsby-background-image": "^1.1.1",
    "gatsby-image": "^2.2.39",
    "gatsby-plugin-google-gtag": "^2.1.4",
    "gatsby-plugin-graphql-codegen": "^2.7.1",
    "gatsby-plugin-i18n": "^1.0.1",
    "gatsby-plugin-preact": "^3.2.1",
    "gatsby-plugin-react-helmet": "^3.1.21",
    "gatsby-plugin-react-helmet-canonical-urls": "^1.4.0",
    "gatsby-plugin-remote-images": "^2.2.0",
    "gatsby-plugin-root-import": "^2.0.5",
    "gatsby-plugin-s3": "^0.3.3",
    "gatsby-plugin-sass": "^2.1.28",
    "gatsby-plugin-sharp": "^2.4.4",
    "gatsby-source-filesystem": "^2.1.47",
    "gatsby-source-graphcms": "^2.1.0",
    "gatsby-transformer-sharp": "^2.3.13",
    "intl": "^1.2.5",
    "node-sass": "^4.13.1",
    "preact": "^10.3.4",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1",
    "react-intl": "^3.12.0",
    "sharp": "^0.24.0",
    "typeface-lato": "0.0.75",
    "typescript": "^4.0.5",
    "yup": "^0.29.3"
  },
  "devDependencies": {
    "@types/yup": "^0.29.7",
    "prettier": "^1.19.1"
  },
  [...]
}

configs in the gatsby-config.js file (I commented some for test purporses)

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})
const path = require(`path`)
const languages = require("./src/data/languages")
const siteURL = new URL("https://netlex.io")

module.exports = {
  siteMetadata: {
    title: "netLex",
    titleTemplate: "netLex | %s",
    description:
      "Solução para automatização e gestão de documentos e contratos. Faça seus documentos fluírem!",
    url: "https://www.netlex.io",
    image: "/netlex.jpg",
    keywords: "automatização, gestão, documento, contrato, netlex",
    languages,
  },
  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: [
          process.env.GATSBY_GA_TRACKING_ID, // Google Analytics / GA
          process.env.GATSBY_AW_CONVERSION_ID, // Google Ads / Adwords / AW
        ],
        gtagConfig: {
          anonymize_ip: true,
          cookie_expires: 0,
        },
        pluginConfig: {
          head: true,
          respectDNT: true,
          exclude: ["/preview/**"],
        },
      },
    },
    // `gatsby-plugin-graphql-codegen`,
    {
      resolve: "gatsby-plugin-root-import",
      options: {
        "~": `${__dirname}/public/`,
        "~images": path.join(__dirname, "src/images/"),
        "~components": path.join(__dirname, "src/components/"),
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data/`,
      },
    },
    {
      resolve: "gatsby-plugin-i18n",
      options: {
        langKeyForNull: "pt",
        langKeyDefault: languages.defaultLangKey,
        useLangKeyLayout: true,
        prefixDefault: false,
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-react-helmet-canonical-urls`,
      options: {
        siteUrl: siteURL.origin,
      },
    },
    {
      resolve: `gatsby-plugin-s3`,
      options: {
        bucketName: process.env.AWS_BUCKET_NAME,
        protocol: siteURL.protocol.slice(0, -1),
        hostname: siteURL.hostname,
      },
    },
    `gatsby-plugin-sass`,
    `gatsby-plugin-preact`,
    {
      resolve: "gatsby-source-graphcms",
      options: {
        endpoint: process.env.GRAPHCMS_ENDPOINT,
      },
    },
    // {
    //   resolve: `gatsby-plugin-remote-images`,
    //   options: {
    //     nodeType: "GraphCMS_Asset",
    //     imagePath: "url",
    //   },
    // },
  ],
}
ynnoj commented 3 years ago

@GermainPereira Can you please check the generated query fragments in the project directory. Are the missing fields present there?

GermainGirndt commented 3 years ago

@ynnoj Yes, there are missing fragments there as well as the fragments that shouldn't be there (I've already deleted the Homepage relation with the slideHeaders but it's still there).

I've deleted the graphcms-fragments folder and it ran perfectly! It seems like the GraphQL plugin can't fetch automatically the Schema changes for some reason.

Thank you for the fast answer!

ynnoj commented 3 years ago

@GermainPereira That's great!

The generated fragments are what the source plugin uses in queries to fetch data from GraphCMS and subsequently create the Gatsby nodes during the build. These can be configured (i.e. removing or adding fields) and as a result are not automatically re-generated following any remote schema changes. As you've figured out, you can remove the directory and they'll be regenerated but you'll lose any custom fields.

You should check these fragments into your version control (along with source code) and maintain them alongside your GraphCMS project. Hope this helps!