Using GraphQL and Apollo With The Latest Quasar

  • 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:


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

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

    const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(

    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.


  • Quasar + Feathersjs + Apollo GraphQL is Awesome ;-)

Log in to reply

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.