Vue.js 使用阿波罗&；GraphQL缓存而不是Vuex？

我一直在用Apollo和GraphQL做实验。我已经读到，你可以使用缓存，而不需要Vuex，但我无法思考如何使用缓存，除非创建某种将两者结合起来的反模式

有没有人能举例说明他们是如何处理这种情况的

我在尝试什么：

使用Vue Apollo的CLI安装：

vue add apollo

在/vue apollo.js中设置配置后，我向提供程序添加了导出和默认选项：

export const defaultOptions={
//…所有默认设置
}
导出函数createProvider（选项={}）{
//创建apollo客户端
const{apolloClient，wsClient}=createApolloClient({
…默认选项，
…选项，
})
apolloClient.wsClient=wsClient
//创建vue apollo提供程序
const apolloProvider=新的VueAppollo({
defaultClient:Apollo客户端，
默认选项：{
$query:{
//fetchPolicy:“缓存和网络”，
},
},
errorHandler（错误）{
//eslint禁用下一行无控制台
console.log（“%cError”，“背景：红色；颜色：白色；填充：2px4px；边框半径：3px；字体重量：粗体；”，错误消息）
},
})
返回提供程序
}

在/router/index.js中 导入apollo提供程序、选项和查询

从“../vue apollo”导入{createProvider，defaultOptions}
从“graphql标记”导入gql
从“@/querys/home content.gql”导入homeQuery
从“@/querys/page query.gql”导入页面查询
const client=createProvider（defaultOptions）.defaultClient

查询页面的功能

const loadPage=（到、从、下一个）=>{
返回client.query({
查询：pageQuery，
变量：{
slug:to.params.slug
}
})
.then（异步（{data}）=>{
常量{pages}=数据
if（！from.name）store.commit（'App/setLoadedToTrue'）//为应用程序的第一次/初始加载添加加载器
如果（pages.length>0）{
常量addPageOtation=gql`
突变（$id:id！）{
addPage（id:$id）@client
}
`
等待客户({
突变：基因突变，
变量：{id:pages[0].id}
})
下一个（）
}
else next（“/”）
})
.catch（错误=>{
console.log（错误）
下一个（“/”）
})
}

查询主页内容的功能

const loadHomeData=（到、从、下一个）=>{
const hasHomeContent=client.cache.data.data['HomePage:1']
if（hasHomeContent）next（）
否则{
query（{query:homeQuery}）
。然后（异步（）=>{
如果（！from.name）store.commit（'App/setLoadedToTrue'）
下一个（）
})
.catch（错误=>{
console.log（错误）
下一步（“/error”）
})
}
}

在每个之前：

router.beforeach（（to，from，next）=>{
如果（！to.hash）NProgress.start（）
如果（to.name==“home”）返回loadHomeData（到、从、下一个）
如果（to.name=='page'）返回loadPage（to、from、next）
下一个（）
})

我的突变和解析程序

export const storePage=gql`
打字页{
id:id！，
标题：字符串！，
标题_亮点：字符串！，
图片：上传文件，
摘要：字符串，
内容块：[ComponentPageContentBlockPageBlock]
}
类型突变{
addPageObstation（id:id！）：第页
}
`
export const storeHomePage=gql`
类型主页{
id:id！，
bg_单词：字符串，
标题：字符串！，
亮点：字符串，
正文：字符串，
服务：[组件HomeContentServices]，
配置文件：[组件配置文件配置文件]，
}
类型突变{
addhomepage：主页
}
`
常量解析程序={
突变：{
addCaseStudyMutation:（ux，ctx，{cache}）=>{
const data=cache.readQuery（{query:storeCaseStudy}）
cache.writeQuery（{query:storeCaseStudy，data}）
返回数据
},
AddHomePageObstation:（x，ctx，{cache}）=>{
const data=cache.readQuery（{query:storeHomePage}）
cache.writeQuery（{query:storeHomePage，data}）
返回数据
}
}
}

问题

目前，每个调用都有两个查询文件，一个用于远程，一个用于本地，其中有@client用于查询。是否可以有一个查询文件，但根据数据是否存在将其设置为有条件的

@client

我们必须返回带有突变的readQuery吗？或者我可以只使用

addHomePageMutation:（\ux，ctx，{cache}）=>cache.writeQuery（{query:storeHomepage}）

我们需要在变异之前阅读查询吗？我们是否需要将数据传递给writeQuery方法

最令人困惑的是，我对存储主页数据而不传递变量或修改查询感到困惑。最后，我只是把它恢复为只使用“查询”，没有变异，但没有删除解析器。尽管如此，它仍然可以工作，根据解析器，数据被缓存为HomePage:id，并且每次返回时，HomePage都会引用缓存。这是怎么发生的

这个代码有什么地方我做错了吗

---

vue-为什么不在组件中使用查询。。。像平常一样[反应]？使用路由器看起来像个笑话。。。不可组合。。。某些子组件如何查询反模式的数据

目前，每个调用都有两个查询文件，一个用于远程，一个用于本地，其中有@client用于查询。是否可以有一个查询文件，但根据数据是否存在将其设为@client条件

@客户端可以用作远程查询结果的一部分（字段）

我们必须返回带有突变的readQuery吗？或者我可以只使用addHomePageObstation:（\ux，ctx，{cache}）=>cache.writeQuery（{query:storeHomePageObstation}）

突变h