React+Apollo Client报错：cache.writeData is not a function 求助

你遇到的错误是因为Apollo Client 3.x及以上版本已移除InMemoryCache的writeData方法，旧版本的该API在新版本中被更精确的缓存操作方法替代。

以下是两种可行的解决办法：

方法一：使用writeQuery写入缓存 #

先定义匹配客户端状态的查询，再通过writeQuery写入初始数据：

import logo from './logo.svg';
import './App.css';
import Pages from './pages';
import GlobalStyles from './components/GlobalStyles';

import { ApolloClient, ApolloProvider, createHttpLink, InMemoryCache, gql } from '@apollo/client';
import { setContext } from 'apollo-link-context';

const uri = process.env.REACT_APP_BASE_URL;
const httpLink = createHttpLink({ uri });
const authLink = setContext((_, { headers }) => {
    return {
        headers: {
            ...headers,
            authorization: localStorage.getItem('token') || ''
        }
    }
})
const cache = new InMemoryCache();

// 定义匹配客户端状态的查询
const IS_LOGGED_IN = gql`
  query IsLoggedIn {
    isLoggedIn @client
  }
`;

// 配置Apollo Client
const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache,
    resolvers: {},
    connectToDevTools: true
})

// 用writeQuery替代原writeData写入缓存
cache.writeQuery({
  query: IS_LOGGED_IN,
  data: { isLoggedIn: !!localStorage.getItem('token') }
});

function App() {
    return (
        <ApolloProvider client={client}>
            <GlobalStyles/>
            <Pages/>
        </ApolloProvider>
    );
}

export default App;

方法二：初始化缓存时设置默认值 #

如果仅需在应用启动时设置初始状态，可直接在创建InMemoryCache时配置defaults：

import logo from './logo.svg';
import './App.css';
import Pages from './pages';
import GlobalStyles from './components/GlobalStyles';

import { ApolloClient, ApolloProvider, createHttpLink, InMemoryCache } from '@apollo/client';
import { setContext } from 'apollo-link-context';

const uri = process.env.REACT_APP_BASE_URL;
const httpLink = createHttpLink({ uri });
const authLink = setContext((_, { headers }) => {
    return {
        headers: {
            ...headers,
            authorization: localStorage.getItem('token') || ''
        }
    }
})

// 初始化缓存时直接设置默认登录状态
const cache = new InMemoryCache({
  defaults: {
    isLoggedIn: !!localStorage.getItem('token')
  }
});

// 配置Apollo Client
const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache,
    resolvers: {},
    connectToDevTools: true
})

function App() {
    return (
        <ApolloProvider client={client}>
            <GlobalStyles/>
            <Pages/>
        </ApolloProvider>
    );
}

export default App;

注意事项 #

• 若使用带@client指令的客户端状态查询，需确保resolvers配置正确（如需后续动态修改状态）。
• 两种方法均可实现初始化登录状态缓存的需求：需动态更新状态选writeQuery更灵活；仅需初始值则defaults更简洁。

内容的提问来源于stack exchange，提问作者github.arief