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) as a Cloud Service.

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:

Gerenciamento do cache para suas consultas persistentes

Consultas persistentes são recomendadas, pois elas podem ser armazenadas em cache nas camadas do Dispatcher e CDN, melhorando o desempenho do aplicativo cliente solicitante. Por padrão, o AEM invalidará o cache da rede de entrega de conteúdo (CDN) com base em um TTL (Time To Live) padrão.

Ao usar o GraphQL, é possível configurar os cabeçalhos de cache HTTP para controlar esses parâmetros para sua consulta persistente individual.

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

   

2. Selecionar isso abrirá a caixa de diálogo Configuração de cache:

   

3. Selecione o parâmetro apropriado e ajuste o valor conforme necessário:

   • cache-control - max-age
     Os caches podem armazenar esse conteúdo por um número especificado de segundos. Normalmente, esse é o TTL (Time To Live) do navegador.
   • surrogate-control - s-maxage
     Igual a max-age, mas aplica-se especificamente a caches de proxy.
   • surrogate-control - stale-while-revalidate
     Os caches podem continuar a servir uma resposta em cache depois que ela se tornar obsoleta, por um número especificado de segundos.
   • surrogate-control - stale-if-error
     Os caches podem continuar a servir uma resposta em cache em caso de erro de origem, por um número especificado de segundos.

4. Selecione Salvar para confirmar as alterações.

Publicação de consultas persistentes

Depois de selecionar a consulta persistente na lista (painel esquerdo), você pode usar as ações Publicar e Desfazer a publicação. 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