Gatsby使用createTypes定义File类型字段时无法生成localFile如何解决

你当前直接将Img字段声明为File类型的写法，覆盖了源插件对CMS媒体字段的自动扩展逻辑，导致空值场景下localFile字段无法正常生成，可按以下步骤修复：

步骤1：调整类型定义 #

修改gatsby-node.js中sourceNodes钩子的typeDefs配置，明确媒体字段结构，保留插件的自动处理能力：

exports.sourceNodes = ({ actions }) => {
  const { createTypes } = actions
  const typeDefs = ` 
    type StrapiPageEstimateRealizations implements Node { 
      Title: String
      Description: String
      Img: StrapiMedia
    }
    # 明确媒体类型下存在localFile字段
    type StrapiMedia implements Node {
      localFile: File
    }
  ` 
  createTypes(typeDefs) 
}

提示：如果StrapiMedia类型不生效，可以在GraphiQL的文档面板中搜索正常上传图片时Img字段的返回类型，替换为对应类型名即可，部分版本的Strapi源插件该类型名为StrapiUploadFile。

步骤2：添加空值兼容解析器 #

在gatsby-node.js中新增createResolvers钩子，处理字段为空时的返回逻辑，避免GraphQL报字段缺失错误：

exports.createResolvers = ({ createResolvers }) => {
  createResolvers({
    StrapiPageEstimateRealizations: {
      Img: {
        resolve(source) {
          // 空值时返回带localFile空值的结构，保证查询结构统一
          return source.Img || { localFile: null }
        }
      }
    }
  })
}

修改完成后重启Gatsby服务即可，后续查询时无论CMS是否上传图片，Img { localFile }都能正常返回：有图时返回正常的File节点，无图时返回null，你可以直接在组件中判断null值渲染占位图即可。

内容的提问来源于stack exchange，提问作者Patryk Kalwas