Install Vue Apollo plugin

Author: maoberlehner

package.json

@@ -17,16 +17,23 @@
     "@avalanche/setting-spacings": "^4.0.0-alpha.6",
     "@vue/cli-plugin-babel": "^3.3.0",
     "@vue/cli-service": "^3.3.0",
+    "apollo-server-lambda": "^2.3.1",
+    "graphql": "^14.1.1",
+    "graphql-tag": "^2.9.0",
+    "graphql-type-json": "^0.2.1",
     "node-sass": "^4.11.0",
     "node-sass-magic-importer": "^5.3.0",
     "reset-css": "^4.0.1",
     "sass-loader": "^7.1.0",
     "vue": "^2.5.22",
+    "vue-apollo": "^3.0.0-beta.11",
+    "vue-cli-plugin-apollo": "^0.19.1",
     "vue-template-compiler": "^2.5.22"
   },
   "devDependencies": {
     "@avalanche/eslint-config": "^3.0.0",
     "@vue/cli-plugin-eslint": "^3.3.0",
+    "eslint-plugin-graphql": "^2.1.1",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-vue": "^5.1.0"
   },

src/main.js

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

src/vue-apollo.js

@@ -0,0 +1,60 @@
+import { createApolloClient } from 'vue-cli-plugin-apollo/graphql-client';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+
+Vue.use(VueApollo);
+
+const AUTH_TOKEN = `apollo-token`;
+
+const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP || `/.netlify/functions/graphql`;
+const defaultOptions = {
+  httpEndpoint,
+  tokenName: AUTH_TOKEN,
+  persisting: false,
+  websocketsOnly: false,
+  ssr: false,
+};
+
+export function createProvider(options = {}) {
+  const { apolloClient } = createApolloClient({
+    ...defaultOptions,
+    ...options,
+  });
+
+  const apolloProvider = new VueApollo({
+    defaultClient: apolloClient,
+    defaultOptions: {
+      $query: {},
+    },
+    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;
+}
+
+export async function onLogin(apolloClient, token) {
+  if (typeof localStorage !== `undefined` && token) {
+    localStorage.setItem(AUTH_TOKEN, token);
+  }
+  try {
+    await apolloClient.resetStore();
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.log(`%cError on cache reset (login)`, `color: orange;`, e.message);
+  }
+}
+
+export async function onLogout(apolloClient) {
+  if (typeof localStorage !== `undefined`) {
+    localStorage.removeItem(AUTH_TOKEN);
+  }
+  try {
+    await apolloClient.resetStore();
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.log(`%cError on cache reset (logout)`, `color: orange;`, e.message);
+  }
+}