add graphql deps and minimal example

package.json

@@ -35,6 +35,8 @@
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^6.2.2",
     "eslint-plugin-vue-a11y": "0.0.31",
+    "graphql": "^15.5.0",
+    "graphql-tag": "^2.9.0",
     "node-sass": "^4.12.0",
     "sass-loader": "^8.0.2",
     "vue-template-compiler": "^2.6.11"

src/api/index.js

@@ -0,0 +1,9 @@
+import axios from 'axios'
+
+export default axios.create({
+  baseURL: window.location.origin + '/api/gql',
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json'
+  }
+})

src/api/queries/TextRef.gql

@@ -0,0 +1,5 @@
+query TextRef ($id: Int!) {
+  textref (id: $id) {
+    title
+  }
+}

src/pages/Home.vue

@@ -1,11 +1,23 @@
 <template>
   <div class="home">
-    Home
+    {{ text }}
   </div>
 </template>
 
 <script>
 export default {
-  name: 'Home'
+  name: 'Home',
+
+  data () {
+    return {
+      text: null
+    }
+  },
+
+  created () {
+    this.$store.dispatch('GET_TEXT', 1).then(({ data }) => {
+      this.text = data.data.textref
+    })
+  }
 }
 </script>

src/store/index.js

@@ -1,11 +1,27 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
-// import Corpus from './modules/corpus'
+import api from '@/api'
+import { print } from 'graphql/language/printer'
+import TextRef from '@/api/queries/TextRef.gql'
+
 
 Vue.use(Vuex)
+
+
 export default new Vuex.Store({
   modules: {
-    // Corpus
+  },
+
+  state: {
+  },
+
+  mutations: {
+  },
+
+  actions: {
+    'GET_TEXT' ({ state }, id) {
+      return api.post('', { query: print(TextRef), variables: { id } })
+    }
   }
 })

vue.config.js

@@ -1,4 +1,14 @@
 module.exports = {
+  chainWebpack: config => {
+    // GraphQL Loader
+    config.module
+      .rule('graphql')
+      .test(/\.gql$/)
+      .use('graphql-tag/loader')
+      .loader('graphql-tag/loader')
+      .end()
+  },
+
   publicPath: '/',
   devServer: {
     clientLogLevel: 'warning',