---
sourceDocument: 호주 API 참조
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ko-KR/api-reference

 Release :

    - australia

ft:locale :

    - ko-KR

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 스키마를 쿼리하여 구성요소의 기록 데이터에 액세스합니다.

## 시작하기 전에

필요한 역할: 관리자  
1. [GraphQL 스키마 생성](https://servicenow-prod.fluidtopics.net/wGKc9roqfcIVlw0RaQtT3w#build-graphql-scripted-schema "GraphQL 쿼리에 데이터를 사용할 수 있도록 GraphQL 스키마를 생성합니다.").
2. [GraphQL 탐색기를 사용하여 GraphQL API 테스트](https://servicenow-prod.fluidtopics.net/bgMppBT_pimaKdnoSN6I5Q "통합 GraphQL 테스트 도구를 사용하여 GraphQL API를 쿼리합니다.").
3. [프로덕션 환경에서 내성 쿼리를 비활성화합니다](https://servicenow-prod.fluidtopics.net/nyxzOa9VthfztvlJ4_jT1A "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` 쿼리 지시문을 적용하여 응답 속도가 느린 하나 이상의 필드의 처리를 지연할 수 있습니다. 느린 응답 필드를 연기하면 쿼리가 다른 필드를 먼저 반환할 수 있습니다.  
       경고:  
   이 쿼리 지침을 무분별하게 적용하면 성능이 저하될 수 있으므로 적용하지 마십시오. 성능 테스트를 수행하여 성능 향상을 위해 연기할 수 있는 필드를 결정합니다.  
   주:  

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