如何在 Gatsby 上为外部图像正确创建类型定义

问题描述

我使用 Gatsby 3.6.1，带有 Gatsby plugin image。我正在从返回以下结构的 API 中获取图像：

[
   {
     "pk": 1,"url": "https://location_of_the_image1",},{
     "pk": 2,"url": "https://location_of_the_image2",]

这些图像存储在节点 API__Image 中，然后我使用 createRemoteFileNode 在 API__Image.image 字段中创建文件的本地版本：

exports.onCreateNode = async ({
  node,actions: { createNode },store,cache,createNodeId,}) => {
  if (node.internal.type === `API__Image` && 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: id => `IMG${node.pk}`,// 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 时会返回以下错误：

Invariant Violation: Encountered an error trying to infer a GraphQL type for: "image___NODE". There is no corresponding node with the "id" field matching: "IMG286,IMG287...

我应该如何为这段代码创建正确的类型定义？我已经尝试按照 this page 的示例进行操作，但我一直收到相同的错误：

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions
  const typeDefs = `
  type API__Image implements Node {
    pk: ID!
    url: String!
    image: File @link(from: "image___NODE")

  }
`
  createTypes(typeDefs)
}

另一个有趣的问题，为什么节点内部类型被称为 API__Image，但在 http://localhost:8000/___graphql 处访问 GraphQL 时，它显示为 apiImage？定义 GraphQL 类型时应该使用 API__Image 还是 apiImage？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

gatsby gatsby-image