frist graphql query to materio_graphql schema is working

going to refactor every thing with graphql

build/webpack.config.base.js

@@ -52,7 +52,26 @@ module.exports = {
         use: {
           loader: 'babel-loader',
         }
+      },
+      {
+        test: /\.(graphql|gql)$/,
+        exclude: /node_modules/,
+        loader: 'graphql-tag/loader'
       }
+      // {
+      //   test: /\.graphql?$/,
+      //   use: [
+      //     {
+      //       loader: 'webpack-graphql-loader',
+      //       options: {
+      //         // validate: true,
+      //         // schema: "./path/to/schema.json",
+      //         // removeUnusedFragments: true
+      //         // etc. See "Loader Options" below
+      //       }
+      //     }
+      //   ]
+      // }
       // , {
       //   test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
       //   use: {

package-lock.json

@@ -7405,6 +7405,18 @@
       "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
       "dev": true
     },
+    "graphql": {
+      "version": "15.4.0",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-15.4.0.tgz",
+      "integrity": "sha512-EB3zgGchcabbsU9cFe1j+yxdzKQKAbGUWRb13DsrsMN1yyfmmIq+2+L5MqVWcDCE4V89R5AyUOi7sMOGxdsYtA==",
+      "dev": true
+    },
+    "graphql-tag": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.11.0.tgz",
+      "integrity": "sha512-VmsD5pJqWJnQZMUeRwrDhfgoyqcfwEkvtpANqcoUG8/tOLkwNgU9mzub/Mc78OJMhHjx7gfAMTxzdG43VGg3bA==",
+      "dev": true
+    },
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",

package.json

@@ -53,6 +53,8 @@
     "eslint-plugin-vue": "^7.1.0",
     "eslint-plugin-vue-a11y": "0.0.31",
     "eslint-webpack-plugin": "^2.4.0",
+    "graphql": "^15.4.0",
+    "graphql-tag": "^2.11.0",
     "mini-css-extract-plugin": "^1.3.1",
     "node-sass": "^5.0.0",
     "querystring-es3": "^0.2.1",

web/modules/custom/materio_graphql/graphql/materio_extension.base.graphqls

