Vue.js 如何在Vuepress站点中使用vue apollo？

在Vuepress博客站点中，我在我的markdown博客文章中插入了一个组件，该组件从数据库获取信息以填充其数据

我有一个GraphQL服务器来提供数据，所以我尝试使用它在我的组件中获取数据

我试图在

enhanceApp.js

文件中添加vue apollo，如下所示：

//enhanceApp.js
从“apollo客户端”导入{apollo客户端}；
从“阿波罗链接http”导入{HttpLink}；
从'apollo cache inmemory'导入{InMemoryCache}；
从“vue apollo”导入VueAppollo；
//HTTP连接到API
const httpLink=新的httpLink({
//您应该在此处使用绝对URL
uri:'http://localhost:3000/graphql',
});
//缓存实现
常量缓存=新的InMemoryCache（）；
//创建apollo客户端
const Apollo客户端=新Apollo客户端({
链接：httpLink，
隐藏物
});
const apolloProvider=新的VueAppollo({
defaultClient:Apollo客户端，
});
导出默认值（{Vue，options}）=>{
Vue.use（VueAppollo）；
选项={
…选项，
阿波罗供应商，
};
};

在我的组件文件中：

//component.vue
导出默认值{
阿波罗：{
建筑师：{
查询：gql`{
建筑师{
节点{
名称
}
}
}
`,
},
},
};

但是Vue组件中的my

$apolloData

为空，并且永远不会执行查询

我认为这与此有关，所以我尝试将查询放入

mounted（）

hook：

//component.vue
导出默认值{
安装的（）{
这是阿波罗
.查询({
查询：gql`{
建筑师{
节点{
名称
}
}
}
`,
})
。然后（结果=>{
...;
})
}

这将返回一个错误：

vue.runtime.esm.js？2b0e:619[vue warn]：挂载的钩子中出现错误：“TypeError:无法读取未定义的属性'defaultClient'”

这让我觉得

enhanceApp.js

中的设置可能无法正常工作

我仔细研究了一下，但它似乎不适合我，因为我的GraphQL请求通常不依赖于路由

我发现的一种解决方法是使用axios或ApolloClient直接导入到我的组件文件中：

//component.vue
从“graphql标签”导入gql；
从“apollo boost”导入apollo客户端；
const Apollo客户端=新Apollo客户端({
//您应该在此处使用绝对URL
uri:'http://localhost:3000/graphql',
});
导出默认值{
安装的（）{
阿波罗客户
.查询({
查询：gql`{
建筑师{
节点{
名称
}
}
}
`,
})
。然后（结果=>{
...;
})
}

我想这可能行得通，但我想知道vue apollo是否真的不适用于我的情况

有什么提示吗

---

谢谢！！

您可以使用

窗口。\uuuuu APOLLO\u CLIENT\uuuuu

将您的APOLLO配置放在vuepress的vue组件中。

我和您一样，我可以这样做： 在enhanceApp.js中，将客户端更改为

import { ApolloClient } from 'apollo-boost';

现在，在您的组件中使用以下内容：

export default {
   data() {
      return {
      allData:[],
    };
   },
apollo:{
  allData:{
    query: SUB_QUERY
  }
 },
methods: {
async geData (){
  const data = await this.$apollo.query(
        {query: SUB_QUERY},
        );
       }
      },
 mounted(){
   this.getData();
   apolloClient.query({
    query: SUB_QUERY
  })
 }
};