added vue- apollo

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^2.6.5",
     "vue": "^2.6.10",
+    "vue-apollo": "^3.0.0-beta.11",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1"
   },
@@ -21,6 +22,8 @@
     "babel-eslint": "^10.0.1",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
+    "graphql-tag": "^2.9.0",
+    "vue-cli-plugin-apollo": "^0.20.0",
     "vue-template-compiler": "^2.6.10"
   }
 }

src/App.vue

@@ -1,3 +1,3 @@
 <template>
     <router-view/>
-</template>
+</template>

src/main.js

@@ -2,11 +2,13 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import { createProvider } from './vue-apollo'
 
 Vue.config.productionTip = false
 
 new Vue({
   router,
   store,
+  apolloProvider: createProvider(),
   render: h => h(App)
 }).$mount('#app')

src/vue-apollo.js

@@ -0,0 +1,101 @@
+import Vue from 'vue'
+import VueApollo from 'vue-apollo'
+import { createApolloClient, restartWebsockets } from 'vue-cli-plugin-apollo/graphql-client'
+
+// Install the vue plugin
+Vue.use(VueApollo)
+
+// Name of the localStorage item
+const AUTH_TOKEN = 'apollo-token'
+
+// Http endpoint
+const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP || 'http://localhost:4000/graphql'
+
+// Config
+const defaultOptions = {
+  // You can use `https` for secure connection (recommended in production)
+  httpEndpoint,
+  // You can use `wss` for secure connection (recommended in production)
+  // Use `null` to disable subscriptions
+  wsEndpoint: process.env.VUE_APP_GRAPHQL_WS || 'ws://localhost:4000/graphql',
+  // LocalStorage token
+  tokenName: AUTH_TOKEN,
+  // Enable Automatic Query persisting with Apollo Engine
+  persisting: false,
+  // Use websockets for everything (no HTTP)
+  // You need to pass a `wsEndpoint` for this to work
+  websocketsOnly: false,
+  // Is being rendered on the server?
+  ssr: false
+
+  // Override default apollo link
+  // note: don't override httpLink here, specify httpLink options in the
+  // httpLinkOptions property of defaultOptions.
+  // link: myLink
+
+  // Override default cache
+  // cache: myCache
+
+  // Override the way the Authorization header is set
+  // getAuth: (tokenName) => ...
+
+  // Additional ApolloClient options
+  // apollo: { ... }
+
+  // Client local data (see apollo-link-state)
+  // clientState: { resolvers: { ... }, defaults: { ... } }
+}
+
+// Call this in the Vue app file
+export function createProvider (options = {}) {
+  // Create apollo client
+  const { apolloClient, wsClient } = createApolloClient({
+    ...defaultOptions,
+    ...options
+  })
+  apolloClient.wsClient = wsClient
+
+  // Create vue apollo provider
+  const apolloProvider = new VueApollo({
+    defaultClient: apolloClient,
+    defaultOptions: {
+      $query: {
+        // fetchPolicy: 'cache-and-network',
+      }
+    },
+    errorHandler (error) {
+      // eslint-disable-next-line no-console
+      console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message)
+    }
+  })
+
+  return apolloProvider
+}
+
+// Manually call this when user log in
+export async function onLogin (apolloClient, token) {
+  if (typeof localStorage !== 'undefined' && token) {
+    localStorage.setItem(AUTH_TOKEN, token)
+  }
+  if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient)
+  try {
+    await apolloClient.resetStore()
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.log('%cError on cache reset (login)', 'color: orange;', e.message)
+  }
+}
+
+// Manually call this when user log out
+export async function onLogout (apolloClient) {
+  if (typeof localStorage !== 'undefined') {
+    localStorage.removeItem(AUTH_TOKEN)
+  }
+  if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient)
+  try {
+    await apolloClient.resetStore()
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.log('%cError on cache reset (logout)', 'color: orange;', e.message)
+  }
+}