Question

我正在尝试使用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。

Answer 1

我不是nuxt.js的最新消息。

请看vue-apollo作者的vue-cli-plugin-ssr。它正在通过将main.js与new Vue(...)包装在一起，并使用beforeApp和afterApp异步回调对export async function createApp进行修改，以恢复服务器发送的缓存。您可能只是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

nuxt中具有vue-apollo的apollo-cache-persist

1 个答案: