使用ApolloBoost的React GraphQL客户端出现Invariant Violation错误求助

1. 先解决process未定义的ReferenceError #

这个错误是前端构建环境未注入process变量导致的，和Apollo依赖的Node环境变量读取逻辑相关：

• 若使用Create React App（CRA）：确保所有环境变量以REACT_APP_为前缀（比如REACT_APP_GRAPHQL_URI），CRA会自动注入这类变量；
• 若使用自定义Webpack配置：在webpack.config.js中添加DefinePlugin注入process.env：

  const webpack = require('webpack');
  module.exports = {
    // 其他配置项
    plugins: [
      new webpack.DefinePlugin({
        'process.env': JSON.stringify(process.env)
      })
    ]
  };
  

• 注意apollo-boost@0.4.3内部依赖会读取Node环境变量，需确保构建工具正确处理变量注入。

2. 排查Apollo Client上下文注入问题（对应Invariant Violation错误） #

错误代码47的核心是useQuery/useMutation无法找到Apollo Client上下文，即使已使用ApolloProvider，仍可能存在以下问题：

• 检查ApolloProvider包裹范围：确保所有使用Apollo钩子的组件都在Provider内部，比如避免在路由组件外层才包裹Provider，导致路由内组件无法获取上下文；
• 验证Client实例创建是否正常：确保初始化时传入正确的uri，且未因process错误导致初始化失败，可打印实例确认：

  import ApolloClient from 'apollo-boost';
  const client = new ApolloClient({
    uri: process.env.REACT_APP_GRAPHQL_URI || 'http://localhost:4000/graphql'
  });
  console.log('Apollo Client:', client); // 确认实例无异常
  

• 修复依赖版本冲突：@apollo/react-hooks@4.0.0基于Apollo Client 3.x，而apollo-boost@0.4.3是Apollo Client 2.x的封装包，两者不兼容。建议替换为3.x核心包：

  npm uninstall apollo-boost @apollo/react-hooks
  npm install @apollo/client graphql
  

  重构Client实例代码：

  import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
  const client = new ApolloClient({
    uri: 'http://localhost:4000/graphql',
    cache: new InMemoryCache()
  });
  

3. 检查组件内钩子使用规范 #

• 确保useQuery/useMutation在函数组件顶层调用，禁止在条件判断、循环或嵌套函数中使用（违反React Hooks规则，会导致上下文获取失败）；
• 避免重复导入不同版本的Apollo Hooks，比如同时导入@apollo/react-hooks和@apollo/client中的钩子，会造成上下文不匹配。

4. 清理缓存并重建 #

• 清除依赖和构建缓存：

  rm -rf node_modules package-lock.json
  npm install
  npm run start # 或npm run build
  

• 用Chrome无痕模式打开页面，避免旧缓存代码干扰。

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