---
sourceDocument: Referência de API do Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/xanadu/api-reference

 Release :

    - xanadu

ft:locale :

    - pt-BR

ft:publication_title :

    - Referência de API do Xanadu

ft:clusterId :

    - crapiref

bundleId :

    - crapiref

workflow :

    - Creator


---

# Consultar um esquema GraphQL de um componente

# Consultar um esquema GraphQL de um componente {#ariaid-title1}

* Versão de lançamento: Xanadu
* 
* Atualizado 1 de ago. de 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 min. de leitura

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](https://servicenow-prod.fluidtopics.net/FdMoJibjOwmeAs4CLN4qKw#build-graphql-scripted-schema "Crie um esquema GraphQL para disponibilizar dados para consultas GraphQL.").
2. [Testar APIs da GraphQL com o Explorador da GraphQL](https://servicenow-prod.fluidtopics.net/qKfmz3irbBwYs5BZ82N8uA "Teste a consulta de suas APIs GraphQL usando uma ferramenta de teste GraphQL integrada.").
3. [Desabilite consultas introspectivas em seu ambiente de produção](https://servicenow-prod.fluidtopics.net/8HpPyHX11exHxZdrxHcrlA "Configure o comportamento da estrutura da GraphQL API. Por exemplo, você pode configurar se deseja permitir consultas introspectivas em seu esquema.").
4. [Crie um componente personalizado](https://www.servicenow.com/docs/access?context=custom-components&version=xanadu&pubname=xanadu-application-development&ft:locale=en-US).
{#query-schema-from-component__ol_phk_ggc_bmb}

## 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](https://developer.servicenow.com/dev.do#!/guide/sandiego/now-experience/ui-framework/api-reference/effect-graphql).
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 */ },
      }
    });