---
sourceDocument: Référence de l’API Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/xanadu/api-reference

 Release :

    - xanadu

ft:locale :

    - fr-FR

ft:publication_title :

    - Référence de l’API Xanadu

ft:clusterId :

    - crapiref

bundleId :

    - crapiref

workflow :

    - Creator


---

# Interroger un schéma GraphQL à partir d'un composant

# Interroger un schéma GraphQL à partir d'un composant {#ariaid-title1}

* Rversion finale: Xanadu
* 
* Mis à jour 1 août 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes de lecture

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](https://servicenow-prod.fluidtopics.net/bG2fHcKh5fNu2wiQncNC5g#build-graphql-scripted-schema "Créez un schéma GraphQL pour rendre les données disponibles aux requêtes GraphQL.").
2. [Tester les API GraphQL avec l'explorateur GraphQL](https://servicenow-prod.fluidtopics.net/l45Glw8SkeutG~mBrq_ufA "Testez vos API GraphQL à l’aide d’un outil de test GraphQL intégré.").
3. [Désactivez les requêtes introspectives dans votre environnement de production](https://servicenow-prod.fluidtopics.net/V87oyQx9km73vjlPbUsWmg "Configurez le comportement du cadre de travail de l’API GraphQL. Par exemple, vous pouvez configurer si vous souhaitez autoriser les requêtes introspectives dans votre schéma.").
4. [Créez un composant personnalisé](https://www.servicenow.com/docs/access?context=custom-components&version=xanadu&pubname=xanadu-application-development&ft:locale=en-US).
{#query-schema-from-component__ol_phk_ggc_bmb}

## Procédure

1. Accédez au répertoire de vos composants.
2. Définissez la requête dans le fichier 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 d'application et de 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'abord d'autres champs.  
       Avertissement :  
   Évitez d'appliquer cette directive query sans discernement, car elle peut également entraîner des dégradations des performances. Effectuez des tests de performance 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](https://developer.servicenow.com/dev.do#!/guide/sandiego/now-experience/ui-framework/api-reference/effect-graphql).
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 */ },
      }
    });