@@ -1,5 +1,3 @@
-type Mutation
-
 scalar Violation
 
 type Materiau {
@@ -12,18 +10,35 @@ type Materiau {
   images: [Image]
 }
 
-type MateriauResponse implements Response {
+type Article {
-  errors: [Violation]
+  id: Int!
-  materiau: Materiau
+  uuid: String!
-}
-
-interface Response {
-  errors: [Violation]
-}
-
-input MateriauInput {
   title: String!
-  description: String
+  author: String
+  body: String
+  linked_materials: [Materiau]
+  images: [Image]
+  videos: [VideoLink]
+  # date: [String]
+  # showroom: [Showroom]
+  # source: Link
+  # tags: []
+  # thesaurus: []
+}
+
+# type Showroom {
+#   id: Int!
+#   uuid: String!
+# }
+#
+#
+# type Link {
+#   url: String!
+#   title: String
+# }
+
+type VideoLink {
+  url: String
 }
 
 type Image {

web/modules/custom/materio_graphql/graphql/materio_extension.extension.graphqls

@@ -2,6 +2,6 @@ extend type Query {
   materiau(id: Int!): Materiau
 }
 
-extend type Mutation {
+extend type Query {
-  createMateriau(data: MateriauInput): MateriauResponse
+  article(id: Int!): Article
 }

web/modules/custom/materio_graphql/src/Plugin/GraphQL/SchemaExtension/MaterioSchemaExtension.php

@@ -24,6 +24,7 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase {
   public function registerResolvers(ResolverRegistryInterface $registry) {
     $builder = new ResolverBuilder();
 
+    // Materiau
     $registry->addFieldResolver('Query', 'materiau',
       $builder->produce('entity_load')
         ->map('type', $builder->fromValue('node'))
@@ -31,24 +32,6 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase {
         ->map('id', $builder->fromArgument('id'))
     );
     
-    // Create materiau mutation.
-    $registry->addFieldResolver('Mutation', 'createMateriau',
-      $builder->produce('create_materiau')
-        ->map('data', $builder->fromArgument('data'))
-    );
-
-    $registry->addFieldResolver('MateriauResponse', 'materiau',
-      $builder->callback(function (MateriauResponse $response) {
-        return $response->materiau();
-      })
-    );
-
-    $registry->addFieldResolver('MateriauResponse', 'errors',
-      $builder->callback(function (MateriauResponse $response) {
-        return $response->getViolations();
-      })
-    );
-
     $registry->addFieldResolver('Materiau', 'id',
       $builder->produce('entity_id')
         ->map('entity', $builder->fromParent())
@@ -99,6 +82,84 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase {
         ->map('field', $builder->fromValue('field_materiau_images'))
     );
 
+    // Article
+    $registry->addFieldResolver('Query', 'article',
+      $builder->produce('entity_load')
+        ->map('type', $builder->fromValue('node'))
+        ->map('bundles', $builder->fromValue(['article']))
+        ->map('id', $builder->fromArgument('id'))
+    );
+    // $registry->addFieldResolver('ArticleResponse', 'article',
+    //   $builder->callback(function (ArticleResponse $response) {
+    //     return $response->article();
+    //   })
+    // );
+
+    $registry->addFieldResolver('Article', 'id',
+      $builder->produce('entity_id')
+        ->map('entity', $builder->fromParent())
+    );
+
+    $registry->addFieldResolver('Article', 'uuid',
+      $builder->produce('entity_uuid')
+        ->map('entity', $builder->fromParent())
+    );
+
+    $registry->addFieldResolver('Article', 'title',
+      $builder->compose(
+        $builder->produce('entity_label')
+          ->map('entity', $builder->fromParent())
+      )
+    );
+
+    $registry->addFieldResolver('Article', 'author',
+      $builder->compose(
+        $builder->produce('entity_owner')
+          ->map('entity', $builder->fromParent()),
+        $builder->produce('entity_label')
+          ->map('entity', $builder->fromParent())
+      )
+    );
+
+    $registry->addFieldResolver('Article', 'body',
+      $builder->produce('property_path')
+      ->map('type', $builder->fromValue('entity:node'))
+      ->map('value', $builder->fromParent())
+      ->map('path', $builder->fromValue('body.value'))
+    );
+
+    // https://github.com/drupal-graphql/graphql/blob/8.x-4.x/doc/SUMMARY.md
+    // https://blog.chrismitchellonline.com/posts/custom_graphql_data/
+    $registry->addFieldResolver('Article', 'linked_materials',
+      $builder->compose(
+        $builder->produce('entity_reference')
+          ->map('entity', $builder->fromParent())
+          ->map('field', $builder->fromValue('field_linked_materials'))
+      )
+    );
+
+    $registry->addFieldResolver('Article', 'images',
+      $builder->produce('entity_reference')
+        ->map('entity', $builder->fromParent())
+        ->map('field', $builder->fromValue('field_visuel'))
+    );
+
+    $registry->addFieldResolver('Article', 'videos',
+      $builder->produce('property_path')
+        ->map('type', $builder->fromValue('entity:node'))
+        ->map('value', $builder->fromParent())
+        ->map('path', $builder->fromValue('field_video'))
+    );
+
+    // VideoLink
+    $registry->addFieldResolver('VideoLink', 'url',
+      $builder->produce('property_path')
+        ->map('type', $builder->fromValue('field_item:video_embed_field'))
+        ->map('value', $builder->fromParent())
+        ->map('path', $builder->fromValue('value'))
+    );
+
+    // Image
     $registry->addFieldResolver('Image', 'id',
       $builder->produce('entity_id')
         ->map('entity', $builder->fromParent())
@@ -122,7 +183,6 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase {
         ->map('style', $builder->fromValue('card_medium_half'))
     );
 
-
     // Response type resolver.
     $registry->addTypeResolver('Response', [
       __CLASS__,

web/themes/custom/materiotheme/assets/dist/main.css

@@ -1783,7 +1783,9 @@ article.card {
       flex-flow: row wrap;
       font-size: 0.882em;
       font-weight: 300; }
-      article.card.modal-card section.col-right section.samples ul span.showroom {
+      article.card.modal-card section.col-right section.samples ul li {
+        padding-right: 0.5em; }
+        article.card.modal-card section.col-right section.samples ul li span.showroom {
           font-weight: 500; }
     article.card.modal-card section.col-right section.body p {
       font-size: 0.882em;

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -883,9 +883,12 @@ article.card{
           font-size: 0.882em;
           font-weight: 300;
           // line-height: 1.35;
+          li{
+            padding-right: 0.5em;
             span.showroom{ font-weight: 500; }
           }
         }
+      }
       section.body{
         p{
           font-size: 0.882em;

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, '')