구성요소에서 GraphQL 스키마 쿼리

스크립팅된 GraphQL 스키마를 쿼리하여 구성요소의 기록 데이터에 액세스합니다.

시작하기 전에

필요한 역할: admin

1. GraphQL 스키마 생성.
2. GraphQL 탐색기로 GraphQL API 테스트.
3. 프로덕션 환경에서 내성 쿼리를 사용하지 않도록 설정합니다.
4. 사용자 지정 구성요소를 만듭니다.

프로시저

1. 구성 요소 디렉터리로 이동합니다.
2. 구성요소의 index.js 파일에서 쿼리를 정의합니다.

   내성 쿼리 제거

   프로덕션 환경에 배포된 구성요소에 대해 내성 쿼리를 사용하지 마십시오.

   해당하는 네임스페이스 포함

   쿼리에 application 및 schema 네임스페이스를 모두 포함합니다.

   응답 속도가 느린 필드 연기

   @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에 대한 자세한 내용은 개발자 사이트를 참조하세요.
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 */ },
  }
});