apollo-cache-persist 在 nuxt 中使用 vue-apollo答案

【问题标题】：apollo-cache-persist with vue-apollo in nuxtapollo-cache-persist 在 nuxt 中使用 vue-apollo
【发布时间】：2020-01-06 21:42:12
【问题描述】：

我正在尝试使用apollo-cache-persist，但我对文档感到困惑：https://github.com/apollographql/apollo-cache-persist/blob/master/README.md#web。

这是网页初始化代码：

import { InMemoryCache } from 'apollo-cache-inmemory';
import { persistCache } from 'apollo-cache-persist';

const cache = new InMemoryCache({...});

// await before instantiating ApolloClient, else queries might run before the cache is persisted
await persistCache({
  cache,
  storage: window.localStorage,
});

await persistCache() 抛出一个错误，我不明白如果没有异步它会如何工作。我猜我需要把它放在一个插件中，但我也不太清楚该怎么做。

有关 Apollo 客户端配置的更多信息，请参阅其他问题：@client Apollo GQL tag breaks query。

【问题讨论】：

标签： caching async-await nuxt.js apollo-client vue-apollo

【解决方案1】：

我没有更新 nuxt.js。

看vue-apollo作者的vue-cli-plugin-ssr。它正在修改main.js，将new Vue(...) 与export async function createApp 与beforeApp、afterApp 异步回调一起包装，以恢复服务器发送的缓存。您可以只使用vue add @akryum/ssr，并且在考虑了合并客户端和服务器缓存的正确方法之后，您会找到一个将异步挂钩放入entry-client.js 的地方...

或者你可以做一些更简单的事情：

// vue-apollo.js
import { persistCache } from 'apollo-cache-persist'
export async function willCreateProvider() {
  await persistCache({ cache, storage: window.localStorage })
}

export function createProvider(options = {}) { }

// main.js
import { createProvider, willCreateProvider } from './vue-apollo'
willCreateProvider().then(() => {
  new Vue({
    router,
    apolloProvider: createProvider(),
    render: h => h(App),
  }).$mount('#app')
})

apollo-cache-persist-dev@^0.2.0中也有persistCacheSync

【讨论】：