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 GraphQL APIs com o GraphQL Explorer.
3. Desabilite consultas introspectivas em seu ambiente de produção.
4. Crie um componente personalizado.

Procedimento

1. Navegue até o diretório do seu 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. Adiar os 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 melhor desempenho.

   Nota:

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

3. Adicione a linha a seguir à 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 GraphQL API 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 */ },
  }
});