Utilizzo dell’IDE GraphiQL graphiql-ide
È disponibile un'implementazione dell'IDE GraphiQL standard da utilizzare con l'API GraphQL di Adobe Experience Manager (AEM).
Lo strumento GraphiQL consente di testare ed eseguire il debug delle query GraphQL consentendoti di:
- selezionare l’Endpoint appropriato per la configurazione Sites da utilizzare per le query;
- inserire direttamente nuove query;
- creare e accedere a query persistenti;
- eseguire le query per visualizzare immediatamente i risultati
- gestire variabili di query;
- salvare e gestire query persistenti;
- pubblicare o annullare la pubblicazione di query persistenti (ad esempio, a/da
dev-publish); - vedere la cronologia delle query precedenti;
- utilizzare Esplora documentazione per accedere alla documentazione, per scoprire e comprendere i metodi disponibili.
Puoi accedere all’editor di query da:
- Strumenti -> Generale -> Editor query GraphQL
- direttamente; ad esempio
http://localhost:4502/aem/graphiql.html
Puoi utilizzare GraphiQL nel tuo sistema in modo che le query possano essere richieste dall’applicazione client mediante richieste GET, nonché per pubblicarle. Per l’utilizzo in produzione, puoi quindi spostare le query nell’ambiente di produzione. Inizialmente devi spostarle nell’istanza Author dell’ambiente di produzione per convalidare i contenuti appena creati con le query, e infine nell’istanza Publish di produzione per l’utilizzo live.
Selezione dell’endpoint selecting-endpoint
Come primo passo è necessario selezionare l’endpoint da utilizzare per le query. L’endpoint è appropriato per la configurazione Sites che desideri utilizzare per le query.
È disponibile dall’elenco a discesa in alto a destra.
Creazione e persistenza di una nuova query creating-new-query
Puoi inserire la nuova query nell’editor, che si trova nel pannello centrale a sinistra, direttamente sotto il logo GraphiQL.
+ (accanto a query persistenti) per svuotare l’editor approntandolo per la nuova query.A questo punto è sufficiente iniziare a digitare. L’editor, inoltre:
- mostra ulteriori informazioni sugli elementi al passaggio del mouse;
- fornisce funzioni quali evidenziazione della sintassi, completamento automatico e suggerimento automatico
{.# vengono ignorate.Utilizza Salva con nome per rendere persistente la nuova query.
Aggiornamento della query persistente updating-persisted-query
Seleziona la query da aggiornare dall’elenco nel pannello delle query persistenti (a sinistra).
La query viene visualizzata nel pannello dell’editor. Apporta le modifiche necessarie, quindi utilizza Salva per confermare gli aggiornamenti della query persistente.
Esecuzione delle query running-queries
Puoi eseguire immediatamente una nuova query oppure caricare ed eseguire una query persistente. Per caricare una query persistente, selezionala dall’elenco: la query viene visualizzata nel pannello dell’editor.
In entrambi i casi, la query visualizzata nel pannello dell’editor è quella che verrà eseguita quando:
- fare clic sull'icona Esegui query
- utilizzi la scelta rapida di tastiera
Control-Enter
Variabili di query query-variables
L'IDE GraphiQL consente inoltre di gestire le variabili di query.
Esempio:
Pubblicazione di query persistenti publishing-persisted-queries
Dopo aver selezionato la query persistente dall'elenco (pannello a sinistra) puoi utilizzare le azioni Publish e Annulla pubblicazione. Queste consentono di attivarle nell’ambiente di pubblicazione (ad esempio, dev-publish) per renderle facilmente accessibili dalle applicazioni in fase di test.
Time To Live {"cache-control":"parameter":value} ha un valore predefinito di 2 ore (7200 secondi).Copiare l’URL per accedere direttamente alla query copy-url
L'opzione Copia URL consente di simulare una query copiando l'URL utilizzato per accedere direttamente alla query persistente e visualizzare i risultati. Questa può quindi essere utilizzata per i test; ad esempio, accedendo in un browser:
Esempio:
http://localhost:4502/graphql/execute.json/global/article-list-01
Utilizzando questo URL in un browser, puoi confermare i risultati:
L’opzione Copia URL è accessibile tramite i tre punti verticali a destra del nome della query persistente (pannello a sinistra):
Eliminazione delle query persistenti deleting-persisted-queries
L’opzione Elimina è anch’essa accessibile tramite i tre punti verticali a destra del nome della query persistente (pannello a sinistra).
Installazione della query persistente nell’ambiente di produzione installing-persisted-query-production
Dopo aver sviluppato e testato la query persistente con GraphiQL, occorre trasferirla all’ambiente di produzione in modo che possa essere utilizzata dalle applicazioni.
Scelte rapide da tastiera keyboard-shortcuts
Nell’IDE è disponibile una selezione di scelte rapide da tastiera per accedere direttamente alle icone di azione:
- Migliora query:
Shift-Control-P - Unisci query:
Shift-Control-M - Esegui query:
Control-Enter - Completamento automatico:
Control-Space
Control è etichettato come Ctrl.