reactjs - 如何将缓存恢复到初始状态

Question

我使用 SSR 从服务器恢复初始状态的缓存

const cache = new InMemoryCache().restore(window.__APOLLO_STATE__)

经过几次突变，我需要将缓存硬重置为其初始状态。我天真地尝试将初始存储保持在组件状态并将其传递给 client.restore

componentDidMount () {
  this.setState({
    initState: this.props.client.extract()
  })
}

// When I need to reset, I'd call this method...
handleCacheReset () {
  this.props.client.restore( this.state.initState )
}

但是没有成功。由于我也在使用apollo-link-state，我想如果我将缓存数据保留为默认值，也许我可以在调用client.resetStore时写入它们

const cache = new InMemoryCache().restore(window.__APOLLO_STATE__)
const link = withClientState({ cache })
const client = new ApolloClient({
  link, cache,
  defaults: cache.data.data
})
client.onResetStore(link.writeDefaults)

// ...when it's time to reset the store
client.resetStore()

但我只收到 Missing field ... in {} 错误，并且没有数据写入存储。更糟糕的是，我无法使用 client.writeData，因为我只有初始 window.__APOLLO_STATE__。如果我可以读取整个缓存数据，那么这可能是合理的，但似乎没有 readData 方法。

有没有办法以编程方式将缓存恢复到原始状态？

到目前为止，我看到的唯一解决方法是重新创建整个 ApolloClient 并强制重新渲染树，这是昂贵且低效的。想法？

附注在 GitHub 上询问此问题，但他们没有任何答复就关闭了它。

Answer 1

这是在网络上还是在移动设备上？我自己无法解决这个问题，但在思考 apollo-cache-persist ，理论上您可以将缓存状态保存到本地存储，并在稍后将它们恢复到缓存中。