在nuxt中使用vue-apollo

Question

我正在尝试使用apollo-cache-persist，但是我被文档：https://github.com/apollographql/apollo-cache-persist/blob/master/README.md#web弄糊涂了。

这是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()抛出了一个错误，我不明白如果没有异步它怎么工作。我猜我需要把它放在一个插件中，但我也不太确定该怎么做。

有关阿波罗客户端配置的更多信息，请参阅另一个问题：@client Apollo GQL tag breaks query。

Answer 1

我在nuxt.js上不是最新的。

看看vue-apollo作者的vue-cli-plugin-ssr吧。它正在修改main.js，通过用export async function createApp包装new Vue(...)和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