[英]How to add @vue/apollo-composable to Quasar Frramework
我們正在嘗試向 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 {}
}
})
我將@DarkLite1 的代碼翻譯為與 TypeScript 兼容。 所以下面是文件src/boot/vue-apollo-4.ts
(不要忘記在quasar.conf.js
中注冊它):
<pre>
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 { boot } from 'quasar/wrappers'
const httpLink = createHttpLink({
uri: 'http://localhost:8080/v1/graphql'
})
const cache = new InMemoryCache()
const apolloClient = new ApolloClient({
link: httpLink,
cache
})
export default boot(({ app }) => {
app.setup = () => {
provide(DefaultApolloClient, apolloClient)
return {}
}
})
</pre>
嘗試使用這個:
export default ({ app, Vue }) => {
Vue.use(VueApollo)
app.apolloProvider = apolloProvider
}
此app.setup = () => { provide(DefaultApolloClient, apolloClient) }
不適用於 quasar 2.3.2。 我無法想象它是如何與早期版本一起工作的。 我必須使用的不是“app.setup”,而是“app._component.setup”。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.