Fragt 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 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 Ihren Komponenten Index.js Datei.

   Entfernen Sie introspektive Abfragen

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

   Fügen Sie anwendbare Namespaces ein

   Schließen Sie sowohl die Anwendungs- als auch die Schemanamespaces in die Abfrage ein.

   Langsame Antwortfelder zurückstellen

   Sie können anwenden @Zurückstellen Abfrageanweisung zu einem Fragment, um die Verarbeitung eines oder mehrerer langsam antwortender Felder zu verzögern. Durch das Zurückstellen von Feldern mit langsamer Antwort kann die Abfrage zuerst andere Felder zurückgeben.

   Warnung:

   Vermeiden Sie es, diese Abfrageanweisung wahllos anzuwenden, da dies auch zu Leistungsverschlechterungen führen kann. Führen Sie Leistungstests durch, um zu bestimmen, welche Felder zurückgestellt werden können, um die Leistung zu verbessern.

   Hinweis:

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

3. Fügen Sie oben im Skript die folgende Zeile hinzu, um zu importieren CreateGraphQLEffect API in Ihre Komponente.

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

4. Rufen Sie die Abfrage mit auf CreateGraphQLEffect API. Weitere Informationen zu dieser API finden Sie unter Entwickler-Site .
5. Erstellen Sie Aktionshandler, 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, einschließlich Abfrage, GraphQL-API-Aufruf und Aktionshandler zur Verwaltung 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 */ },
  }
});