Consultar um esquema GraphQL de um componente

Acesse os dados de registro em um componente consultando seu esquema GraphQL com script.

Antes de Iniciar

Função necessária: administrador

1. Criar um esquema GraphQL.
2. Testar APIs da GraphQL com o Explorador da GraphQL.
3. Desabilite consultas introspectivas em seu ambiente de produção.
4. Crie um componente personalizado.

Procedimento

1. Navegue até o diretório do componente.
2. Defina a consulta no arquivo index.js do seu componente.

   Remover consultas introspectivas

   Não use consultas introspectivas para componentes implantados em um ambiente de produção.

   Incluir namespaces aplicáveis

   Inclua os namespaces da aplicação e do esquema na consulta.

   Adiar campos de resposta lenta

   Você pode aplicar a diretiva de consulta @defer a um fragmento para atrasar o processamento de um ou mais campos de resposta lenta. O adiamento de campos de resposta lenta permite que a consulta retorne outros campos primeiro.

   Aviso:

   Evite aplicar esta diretiva de consulta indiscriminadamente, pois ela também pode causar degradações no desempenho. Realize testes de desempenho para determinar quais campos podem ser adiados para um melhor desempenho.

   Nota:

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

3. Adicione a seguinte linha à parte superior do script para importar a API createGraphQLEffect para o seu componente.

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

4. Chame a consulta usando a API createGraphQLEffect. Para saber mais sobre essa API, consulte o Site do desenvolvedor.
5. Crie manipuladores de ação para gerenciar o resultado da consulta.

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

Exemplo

Este exemplo mostra um componente completo, incluindo a consulta, a chamada de API GraphQL e manipuladores de ação para gerenciar a resposta.

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