コンポーネントからの GraphQL スキーマのクエリ

スクリプト化された GraphQL スキーマを照会して、コンポーネント内のレコードデータにアクセスします。

始める前に

必要なロール：admin

1. GraphQL スキーマの作成。
2. GraphQL エクスプローラーで GraphQL API をテストする。
3. イントロスペクションクエリを本番環境で無効化します。
4. カスタムコンポーネントを作成します。

手順

1. コンポーネントディレクトリに移動します。
2. コンポーネントの index.js ファイルでクエリを定義します。

   イントロスペクションクエリを削除する

   イントロスペクションクエリは本番環境に展開されるコンポーネントに使用しないでください。

   該当する名前空間を含める

   アプリケーションとスキーマの両方の名前空間をクエリに含めます。

   応答の遅いフィールドを保留にする

   @defer クエリディレクティブをフラグメントに適用して、1 つ以上の応答の遅いフィールドの処理を遅らせることができます。応答の遅いフィールドを保留にすると、クエリで他のフィールドを先に返すことができます。

   警告:

   パフォーマンスが低下する可能性があるため、このクエリディレクティブを無差別に適用しないでください。パフォーマンステストを実施して、パフォーマンスを向上させるためにどのフィールドを保留できるかを判断してください。

   注:

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

3. 次の行をスクリプトの先頭に追加して、createGraphQLEffect API をコンポーネントにインポートします。

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

4. createGraphQLEffect API を使用してクエリを呼び出します。この API の詳細については、開発者サイトを参照してください。
5. クエリの結果を管理するアクションハンドラーを作成します。

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

例

この例は、クエリ、GraphQL API 呼び出し、および応答を管理するアクションハンドラーを含む完全なコンポーネントを示しています。

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