Interroger un schéma GraphQL à partir d’un composant

Accédez aux données d’enregistrement dans un composant en interrogeant votre schéma GraphQL scripté.

Avant de commencer

Rôle requis : admin

1. Créer un schéma GraphQL.
2. Tester les API GraphQL avec l’explorateur GraphQL.
3. Désactivez les requêtes introspectives dans votre environnement de production.
4. Créez un composant personnalisé.

Procédure

1. Accédez au répertoire de vos composants.
2. Définissez la requête dans le fichier de index.js de votre composant.

   Supprimer les requêtes introspectives

   N’utilisez pas de requêtes introspectives pour les composants déployés dans un environnement de production.

   Inclure les espaces de noms applicables

   Incluez les espaces de noms de l’application et du schéma dans la requête.

   Différer les champs à réponse lente

   Vous pouvez appliquer la directive de requête @defer à un fragment pour retarder le traitement d’un ou plusieurs champs à réponse lente. Le report des champs à réponse lente permet à la requête de renvoyer d’autres champs en premier.

   Avertissement :

   Évitez d’appliquer cette directive de requête sans discernement car elle peut également entraîner des dégradations des performances. Effectuez des tests de performances pour déterminer quels champs peuvent être différés pour de meilleures performances.

   Remarque :

   const incidentQuery = `query ($sys_id: String!) {
       query (sys_id: $sys_id) {
           incident {
               _results {
                   sys_id {
                       displayValue
                   }
               }
           }
       }
   }`;

3. Ajoutez la ligne suivante en haut du script pour importer l’API createGraphQLEffect dans votre composant.

   import {createGraphQLEffect} from '@servicenow/ui-effect-graphql';

4. Appelez la requête à l’aide de l’API createGraphQLEffect . Pour en savoir plus sur cette API, consultez le site développeur.
5. Créez des gestionnaires d’actions pour gérer le résultat de la requête.

   actionHandlers: {
      [DATA_FETCH_REQUESTED]: dataFetchHandler,
      [DATA_FETCH_STARTED]: ({updateState}) => updateState({loading: true}),
      [DATA_FETCH_SUCCEEDED]: ({action, updateState}) => updateState({data: action.payload}),
      [DATA_FETCH_FAILED]: () => { /* handle network error */ },
    }

Exemple

Cet exemple montre un composant complet comprenant la requête, l’appel d’API GraphQL et les gestionnaires d’actions pour gérer la réponse.

import {createCustomElement} from '@servicenow/ui-core';
import snabbdom from '@servicenow/ui-renderer-snabbdom';
import {createGraphQLEffect} from '@servicenow/ui-effect-graphql';

const GQL_QUERY = `
query query ($active: Boolean) {
    now {
        mySchema (active: $active) {
            myField {
                value
            }
         }
    }
}`;
  
const DATA_FETCH_REQUESTED = 'DATA_FETCH_REQUESTED';
const DATA_FETCH_STARTED = 'DATA_FETCH_STARTED';
const DATA_FETCH_SUCCEEDED = 'DATA_FETCH_SUCCEEDED';
const DATA_FETCH_FAILED = 'DATA_FETCH_FAILED';
  
const dataFetchHandler = createGraphQLEffect(GQL_QUERY, {
  variableList: ['active'],
  startActionType: DATA_FETCH_STARTED,    // gql http request started
  successActionType: DATA_FETCH_SUCCEEDED // gql request succeeded with result
  errorActionType: DATA_FETCH_FAILED      // gql http network request error (actual schema / server errors will succeed with error objects
});

const component = createCustomElement('now-component', {
  renderer: {type: snabbdom},
  view(state) {
    if(state.loading)
      return <div>Loading...</div>;

    if(!state.data)
      return <div>No Data</div>;

    return <div>My value: {state.data.data.now.mySchema.myField.value}</div>;
  },
  actionHandlers: {
   [DATA_FETCH_REQUESTED]: dataFetchHandler,
   [DATA_FETCH_STARTED]: ({updateState}) => updateState({loading: true}),
   [DATA_FETCH_SUCCEEDED]: ({action, updateState}) => updateState({data: action.payload}),
   [DATA_FETCH_FAILED]: () => { /* handle network error */ },
  }
});