Using GraphQL and Apollo With The Latest Quasar

[Drum]

Hi,

I have been developing a Vue app which uses GraphQL and the Apollo client. I managed to integrate this with the previous version of Quasar without too much difficulty, wiring it all together in /main.js

I have just started trying to upgrade to the latest version of quasar and I have to admit that I’m at a bit of a loss as to how to approach this. I understand that a lot of stuff now takes place in quasar.conf.js and using plugins, but I have no clear idea how to implement the Apollo client side of things. In the previous version the relevant part of main.js looked like this:

Vue.use(VueApollo)

const networkInterface = createHttpLink({
uri: ‘http://localhost:4000/graphql/’
})

const wsClient = new SubscriptionClient(‘ws://localhost:4000/subscriptions’, {
reconnect: true
})

const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
networkInterface,
wsClient
)

const apolloClient = new ApolloClient({
link: networkInterfaceWithSubscriptions,
cache: new InMemoryCache(),
connectToDevTools: true
})

// const state = apolloClient.extract()

let loading = 0

const apolloProvider = new VueApollo({
clients: {
a: apolloClient
},
defaultClient: apolloClient,
defaultOptions: {
$loadingKey: loading
},
watchLoading (state, mod) {
loading += mod
// console.log('Global Loading ', loading, mod)
},
errorHandler (error) {
console.log('Global Error Handler ', error)
}
})

/* eslint-disable no-new */
new Vue({
el: ‘#q-app’,
provide: apolloProvider.provide(),
render: h => h(require(’./App’).default)
})

I’m guessing that I have to create a plugin file now to do all this and then specify it in quasar.conf.js, but I don’t really know where to start. Has anybody else done this? Can you point me to a working example?

Sorry if this question is a bit basic. Any help or tips would be gratefully received.

Thanks

[cheebhodh]

Quasar + Feathersjs + Apollo GraphQL is Awesome

[maralefer]

@drum I create a plugin with quasar new plugin apolloclient, its looks like this:

// import something here
import { ApolloClient } from ‘apollo-client’
import { HttpLink } from ‘apollo-link-http’
import { InMemoryCache } from ‘apollo-cache-inmemory’
import VueApollo from ‘vue-apollo’

// leave the export, even if you don’t use it
export default ({ app, router, Vue }) => {
const httpLink = new HttpLink({
uri: ‘https://graphene.miserver.com.ar/grap2’
// ‘https://us-west-2.api.scaphold.io/graphql/dsvet’
})
const apolloClient = new ApolloClient({
link: httpLink,
cache: new InMemoryCache(),
connectToDevTools: true
})
Vue.use(VueApollo)
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
defaultOptions: {
$loadingKey: ‘loading’
}
})

app.provide = apolloProvider.provide()

}

[dasmo]

Thanks @maralefer, that has got me close but I can’t seem to get this.$apollo to be set up properly. If I check this.$apollo in mounted(), it comes up as a DollarApollo object:

this.$apollo
DollarApollo {_apolloSubscriptions: Array(0), _watchers: Array(0), vm: Vue, queries: {…}, subscriptions: {…}, …}

But its client property is always undefined:

this.$apollo.client
undefined

I know the provider is being set up with the client because stepping through my plugin shows that is is. Also, I can see the client from within mounted() when looking at:

this._provided.$apolloProvider.clients
{a: ApolloClient, defaultClient: ApolloClient}

Any ideas?

Thanks in advance,
Daniel