From af608b948733ef4c14c25a67e5e8c48d798d9b55 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 23 Feb 2021 12:55:05 +0100
Subject: [PATCH] add graphql deps and minimal example

---
 package.json                |  2 ++
 src/api/index.js            |  9 +++++++++
 src/api/queries/TextRef.gql |  5 +++++
 src/pages/Home.vue          | 16 ++++++++++++++--
 src/store/index.js          | 20 ++++++++++++++++++--
 vue.config.js               | 10 ++++++++++
 6 files changed, 58 insertions(+), 4 deletions(-)
 create mode 100644 src/api/index.js
 create mode 100644 src/api/queries/TextRef.gql

diff --git a/package.json b/package.json
index 86c9332..2f8a2ae 100644
--- a/package.json
+++ b/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"
diff --git a/src/api/index.js b/src/api/index.js
new file mode 100644
index 0000000..ac3c24c
--- /dev/null
+++ b/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'
+  }
+})
diff --git a/src/api/queries/TextRef.gql b/src/api/queries/TextRef.gql
new file mode 100644
index 0000000..7216fec
--- /dev/null
+++ b/src/api/queries/TextRef.gql
@@ -0,0 +1,5 @@
+query TextRef ($id: Int!) {
+  textref (id: $id) {
+    title
+  }
+}
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 8f99447..f592d57 100644
--- a/src/pages/Home.vue
+++ b/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>
diff --git a/src/store/index.js b/src/store/index.js
index da001bf..567d537 100644
--- a/src/store/index.js
+++ b/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 } })
+    }
   }
 })
diff --git a/vue.config.js b/vue.config.js
index 8629077..46ebdc1 100644
--- a/vue.config.js
+++ b/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',