build

7 min

Afficher l'aide de la commande pour build les views :

oip-tools views build --help

Liste 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 mjs

Il 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

views ├── testFolder │ ├── client │ │ ├── exemple-view1 │ │ │ ├── graphql │ │ │ │ ├── queries │ │ │ │ └── _generated_ │ │ │ ├── hooks │ │ │ │ └── useGetMaVueQuery.js │ │ │ └── MaVue.jsx │ │ └── exemple-view2 │ │ ├── graphql │ │ │ ├── queries │ │ │ └── _generated_ │ │ ├── hooks │ │ │ └── useGetMaVueQuery.js │ │ └── MaVue.jsx │ └── server │ │ ├── exemple-view1 │ │ │ └── graphql │ │ │ └── resolver │ │ │ ├── getMaVue.mjs │ │ │ ├── index.mjs │ │ │ └── type │ │ │ ├── mutationType.mjs │ │ │ ├── queryType.mjs │ │ │ └── queryTypeResolvers.mjs │ │ └── exemple-view2 │ │ └── graphql │ │ └── resolver │ │ ├── getMaVue.mjs │ │ ├── index.mjs │ │ └── type │ │ ├── mutationType.mjs │ │ ├── queryType.mjs │ │ └── queryTypeResolvers.mjs │ └── transitions │ ├── exemple-view1 │ └── exemple-view2 ├── default.mjs ├── index.mjs └── next.mjs

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: true

Dé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: getMagic

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