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:

    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



  • Quasar + Feathersjs + Apollo GraphQL is Awesome 😉



  • @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()

    }



  • 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