Uso do GraphiQL IDE graphiql-ide

Uma implementação do padrão GraphiQL IDE está disponível para uso com a API do GraphQL do Adobe Experience Manager (AEM).

NOTE
O GraphiQL é incluído em todos os ambientes do AEM (mas só se torna acessível/visível quando você configura os pontos de acesso).
Em versões anteriores, era necessário um pacote para instalar o GraphiQL IDE. Se você o instalou, agora é possível removê-lo.
NOTE
Você deve configurar os endpoints no navegador de configuração antes de usar o GraphiQL IDE.

A ferramenta GraphiQL permite testar e depurar as consultas do GraphQL, permitindo:

  • selecionar o endpoint apropriado à configuração de Sites que deseja usar para as consultas
  • inserir diretamente novas consultas
  • criar e acessar consultas persistentes
  • executar as consultas para ver os resultados imediatamente
  • gerenciar variáveis de consulta
  • salvar e gerenciar consultas persistentes
  • publicar ou desfazer a publicação de consultas persistentes (por exemplo, para/do dev-publish)
  • consultar o histórico de consultas anteriores
  • usar o Explorador de documentação para acessar a documentação; ajudando você a conhecer e entender quais métodos estão disponíveis.

É possível acessar o editor de consultas por meio de:

  • Ferramentas > Geral > Editor de Consultas do GraphQL
  • diretamente; por exemplo, http://localhost:4502/aem/graphiql.html

Interface GraphiQL

Você pode usar o GraphiQL no sistema para que as consultas possam ser solicitadas pelo aplicativo cliente usando solicitações GET e para publicar consultas. Para o uso em produção, é possível mover as consultas para o ambiente de produção. Inicialmente ao autor de produção para validação do conteúdo recém-criado com as consultas e, finalmente, à produção de publicação para consumo em tempo real.

Seleção do endpoint selecting-endpoint

Como primeira etapa, é preciso selecionar o endpoint que deseja usar para as consultas. O endpoint é apropriado para a configuração dos Sites que você deseja usar para as consultas.

Isso está disponível na lista suspensa na parte superior direita.

Criação e persistência de uma nova consulta creating-new-query

Você pode inserir a nova consulta no editor, que está no painel central esquerdo, diretamente sob o logotipo do GraphiQL.

NOTE
Se você tiver uma consulta persistente já selecionada que está sendo exibida no painel do editor, selecione + (ao lado de Consultas persistentes) para esvaziar o editor para sua nova consulta.

Basta começar a digitar. O editor também:

  • mostra informações adicionais sobre os elementos ao passar o mouse sobre eles
  • fornece recursos como realce de sintaxe, preenchimento automático, sugestão automática
NOTE
As consultas de GraphQL normalmente começam com um caractere {.
Linhas que começam com # são ignoradas.

Use a opção Salvar como para criar uma consulta persistente.

Atualização da consulta persistente updating-persisted-query

Selecione a consulta que deseja atualizar na lista do painel Consultas persistentes (lado esquerdo).

A consulta será exibida no painel do editor. Faça as alterações necessárias e use a opção Salvar para confirmar as atualizações da consulta persistente.

Execução de consultas running-queries

Você pode executar uma nova consulta imediatamente ou pode carregar e executar uma consulta persistente. Para carregar uma consulta persistente, selecione-a na lista; a consulta será exibida no painel do editor.

Em ambos os casos, a consulta exibida no painel do editor é a que será executada quando você:

  • clique no ícone Executar Consulta
  • usar a combinação de teclado Control-Enter

Variáveis de consulta query-variables

O GraphiQL IDE também permite gerenciar suas Variáveis de consulta.

Por exemplo:

Variáveis GraphQL

Publicação de consultas persistentes publishing-persisted-queries

Depois de selecionar sua consulta persistente na lista (painel esquerdo), você pode usar as ações Publish e Cancelar publicação. Isso as ativará no ambiente de publicação (por exemplo, dev-publish) para facilitar o acesso de seus aplicativos durante os testes.

NOTE
A definição do cache da consulta persistente Time To Live {"cache-control":"parameter":value} tem um valor padrão de 2 horas (7200 segundos).

Copiar o URL para acessar a consulta diretamente copy-url

A opção Copiar URL permite simular uma consulta copiando a URL usada para acessar diretamente a consulta persistente e ver os resultados. Essa opção pode ser usada para testes; por exemplo, acessando em um navegador:

Por exemplo:

http://localhost:4502/graphql/execute.json/global/article-list-01

Ao usar esse URL em um navegador, é possível confirmar os resultados:

GraphiQL - Copiar URL

A opção Copiar URL é acessível por meio dos três pontos verticais à direita do nome da consulta persistente (painel à esquerda):

GraphiQL - Copiar URL

Exclusão de consultas persistentes deleting-persisted-queries

A opção Excluir também é acessível por meio dos três pontos verticais à direita do nome da consulta persistente (painel à esquerda).

Instalação da consulta persistente na produção installing-persisted-query-production

Depois de desenvolver e testar a consulta persistente com o GraphiQL, o objetivo final é transferi-la para o ambiente de produção para que os aplicativos possam usá-la.

Atalhos de teclado keyboard-shortcuts

Há uma série de atalhos de teclado que fornecem acesso direto aos ícones de ação no IDE:

  • Adornar a consulta: Shift-Control-P
  • Mesclar consulta: Shift-Control-M
  • Executar consulta: Control-Enter
  • Preenchimento automático: Control-Space
NOTE
Em alguns teclados, a tecla Control é rotulada como Ctrl.
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2