---
sourceDocument: Xanadu-API-Referenz
sourceDocumentLink: https://www.servicenow.com/docs/r/de-DE/xanadu/api-reference

 Release :

    - xanadu

ft:locale :

    - de-DE

ft:publication_title :

    - Xanadu-API-Referenz

ft:clusterId :

    - crapiref

bundleId :

    - crapiref

workflow :

    - Creator


---

# Fragen Sie ein GraphQL-Schema aus einer Komponente ab

# Fragen Sie ein GraphQL-Schema aus einer Komponente ab {#ariaid-title1}

* Freigeben Version: Xanadu
* 
* Aktualisiert 1. August 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 Minuten Lesedauer

Greifen Sie auf Datensatzdaten in einer Komponente zu, indem Sie Ihr geskriptetes GraphQL-Schema abfragen.

## Vorbereitungen

Erforderliche Rolle: admin  
1. [Erstellen Sie ein GraphQL-Schema](https://www.servicenow.com/docs/aRV7bI0JFxwl~t9Qdg5b~Q#build-graphql-scripted-schema "Erstellen Sie ein GraphQL-Schema, um Daten für GraphQL-Abfragen verfügbar zu machen.").
2. [Testen Sie GraphQL-APIs mit dem GraphQL-Explorer](https://www.servicenow.com/docs/LHns1rnMPqsJWKsYbneIqQ "Testen Sie die Abfrage Ihrer GraphQL-APIs mit einem integrierten GraphQL-Testtool.").
3. [Deaktivieren Sie introspektive Abfragen in Ihrer Produktionsumgebung](https://www.servicenow.com/docs/AjoYuG2natBN_7ojP31L1w "Konfigurieren Sie das Verhalten des GraphQL-API-Frameworks. Sie können beispielsweise konfigurieren, ob introspektive Abfragen in Ihr Schema zugelassen werden.").
4. [Erstellen Sie eine anwenderdefinierte Komponente](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}

## Prozedur

1. Navigieren Sie zu Ihrem Komponentenverzeichnis.
2. Definieren Sie die Abfrage in der Datei index.js Ihrer Komponente.  

   Entfernen Sie introspektive Abfragen
   :   Verwenden Sie keine introspektiven Abfragen für Komponenten, die in einer Produktionsumgebung bereitgestellt werden.

   Schließen Sie die entsprechenden Namespaces ein
   :   Schließen Sie sowohl den Anwendungs- als auch den Schema-Namespace in die Abfrage ein.

   Langsam reagierende Felder zurückstellen
   :   Sie können die `Abfragedirektive @defer` auf ein Fragment anwenden, um die Verarbeitung eines oder mehrerer langsam reagierender Felder zu verzögern. Durch das Zurückstellen von langsam reagierenden Feldern kann die Abfrage andere Felder zuerst zurückgeben.  
       Warnung:  
   Vermeiden Sie es, diese Abfragerichtlinie wahllos anzuwenden, da dies auch zu Leistungsverschlechterungen führen kann. Führen Sie Leistungstests durch, um zu bestimmen, welche Felder für eine bessere Leistung zurückgestellt werden können.  
   Hinweis:  

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

3. Fügen Sie die folgende Zeile am Anfang des Skripts hinzu, um die createGraphQLEffect- API in Ihre Komponente zu importieren.  

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

4. Rufen Sie die Abfrage mit der `createGraphQLEffect-` API auf. Weitere Informationen zu dieser API finden Sie auf der [Developer Site](https://developer.servicenow.com/dev.do#!/guide/sandiego/now-experience/ui-framework/api-reference/effect-graphql).
5. Erstellen Sie Aktions-Handler, um das Ergebnis der Abfrage zu verwalten.  

       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 */ },
        }

## Beispiel

Dieses Beispiel zeigt eine vollständige Komponente mit der Abfrage, dem GraphQL-API-Aufruf und Aktionshandlern zum Verwalten der Antwort.  

    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 */ },
      }
    });