javascript - 如何将 @vue/apollo-composable 添加到 Quasar 框架
问题描述
我们正在尝试向 Quasar Framwework 添加一个引导文件,以便能够@vue/apollo-composable
与 Vue 组合 API 一起使用。本教程解释了旧的 apollo 客户端是如何完成的,而这个是新版本的。
我们遇到的问题是将 Apollo 客户端连接到 Vue。所以我们需要将文档中的示例转换为 Quasar 启动文件:
// example docs
import { provide } from '@vue/composition-api'
import { DefaultApolloClient } from '@vue/apollo-composable'
const app = new Vue({
setup () {
provide(DefaultApolloClient, apolloClient)
},
render: h => h(App),
})
Quasar 启动文件:
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloClient } from 'apollo-client'
import { DefaultApolloClient } from '@vue/apollo-composable'
import { provide } from '@vue/composition-api'
const httpLink = createHttpLink({
uri: 'http://localhost:4000/graphql',
})
const cache = new InMemoryCache()
const apolloClient = new ApolloClient({
link: httpLink,
cache
});
export default async ({ app } /* { app, router, Vue ... } */) => {
app.setup(provide(DefaultApolloClient, apolloClient))
}
问题:
在 Quasar Framework 启动文件中添加 Apollo 客户端的正确语法是什么?
解决方案
在这个答案中找到了正确的语法:
import { boot } from 'quasar/wrappers'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloClient } from 'apollo-client'
import { DefaultApolloClient } from '@vue/apollo-composable'
import { provide } from '@vue/composition-api'
import config from 'src/app-config.json'
export default boot(({ app }) => {
const httpLink = createHttpLink({
uri: config.resources.gatewayApi.uri,
})
const cache = new InMemoryCache()
const apolloClient = new ApolloClient({
link: httpLink,
cache,
})
app.setup = () => {
provide(DefaultApolloClient, apolloClient)
return {}
}
})
推荐阅读
- node.js - 是否有在浏览器中运行的 git 客户端?
- android-studio - 吸管工具在 android studio 中不可点击
- css - 如何去除离子输入中有焦点线?
- java - java中的基本数据格式转换
- javascript - 单击“保存”时状态未更新
- python - 如何在`pandas`中合并部分多索引
- go - 致命错误:所有 goroutine 都处于休眠状态 - 死锁!当使用带有 for-select 循环的 WaitGroup 时
- postgresql - Postgresql:禁用特定用户(root)的远程连接?
- c# - C# 错误:CS0103 当前上下文中不存在名称“”
- webstorm - 如果输入来自 WebStorm 中的 Web,如何在控制台中查看输出