Strapi对接Gatsby时GraphQL查询Image无childImageSharp节点问题

无法获取childImageSharp的核心原因是Gatsby没有将Strapi返回的远程图片下载到本地并交给Sharp处理器处理，按照以下步骤逐一排查即可解决：

• 检查必要依赖与gatsby-config配置
  首先确认已经安装所有必要依赖：gatsby-source-strapi、gatsby-plugin-image、gatsby-plugin-sharp、gatsby-transformer-sharp、gatsby-source-filesystem
  其次在gatsby-config.js的gatsby-source-strapi配置项中必须开启downloadLocal: true，配置示例如下：

  module.exports = {
    plugins: [
      `gatsby-plugin-image`,
      `gatsby-plugin-sharp`,
      `gatsby-transformer-sharp`,
      {
        resolve: `gatsby-source-strapi`,
        options: {
          apiURL: `你的Strapi服务地址`,
          collectionTypes: [`projects`],
          // 必须开启该配置才会下载Strapi远程图片到本地供Sharp处理
          downloadLocal: true,
        },
      },
    ],
  }
  

• 核对Strapi版本与插件兼容性
  如果你使用的是Strapi v4，必须使用适配v4版本的gatsby-source-strapi，若插件版本和Strapi版本不匹配，会导致媒体字段解析异常，无法生成childImageSharp节点。
  另外注意如果你的Strapi中image字段设置为多图类型（允许上传多张图片），则查询时需要先取数组内的单个元素，再查询childImageSharp字段。
• 调整查询语句
  上述配置生效后，不需要再手动查询formats下的url，直接查询image下的childImageSharp即可，正确的查询示例如下：

  query MyQuery {
    allStrapiProjects {
      nodes {
        title
        image {
          childImageSharp {
            gatsbyImageData(width: 200)
          }
        }
      }
    }
  }
  

• 清理缓存重启服务
  配置修改后如果仍无法查询到对应字段，执行以下命令清理缓存后重启开发服务即可：

  gatsby clean && gatsby develop
  

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