How can I port this example for use with scaphold.io

[kristianmandrup]

I can't seem to grasp your use of client. In the example you are using a web socket client. When I try to use vue-apollo with scaphold.io config, it fails with $apollo.client undefined and also shows query and mutate properties with TypeError since undefined. What gives?

As you can see I experimented with trying to use localhost as ws client, then disabled on advice from @vince from scaphold.io

import ApolloClient, { createNetworkInterface } from 'apollo-client'
// import { Client } from 'subscriptions-transport-ws'
// import { addGraphQLSubscriptions } from 'vue-apollo';
import config from '../config/client'

const networkInterface = createNetworkInterface({
  uri: config.scapholdUrl,
  transportBatching: true
})

// const wsClient = new Client('ws://localhost:3001')

// const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
//   networkInterface,
//   wsClient,
// )

networkInterface.use([{
  applyMiddleware (req, next) {
    if (!req.options.headers) {
      req.options.headers = {}  // Create the header object if needed.
    }
    if (localStorage.getItem('token')) {
      req.options.headers.Authorization = `Bearer ${localStorage.getItem('token')}`
    }
    next()
  }
}])

const client = new ApolloClient({
  networkInterface // : networkInterfaceWithSubscriptions
})

// Install the vue-apollo plugin and use the apollo client
Vue.use(VueApollo, {
  client
})

new Vue({
  ...App,
  apollo: {
    // Apollo specific options
  }
}).$mount('#app')

[Akryum]

The plugin requires the apolloClient option, but you named it client.

// Install the vue-apollo plugin and use the apollo client
Vue.use(VueApollo, {
  apolloClient: client
})