如何将 @vue/apollo-composable 添加到 Quasar 框架

Question

我们正在尝试向 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 客户端的正确语法是什么？

Answer 1

在这个答案中找到了正确的语法：

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 {}
  }
})

Answer 2

我将@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>

Answer 3

尝试使用这个：

export default ({ app, Vue }) => {
  Vue.use(VueApollo)
  app.apolloProvider = apolloProvider
}

Answer 4

此app.setup = () => { provide(DefaultApolloClient, apolloClient) }不适用于 quasar 2.3.2。 我无法想象它是如何与早期版本一起工作的。 我必须使用的不是“app.setup”，而是“app._component.setup”。