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

Posted 2023-03-10

【中文标题】apollo-cache-persist 在 nuxt 中使用 vue-apollo

【英文标题】：apollo-cache-persist with vue-apollo in nuxt

【发布时间】：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。

【参考方案1】：

我没有更新 nuxt.js。

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