How to add @vue/apollo-composable to Quasar Frramework

Question

We're trying to add a boot file to Quasar Framwework to be able to use @vue/apollo-composable with the Vue composition API. This tutorial explains how that is done for the old apollo-client and this one for the new version.

The issue we're having is to connect the Apollo client to Vue. So we need to translate the example from the docs to a Quasar boot file:

// 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),
})

The Quasar boot file:

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

The issue:

What is the correct syntax to use in the Quasar Framework boot file to add the Apollo client?

Answer 1

Found the correct syntax in 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 {}
  }
})