React 16项目升级Apollo 2遇问题，Apollo 1代码可正常运行

我帮你梳理下从Apollo 1升级到Apollo 2时可能踩的坑，以及对应你的index.js代码的修正方案——毕竟Apollo 2做了不少架构调整，表面相似的代码其实藏着不少API变化：

首先看你代码里的核心问题 #

• apollo-cache-redux已被废弃：Apollo 2官方已经不再维护这个包，ReduxCache和apolloReducer都已经被移除。现在官方默认推荐使用InMemoryCache，如果需要和Redux集成，得换用其他方案。
• 客户端初始化流程变更：Apollo 2初始化ApolloClient的方式和Apollo 1有差异，需要确保正确组合链接（Link）和缓存（Cache）。

修正后的index.js示例代码 #

import React from "react"
import ReactDOM from "react-dom"
// 注意包路径变化，Apollo 2之后推荐统一使用@apollo/client
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { HttpLink } from 'apollo-link-http';
// ApolloProvider可以从@apollo/client/react导入，或者保留从react-apollo导入也兼容
import { ApolloProvider } from '@apollo/client/react';
import Routes from "./router/routes"
import getStore from "./store"
import registerServiceWorker from './registerServiceWorker';

// 配置GraphQL服务端点
const httpLink = new HttpLink({
  uri: '/graphql', // 替换成你的实际GraphQL接口地址
});

// 初始化Apollo客户端，用InMemoryCache替代原有的ReduxCache
const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
});

// 渲染应用：如果你的项目用Redux，记得嵌套Redux的Provider
ReactDOM.render(
  <ApolloProvider client={client}>
    {/* <Provider store={getStore()}> */}
      <Routes />
    {/* </Provider> */}
  </ApolloProvider>,
  document.getElementById('root')
);

registerServiceWorker();

额外的升级注意事项 #

• 更新依赖包：先卸载旧的Apollo相关包，再安装最新版：

  npm uninstall apollo-client apollo-link-http apollo-cache-redux react-apollo
  npm install @apollo/client graphql
  

• 组件代码适配：Apollo 2里的Query、Mutation组件的props结构和Apollo 1有细微差别，比如data属性的嵌套层级、fetchPolicy的默认值，需要检查你的业务组件是否兼容。
• Redux集成替代方案：如果你必须和Redux共享状态，可以把Apollo客户端实例存入Redux store，或者使用第三方中间件同步缓存状态（不过更推荐优先使用Apollo自身的缓存管理能力）。

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