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

Posted 2023-03-10

【中文标题】如何将 @vue/apollo-composable 添加到 Quasar 框架

【英文标题】：How to add @vue/apollo-composable to Quasar Frramework

【发布时间】：2020-10-30 22:50:19

【问题描述】：

我们正在尝试向 Quasar Framwework 添加一个引导文件，以便能够将 @vue/apollo-composable 与 Vue 组合 API 一起使用。 This tutorial 解释了旧版 apollo 客户端是如何完成的，this one 解释了新版本是如何完成的。

我们遇到的问题是将 Apollo 客户端连接到 Vue。所以我们需要把example from the docs翻译成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 客户端的正确语法是什么？

【参考方案1】：

试试这个：

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

【参考方案2】：

在this answer中找到正确的语法：

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 
  
)

【讨论】：

最好使用app.mixins = (app.mixins || []).concat( setup() ... ); 而不是app.setup = () => ... ，这样您就不会在调用setup 方法的其他引导文件中破坏安装链。

【参考方案3】：

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