如何使用@apollo/client未对外导出的isField类型守卫方法

下面是3种可行的实现方案，按推荐优先级排序：

方案1：自行实现类型守卫（最推荐） #

isField逻辑非常简单，没有额外依赖，直接在你的项目中拷贝实现即可，完全避免修改依赖、兼容问题：

// 纯JS版本
export function isField(selection) {
    return selection.kind === 'Field';
}

如果是TS项目可以补充类型标注：

import type { SelectionNode, FieldNode } from 'graphql';

export function isField(selection: SelectionNode): selection is FieldNode {
    return selection.kind === 'Field';
}

方案2：直接引入源文件并解决格式报错 #

你遇到的报错本质是Node运行时用CommonJS规则加载了@apollo/client内部未转译的ESM格式文件，无法识别import语法，可根据你的项目类型调整：

• 如果是用webpack/vite等打包工具的项目，修改打包配置，将该文件加入转译范围即可，以webpack为例：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: (file) => {
          // 仅不对目标storeUtils文件做node_modules排除
          if (file.includes('@apollo/client/utilities/graphql/storeUtils.js')) return false;
          return /node_modules/.test(file);
        },
        use: ['babel-loader']
      }
    ]
  }
}

• 如果是无打包工具的纯Node.js项目，用ESM动态导入语法加载即可：

// 需在async函数内调用
const { isField } = await import('@apollo/client/utilities/graphql/storeUtils.js');

方案3：修改源包导出（兼容性较差） #

通过patch-package给依赖打补丁，将isField加入对外导出：

1. 安装工具：npm install patch-package --save-dev
2. 手动修改node_modules/@apollo/client/utilities/graphql/storeUtils.js，在导出列表中加入isField
3. 执行npx patch-package @apollo/client生成补丁文件
4. 在package.json的scripts中新增"postinstall": "patch-package"，后续安装依赖时会自动应用补丁

注意：升级@apollo/client版本后需要重新生成补丁，否则可能失效。

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