Angular11 Apollo GraphQL启发式片段匹配及缺失字段警告如何解决

这个警告本质是Apollo无法正确区分media_gallery数组中不同子项的类型，加上可选字段的空值处理缺失导致的，按以下步骤配置即可解决，不需要反复调整片段匹配规则：

第一步：给内联片段所在查询补全__typename #

Apollo判断内联片段（即你写的... on ProductVideo）是否命中的唯一依据是接口返回的__typename字段，很多GraphQL接口不会默认返回这个字段，不要依赖Apollo自动注入的配置，直接在查询里显式声明：

...
media_gallery {
    __typename # 必须显式添加，缺失这行所有片段匹配配置都不会生效
    url
    label
    ... on ProductVideo {
         video_content {
          video_url
       }
    }
 } 
 ...

第二步：修正possibleTypes配置与缓存规则 #

不要手动维护possibleTypes映射，手动写很容易漏类型导致匹配失效：

• 拉取你当前服务端的完整GraphQL Schema，自动生成possibleTypes配置文件，替换你之前手动编写的配置
• 初始化Apollo Client时，在InMemoryCache中传入自动生成的possibleTypes，同时给可选字段加空值合并逻辑，示例配置：

import { InMemoryCache, ApolloClient } from '@apollo/client';
// 这里导入自动生成的possibleTypes文件
import possibleTypes from './possibleTypes.json';

const client = new ApolloClient({
  // 保留你原有的uri、请求拦截器等配置即可
  cache: new InMemoryCache({
    possibleTypes,
    addTypename: true,
    typePolicies: {
      // 替换成你服务端schema中media_gallery对应的实际类型名称
      MediaGalleryItem: {
        fields: {
          video_content: {
            // 字段不存在时直接返回null，不要触发缺失警告
            merge(_, incoming) {
              return incoming ?? null;
            }
          }
        }
      }
    }
  })
});

第三步：清缓存验证 #

旧的错误缓存会导致配置生效后依然弹出警告，打开浏览器控制台执行localStorage.clear()，硬刷新页面即可。

验证标准：查询混合了普通图片、视频的商品数据时，视频类型的media项正常返回video_content，图片类型的项无该字段，控制台无任何相关警告。

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