frist graphql query to materio_graphql schema is working

going to refactor every thing with graphql

web/themes/custom/materiotheme/vuejs/api/gql/article.fragment.gql

@@ -0,0 +1,32 @@
+fragment ArticleFields on Article {
+  images {
+    id
+    url
+    alt
+    style_minicard{
+      width
+      height
+      url
+    }
+  }
+  id
+  title
+  author
+  uuid
+  memo
+  linked_materials {
+    id
+    title
+    memo
+    images {
+      id
+      url
+      alt
+      style_minicard{
+        width
+        height
+        url
+      }
+    }
+  }
+}

web/themes/custom/materiotheme/vuejs/api/gql/materiau.fragment.gql

@@ -0,0 +1,32 @@
+fragment MateriauFields on Materiau {
+  images {
+    id
+    url
+    alt
+    style_minicard{
+      width
+      height
+      url
+    }
+  }
+  id
+  title
+  author
+  uuid
+  memo
+  linked_materials {
+    id
+    title
+    memo
+    images {
+      id
+      url
+      alt
+      style_minicard{
+        width
+        height
+        url
+      }
+    }
+  }
+}

web/themes/custom/materiotheme/vuejs/api/graphql-axios.js

@@ -0,0 +1,17 @@
+import axios from 'axios'
+
+// https://github.com/alvar0hurtad0/drupal-vuejs-todo/blob/master/frontend/src/api/axiosInterceptor.js
+
+// console.log('drupalSettings', drupalSettings);
+console.log(window.location);
+
+export const MGQ = axios.create({
+  baseURL: window.location.origin+`/mgq`,
+  withCredentials: true,
+  headers: {
+    'Accept': 'application/json',
+    // Accept: 'application/vnd.api+json'
+    // Authorization: 'Basic {token}',
+    "Content-Type": "application/json"
+  }
+})

web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue

@@ -34,7 +34,7 @@
         </section>
       </nav>
       <section class="samples">
-        <h3>{{ $t("Validation.Bundle") }}</h3>
+        <h3>{{ $t("materio.Samples") }}</h3>
         <ul>
           <li
             v-for="sample in item.field_samples"

web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue

@@ -114,8 +114,15 @@
 <script>
 import router from 'vuejs/route'
 import store from 'vuejs/store'
+
 import { JSONAPI } from 'vuejs/api/json-axios'
 import { REST } from 'vuejs/api/rest-axios'
+import { MGQ } from 'vuejs/api/graphql-axios'
+import { print } from 'graphql/language/printer'
+import gql from 'graphql-tag'
+import materiauFields from 'vuejs/api/gql/materiau.fragment.gql'
+// import articleFields from 'vuejs/api/gql/article.fragment.gql'
+
 import qs from 'querystring-es3'
 import Card from 'vuejs/components/Content/Card'
 
@@ -202,14 +209,34 @@ export default {
       JSONAPI.get(`node/article/${this.uuid}?${q}`)
         .then(({ data }) => {
           console.log('loadArticle data', data)
-          this.parseData(data)
+          this.parseDataJSONAPI(data)
         })
         .catch(( error ) => {
             console.warn('Issue with loadArticle', error)
             Promise.reject(error)
         })
+      // let ast = gql`{
+      //   article(id: ${this.uuid}) {
+      //     ...ArticleFields
+      //   }
+      // }
+      // ${ articleFields }
+      // `
+      // MGQ.post('', { query: print(ast)
+      // })
+      //   .then((data) => {
+      //     console.log('loadArticle', data )
+      //     this.parseDataGQL(data.data.article)
+      //   })
+      //   .catch(error => {
+      //     console.warn('Issue with loadArticle', error)
+      //     Promise.reject(error)
+      //   })
     },
-    parseData(data){
+    // parseDataGQL(data){
+    //   console.log('parseDataGQL data', data)
+    // },
+    parseDataJSONAPI(data){
       let attrs = data.data.attributes
       let relations = data.data.relationships
       console.log('relations', relations);
@@ -349,9 +376,9 @@ export default {
       this.loading = false;
       console.log('article.content',this.content);
 
-      // this.getFieldDefinition()
+      this.getFieldDefinition()
     },
-    // getFieldDefinition(field){
+    getFieldDefinition(field){
     //   // JSONAPI.get(`field_config/${field}`)
     //   //   .then(({ data }) => {
     //   //     console.log('getFieldDefinition data', data)
@@ -369,7 +396,28 @@ export default {
     //       Promise.reject(error)
     //     })
     //
-    // },
+
+      // https://stackoverflow.com/a/52612632
+      // https://stackoverflow.com/a/57873339
+      let ast = gql`{
+        materiau(id: 5150) {
+          ...MateriauFields
+        }
+      }
+      ${ materiauFields }
+      `
+      MGQ.post('', { query: print(ast)
+      })
+        .then((data) => {
+          console.log('getFieldDefinition', data )
+        })
+        .catch(error => {
+          console.warn('Issue with getFieldDefiintion', error)
+          Promise.reject(error)
+        })
+
+
+    },
     onNext(){
       // console.log('clicked on next', this.prevnext.next);
       let alias = this.prevnext.next.view_node.replace(/^.?\/blabla\//g, '')