如何在外部React.js组件库中使用Apollo/GraphQL钩子？

你遇到的报错核心是组件库和业务项目加载了两份独立的@apollo/client实例：Apollo的上下文是和自身实例绑定的，业务项目中<ApolloProvider>提供的是业务侧实例的上下文，而组件库内的Apollo钩子读取的是组件库打包时内置的@apollo/client实例的上下文，自然无法匹配到client。

按优先级从高到低排列：

• 方案1：调整组件库依赖与打包配置（长期最优解）
  1. 在组件库的package.json中，将@apollo/client从dependencies移到peerDependencies，声明组件库依赖上层业务项目提供的@apollo/client实例，示例配置：

  {
    "peerDependencies": {
      "@apollo/client": "^3.0.0",
      "react": "^17.0.0 || ^18.0.0"
    }
  }
  

  2. 调整组件库打包工具（Rollup/Vite/Webpack均可）配置，将@apollo/client、react、react-dom这类公共依赖标记为外部依赖，不打包进组件库最终产物。以Rollup为例，配置如下：

  // rollup.config.js
  export default {
    // 其余配置省略
    external: ['react', 'react-dom', '@apollo/client']
  }
  

• 方案2：组件层面兼容兜底
  对组件库内部用到Apollo钩子的组件，新增可选的client属性作为兜底，调用钩子时优先使用传入的client，适合临时快速修复或者需要兼容特殊业务场景的情况：

  import { useQuery } from '@apollo/client'
  
  const Form = ({ client, ...restProps }) => {
    const { data } = useQuery(QUERY, {
      // 优先使用传入的client，无传入则默认读取上下文
      client,
      // 其余查询配置
    })
    // 组件其余逻辑
  }
  

• 方案3：对齐依赖版本
  检查三个业务项目和组件库使用的@apollo/client主版本号是否一致，大版本差异过大也可能导致上下文不兼容，保持大版本一致即可解决该类问题。

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