Uso do GraphiQL IDE

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

A ferramenta GraphiQL permite testar e depurar as consultas de GraphQL, possibilitando:

• 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 GraphQL
• diretamente; por exemplo, http://localhost:4502/aem/graphiql.html

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

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

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

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

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

Atualização da consulta persistente

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

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ê:

• clicar/tocar no ícone Executar consulta
• usar a combinação de teclado Control-Enter

Variáveis de consulta

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

Por exemplo:

Publicação de consultas persistentes

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

Copiar o URL para acessar a consulta diretamente

A opção Copiar URL permite simular uma consulta copiando o URL usado 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:

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

Exclusão de consultas persistentes

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

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

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

Recursos do Business.Adobe.com