如何在运行 Gatsby build/develop 时修复 Invariant Violation 错误

如何解决如何在运行 Gatsby build/develop 时修复 Invariant Violation 错误

我使用的是 node v16.0.0、Gatsby v3.6.1 和 Yarn v1.22.10 作为带有插件的依赖管理器：

• gatsby-source-apiserver v2.1.8。
• gatsby-plugin-image v1.4.0。

我在文件 gatsby-node.js 上使用了以下函数在 GraphQL 中创建节点，其中包含稍后可以查询的图像：

// gatsby-node.js
const { createRemoteFileNode } = module.require(`gatsby-source-filesystem`)

exports.onCreateNode = async ({   node,actions: { createNode },store,cache,createNodeId,}) => {
  if (node.internal.type === `API__images` && node.pk) {
    let fileNode = await createRemoteFileNode({
      url: node.url,// string that points to the URL of the image
      parentNodeId: node.id,// id of the parent node of the fileNode you are going to create
      createNode,// helper function in gatsby-node to generate the node
      createNodeId,// helper function in gatsby-node to generate the node
      cache,// Gatsby's cache
      store,// Gatsby's Redux store
    })
    // if the file was created,attach the new node to the parent node
    if (fileNode) {
      node.image___NODE = fileNode.id
    }
  }
}

这似乎在运行 gatsby develop 或 gatsby build 时正常工作，但如果我再次尝试运行这些命令中的任何一个（使用相同的源数据），则会引发以下错误：

Missing onError handler for invocation 'building-schema',error was Invariant Violation: Encountered an error 
trying to infer a GraphQL type for: `image___NODE`. 
There is no corresponding node with the `id` field matching: 

"27564a59-be49-51fb-98d6-c32de4f2030c","379357c0-1faa-5177-806d-7f155f2e3e85",...

那些 27564a59-b..、379357c0-1.. 是在 gatsby-node.js 函数上创建的图像节点 ID。

如果我运行 gatsby clean 它将正常工作，但使用 gatsby clean 不是一个好的解决方案，因为清理缓存会破坏增量构建。

有人知道如何解决这个错误吗？我应该为节点使用固定 ID 吗？

回溯错误：

(/my-project/node_modules/invariant/invariant.js:40:15)
    at getFieldConfigFromFieldNameConvention (/my-project/node_modules
/gatsby/src/schema/infer/add-inferred-fields.js:227:3)
    at getFieldConfig (/my-project/node_modules/gatsby/src/schema/infe
r/add-inferred-fields.js:129:19)
    at forEach (/my-project/node_modules/gatsby/src/schema/infer/add-i
nferred-fields.js:79:25)
    at Array.forEach (<anonymous>)
    at addInferredFieldsImpl (/my-project/node_modules/gatsby/src/sche
ma/infer/add-inferred-fields.js:63:28)
    at addInferredFields (/my-project/node_modules/gatsby/src/schema/i
nfer/add-inferred-fields.js:27:3)
    at addInferredType
(/my-project/node_modules/gatsby/src/schema/infer/index.js:101:3)
    at map
(/my-project/node_modules/gatsby/src/schema/infer/index.js:65:5)
    at Array.map (<anonymous>)
    at addInferredTypes
(/my-project/node_modules/gatsby/src/schema/infer/index.js:64:23)
    at updateSchemaComposer
(/my-project/node_modules/gatsby/src/schema/schema.js:169:9)
    at buildSchema
(/my-project/node_modules/gatsby/src/schema/schema.js:64:3)
    at build
(/my-project/node_modules/gatsby/src/schema/index.js:105:18)
    at buildSchema
(/my-project/node_modules/gatsby/src/services/build-schema.ts:19:3)'

解决方法

这个 GitHub thread 似乎是一个非常新鲜的话题。

如果清理缓存不是您的用例的解决方案，那么问题似乎可以从 npm 转移到作为依赖项管理器的 yarn 来解决。

此外，还尝试通过以下方式删除所有 node_modules 和锁定的依赖项：

rm -rf node_modules && rm -rf package-lock.json

进行全新安装。

---

根据提示的错误，我会尝试将您的节点创建包装在 try/catch 中：

// gatsby-node.js
const { createRemoteFileNode } = module.require(`gatsby-source-filesystem`)

exports.onCreateNode = async ({   node,actions: { createNode },store,cache,createNodeId,}) => {
  let fileNode;
 try{
  if (node.internal.type === `API__images` && node.pk) {
    fileNode = await createRemoteFileNode({
      url: node.url,// string that points to the URL of the image
      parentNodeId: node.id,// id of the parent node of the fileNode you are going to create
      createNode,// helper function in gatsby-node to generate the node
      createNodeId,// helper function in gatsby-node to generate the node
      cache,// Gatsby's cache
      store,// Gatsby's Redux store
    })
  } catch (e) {
      console.log(e)
    }
    // if the file was created,attach the new node to the parent node
    if (fileNode) {
      node.image___NODE = fileNode.id
    }
  }
}

我知道您说过运行 gatsby clean 不是一种选择，但是当您更改核心节点时，您可能会被迫运行一个。项目完成（第一次构建）后，下一次构建将获取并使用您的缓存。