---
sourceDocument: オーストラリア API リファレンス
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/api-reference

 Release :

    - australia

ft:locale :

    - ja-JP

ft:publication_title :

    - オーストラリア API リファレンス

ft:clusterId :

    - crapiref

bundleId :

    - crapiref

workflow :

    - Creator


---

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

# コンポーネントからの GraphQL スキーマのクエリ {#ariaid-title1}

* リリースバージョン: Australia
* 
* 更新日 2026年03月12日
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：4分

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

## 始める前に

必要なロール：admin  
1. [GraphQL スキーマの作成](https://servicenow-prod.fluidtopics.net/EiDJzRjSvstRApjSG9jJ8g#build-graphql-scripted-schema "GraphQL スキーマを作成して、GraphQL クエリでデータを使用できるようにします。")。
2. [GraphQL エクスプローラーで GraphQL API をテストする](https://servicenow-prod.fluidtopics.net/Qtgq_FTyOlUBKCStL8aoow "統合された GraphQL テストツールを使用して、GraphQL API のクエリをテストします。")。
3. [本番環境でイントロスペクションクエリを無効に](https://servicenow-prod.fluidtopics.net/qi1YRL~OBCI_ftb1wPwDwA "GraphQL API フレームワークの動作を構成します。たとえば、スキーマに対するイントロスペクションクエリを許可するかどうかを構成できます。")します。
4. [カスタムコンポーネントを作成します](https://www.servicenow.com/docs/access?context=custom-components&version=australia&pubname=australia-application-development&ft:locale=en-US)。
{#query-schema-from-component__ol_phk_ggc_bmb}

## 手順

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 の詳細については、 [開発者サイト](https://developer.servicenow.com/dev.do#!/guide/sandiego/now-experience/ui-framework/api-reference/effect-graphql)を参照してください。
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 */ },
      }
    });