build
Afficher l'aide de la commande pour build les views :
oip-tools views build --helpListe des différentes options disponibles pour la commande build :
- --config <path> chemin du dossier contenant les fichiers de configuration yml des views, option requise
- --extFileBackend <extension> extension désirée des fichiers générés coté back-end
- --cleanUnusedFiles <boolean> supprime ou non les fichiers générés inutilisés lors du build
Exemple d'utilisation de la commande pour un build des views :
oip-tools views build --config ./viewsConfig --extFileBackend mjsIl faut ensuite ajouter le script de génération au package.json :
{
"scripts": {
"build:views": "oip-tools views build"
}
}Création des fichiers de configuration des views
Créer les fichiers yaml de configuration des vues dans le dossier viewsConfig.
Il est recommandé de préfixer les fichiers de configuration d'un numéro d'ordre des pages.
Pour créer une configuration générique pour une vue, vous devez définir les propriétés suivantes :
- viewId : Il s’agit d’un identifiant unique pour la vue.
- pathname: Il s’agit du chemin d’URL où la vue sera accessible.
- directory: C’est le répertoire où tous les fichiers associés à cette vue sont stockés.
- actions : Il s’agit d’actions qui peuvent être effectuées dans la vue, telles que revenir en arrière ou enregistrer et quitter.
- Section graphql: Ici, vous pouvez définir des requêtes et des mutations qui seront utilisées par votre application afin de récupérer des données à partir d’une API ou de la mettre à jour respectivement.
- testFile : boolean, active ou désactive la génération des fichiers de tests d'intégration. Optionnel, activé par défaut.
Exemple :
example:
viewId: EXAMPLE_VIEW
pathname: /example-view
directory: example-view
actions:
- PREVIOUS
- SAVE_AND_QUIT
graphql:
queries:
- type: CustomerFormFieldsQuery
fields:
firstName: String!
lastName: String!
email: String!
phone: String!
resolver: getCustomerFormFields
mutations:
- type: CreateCustomerMutation
inputs:
firstName : String!
lastName : String!
email : EmailAddressType!
phone : PhoneNumberType!
resolver: createNewCustomer
La gestion multi-page dans un dossier
Pour mieux structurer vos fichiers de configuration de vue, vous pouvez créer des sous-dossiers dans le dossier viewsConfig.
Dans l'exemple ci-dessous, le dossier testFolder contient le code généré pour les 2 pages dans les sous-dossiers client, server et transitions
Ceci est possible par l'ajout d'un dossier parent commun dans la propriété directory.
example:
viewId: EXAMPLE_VIEW1
pathname: /example-view1
directory: /testFolder/example-view1
actions:
- PREVIOUS
- SAVE_AND_QUIT
graphql:
queries:
- type: CustomerFormFieldsQuery
fields:
firstName: String!
lastName: String!
email: String!
phone: String!
resolver: getCustomerFormFields
mutations:
- type: CreateCustomerMutation
inputs:
firstName : String!
lastName : String!
email : EmailAddressType!
phone : PhoneNumberType!
resolver: createNewCustomer
Structure de vues générée
Edition de la partie GraphQL
En écrivant des propriétés vous générer des objets graphql via queries et mutations. Vous pouvez également faire des requetes via websocket en ajoutant la propriété subscription: true
Exemple :
subscription:
viewId: SUB
pathname: /
directory: subscription
actions:
- DEFAULT
graphql:
subscription: trueDéclarer un type GraphQL récursif
Fonctionnalité disponible à partir de la version 3.0.0 de l'oip-tools
La déclaration d'un type GraphQL récursif nécessite l'ajout de la clé maxDepth qui définit la pronfondeur maximale attendue du graphe de données du type en question.
Exemple :
home:
viewId: home
pathname: /
directory: home
graphql:
queries:
- type: Magic
fields:
message: String
code: Int
options: '[Magic]'
maxDepth: 3
resolver: getMagicDans cet exemple le type Magic est récursif car son champ options est un tableau de lui même, type Magic
La profondeur maximum du graphe de données du type Magic est de 3, valeur de la clé maxDepth. La query gql client générée associée au resolver sera alors de la forme :
getMagic_home {
message
code
options {
message
code
options {
message
code
}
}
}