3

我gatsby-transformer-json用来在 Gatsby 中查询 JSON 文件。JSON 文件中有图像 URL，但它们是绝对文件路径，Gatsby 仅将相对路径转换为图像节点。

我的 JSON：

{
  "defaultImage": "images/defaultImage.jpg"
}

我的查询：

metadataJson {
  defaultImage {
    childImagageSharp {
      fixed(width: 3200, height: 2133) {
        ...GatsbyImageSharpFixed
      }
    }
  }
}

但是，由于 Gatsby 遇到的是绝对路径并且因为它不是相对路径，所以这会失败并出现错误，因此它不会将其转换为 Sharp 图像节点。

如果它是 Markdown 文件，我可以自己转换路径并将其保存到 Markdown 节点的fields对象。但是，我无法使用gatsby-transformer-json.

如何转换 JSON 文件中的绝对路径，以便 Gatsby 将路径替换为 Sharp 图像节点？

4

1 回答 1

2

您可以createNodeField在任何类型的节点上使用，而不仅仅是 markdown 备注。

如果您设置gatsby-config.js如下：

{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/content/meta`, <-- folder name is used to create node type name, i.e `MetaJson`
    name: `meta`, <-- doesn't affect json node's type name
  },
},
`gatsby-transformer-json`,

gatsby-node.js然后，您可以像使用 MarkdownRemark 节点一样转换它们。

exports.onCreateNode = ({ node, actions }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MetaJson`) {
    const relativePath = ...

    createNodeField({
      node,
      name: `foo`,
      value: relativePath,
    })
  }
}

您还可以传入其他选项gatsby-transformer-json以对 json 节点的内部类型名称进行更精细的控制。

就像gatsby-transformer-remarkMarkdown 转换的一样，jsons 转换gatsby-transformer-json也附加一个子节点到它的父 File 节点上：

{
  file( sourceInstanceName: { eq: "meta" } ) {
    dir
    childMetaJson {
      fields {
        foo
      }
    }
  }
}
于 2019-02-12T19:50:15.937 回答