是什么导致 GraphQL/Gatsby 中的 ["String" has no subfields] 图像错误？答案

【问题标题】：What causes the ["String" has no subfields] image error in GraphQL/Gatsby?是什么导致 GraphQL/Gatsby 中的 ["String" has no subfields] 图像错误？
【发布时间】：2019-09-08 05:53:06
【问题描述】：

终端上的整个错误信息是：

error GraphQL Error Field "image" must not have a selection since type "String" has no subfields.

这似乎是一个真正的错误，它出现在这里：

gatsby issue 4123 gatsby issue 11412 gatsby issue 11534 gatsby issue 2050 gatsby issue 3531 gatsby remark plugin issue 2 netlify-cms issue 325

以及几个 Stackoverflow 问题/答案。

但是答案/修复无处不在。有些人拼错了他们的文件或订购了错误的插件（我认为）。其他时候，该人需要在 gatsby-node.js 中的 exports.onCreateNode 内进行大的重写。其他时候，修复方法是重新克隆你的 repo 并再次运行 npm install。

无论如何，我已经尝试过对所有事物的感觉。似乎有数十或数百人在尝试开始使用 Gatsby 时会遇到此错误。他们应该检查什么？他们应该从哪里着手解决这个问题？似乎有 7 件潜在的事情需要检查...

【问题讨论】：

标签： graphql gatsby

【解决方案1】：

遇到此错误时添加到清单中：

确保您在 gatsby-conf.js 中配置的文件夹中确实有图像：

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/images`,
  },
}

并且它们匹配您的 graphql 中的任何路径。如果您的查询返回“myImage.png”，但它不是图像中的文件，您将收到此错误。

【讨论】：

【解决方案2】：

此错误似乎是由多种原因引起的。就我而言，这是 gatsby-config.js 中的顺序。我不得不将 gatsby-plugin-sharp、gatsby-transformer-sharp 和 gatsby-transformer-remark 移到我的文件系统插件上方。

对于许多其他人（如果您搜索我提到的那些问题）：

检查拼写
检查你有正确的插件（句号）
检查插件顺序
使用 graphiql 查看您是否获得了图像字符串与实际节点（您可以在节点上使用转换器，但不能在字符串上使用）
删除 .cache 和 node 模块并重新安装

祝你好运，你将永远无法恢复这 12 个小时的生活。

【讨论】：

在我的情况下，这个代码是 gatsby-node.js exports.onCreateNode = ({ node, actions, getNode }) => { const { createNodeField } = actions fmImagesToRelative(node) // convert image paths for gatsby images if (node.internal.type === MarkdownRemark) { const value = createFilePath({ node, getNode }) createNodeField({ name: slug, node, value, }) } } 在添加该代码后没有更多错误字段“图像”必须没有选择以来“字符串”类型没有子字段。
@ZeeshanSafdar 非常感谢！但我要注意，我们应该首先安装gatsby-remark-relative-images。