Fragen Sie ein GraphQL-Schema aus einer Komponente ab

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.
2. Testen Sie GraphQL-APIs mit dem GraphQL-Explorer.
3. Deaktivieren Sie introspektive Abfragen in Ihrer Produktionsumgebung.
4. Erstellen Sie eine anwenderdefinierte Komponente.

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