Gatsby中GraphQL无法识别JSON新增img字段查询报错

这个报错是Gatsby GraphQL类型推断缓存机制导致的。
Gatsby首次启动开发服务/执行构建时，会根据读取到的源文件结构自动生成GraphQL Schema类型定义。你最初加载settings.json时，logo对象下仅存在text字段，Gatsby就自动生成了仅包含text字段的Logo类型。后续你在logo下新增img字段时，Gatsby不会主动更新已经生成的旧类型定义，因此查询时无法识别新增字段，抛出字段不存在的错误。

• 第一步：终止当前正在运行的gatsby develop进程，在项目根目录执行缓存清理命令：

gatsby clean

该命令会自动删除.cache缓存目录和public构建产物目录，清除之前生成的旧Schema、临时缓存数据。

• 第二步：检查修改后的settings.json语法合法性，确认img字段确实位于logo对象层级下，不存在JSON语法错误、字段层级写错的问题。你当前贴出的修改后内容语法是正确的，不需要额外调整。
• 第三步：重新执行gatsby develop启动开发服务，Gatsby会重新全量读取源文件，生成包含img字段的新版Logo类型Schema。
• 第四步：服务启动完成后，回到GraphQL Playground重新执行之前的查询语句，即可正常获取img字段的值。

• 后续如果需要在settings.json中新增其他字段，出现同类字段不存在的报错时，优先执行gatsby clean清理缓存再重启服务即可解决。
• 如果清理缓存后仍然无法识别字段，先检查gatsby-config.js中gatsby-source-filesystem插件的配置，确认存放settings.json的目录已经被纳入文件源读取范围，确保Gatsby能正确加载到修改后的配置文件。
• 如果以上操作都无效，说明你使用的社区主题通过createSchemaCustomizationAPI显式定义了固定的Logo类型，没有预留自定义字段。这时候可以在项目根目录的gatsby-node.js文件中添加如下代码扩展类型定义：

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions
  const typeDefs = `
    type Logo {
      text: String
      img: String
    }
  `
  createTypes(typeDefs)
}

添加完成后再次执行gatsby clean并重启服务，即可正常查询img字段。

内容的提问来源于stack exchange，提问作者Christian Leyva