Gatsby中Strapi Dynamic Zone内联片段查询报Unknown type错误

error Unknown type "ComponentTextArticleCopy 这个报错的本质是类型名命名规则不匹配，和inline fragment的写法合规性完全无关：

• Strapi 服务端原生的 GraphQL 类型体系中，动态区组件的命名不带任何前缀，因此在 Strapi 自带的 Playground 里写... on ComponentTextArticleCopy是可以正常运行的
• Gatsby 项目中的 GraphQL Schema 由gatsby-source-strapi插件本地生成，插件会给所有从Strapi同步的实体、组件统一加上Strapi前缀。你之前引用的不带前缀的组件类型，在Gatsby的Schema体系中不存在，因此触发了GraphQL模板字符串的校验报错。

修正inline fragment的类型名 #

把所有inline fragment的组件类型替换为带Strapi前缀的Gatsby生成类型，修改后的可运行页面查询代码如下：

export const query = graphql`
  query ArticleTemplate($id: String!) {
    strapiArticle(id: { eq: $id }) {
        articleHeader {
            articleTitle
            articleSnippet
          }
          articleContent {
            __typename
            # 替换为带Strapi前缀的组件类型
            ... on StrapiComponentTextArticleCopy {
              contentCopy
            }
            ... on StrapiComponentImageContentImg {
              imgCaption
              # 可正常读取组件内的嵌套关联字段，比如本地上传的图片资源
              img {
                localFile {
                  childImageSharp {
                    gatsbyImageData(width: 800)
                  }
                }
              }
            }
            ... on StrapiComponentTextArticleQuote {
              contentQuote
            }
          }
    }
  }
`

类型名准确校验方法 #

不同版本的gatsby-source-strapi对组件的类型名生成规则可能有细微差异，不要硬拼类型名：

• 启动Gatsby本地服务后，打开内置的GraphQL Playground（路径localhost:8000/___graphql）
• 简单查询任意文章的articleContent字段，读取返回结果里每个条目对应的__typename值，将这个值直接写到inline fragment的on后面即可

你当前能正常运行的“拉取动态区下所有组件字段、空值返回null”的写法，只是Gatsby的兼容特性带来的临时方案，并不适合长期使用：

• 仅支持组件的顶级基础字段，无法正确读取组件内的嵌套关联字段（如图片、关联内容）
• 返回结构冗余，需要额外写逻辑判断null值、匹配对应组件类型
• 失去了GraphQL inline fragment自带的类型安全校验能力，字段写错时不会在构建阶段提前报错

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