Great help, both from the original topic and @cheebhodh reply. Up and running with GraphQL and Apollo now, thanks!

Great help, both from the original topic and @cheebhodh reply. Up and running with GraphQL and Apollo now, thanks!

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