구성요소에서 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 */ },
  }
});