bachir
/
materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

frist graphql query to materio_graphql schema is working 

going to refactor every thing with graphql
This commit is contained in:
Bachir Soussi Chiadmi 2020-12-10 22:46:27 +01:00
parent 2071a99ca2
commit 2739df96e2
14 changed files with 1087 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
build/webpack.config.base.js
View File

@ -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: {

12
package-lock.json generated
View File

@ -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",

2
package.json
View File

@ -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",

41
web/modules/custom/materio_graphql/graphql/materio_extension.base.graphqls
View File

@ -1,5 +1,3 @@
type Mutation
scalar Violation
type Materiau {
@ -12,18 +10,35 @@ type Materiau {
images: [Image]
}
type MateriauResponse implements Response {
errors: [Violation]
materiau: Materiau
}
interface Response {
errors: [Violation]
}
input MateriauInput {
type Article {
id: Int!
uuid: String!
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 {

4
web/modules/custom/materio_graphql/graphql/materio_extension.extension.graphqls
View File

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

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

@ -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__,

4
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

@ -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;

804
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

3
web/themes/custom/materiotheme/assets/styles/main.scss
View File

@ -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;

32
web/themes/custom/materiotheme/vuejs/api/gql/article.fragment.gql Normal file
View File

@ -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
}
}
}
}

32
web/themes/custom/materiotheme/vuejs/api/gql/materiau.fragment.gql Normal file
View File

@ -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
}
}
}
}

17
web/themes/custom/materiotheme/vuejs/api/graphql-axios.js Normal file
View File

@ -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"
}
})

2
web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue
View File

@ -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"

58
web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue
View File

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