Introduzione al client GraphiQL
Gato GraphQL fornisce il client GraphiQL per interagire con il servizio GraphQL. Accedi a esso facendo clic su "GraphiQL" nel menu del plugin:
GraphiQL permette di comporre query GraphQL, eseguirle e visualizzarne la risposta:
Guida al client GraphiQL
Ecco come usare il client GraphiQL per comporre ed eseguire una query GraphQL.
Componiamo la query GraphQL nel pannello a sinistra:
GraphiQL dispone di un evidenziatore di sintassi per la sintassi GraphQL. Man mano che componiamo la query, possiamo notare come il nome dell'operazione, le parentesi di apertura e chiusura, i campi, gli argomenti, le direttive e i commenti abbiano ciascuno un colore distinto, aiutandoci a comprendere la query:
Al primo caricamento, GraphiQL recupera i metadati dello schema GraphQL tramite l'introspezione. Grazie ai metadati dello schema, in ogni momento durante la composizione della query, GraphiQL suggerisce opzioni di completamento automatico:
Possiamo anche esplorare i metadati dello schema tramite l'Esploratore della documentazione. Per aprirlo, dobbiamo fare clic sul pulsante "Docs":
L'Esploratore della documentazione apparirà sul lato destro:
Facendo clic sul nome del tipo GraphQL, l'Esploratore della documentazione ne mostrerà le informazioni:
- la sua descrizione
- quali interfacce implementa
- l'elenco di tutti i suoi campi, inclusi:
- quali argomenti ricevono
- il loro tipo di ritorno (su cui possiamo anche fare clic)
- la loro descrizione
In qualsiasi momento, possiamo anche cercare e recuperare informazioni su qualsiasi elemento dello schema:
Passando il mouse su qualsiasi elemento della query verranno mostrate le sue informazioni, e ctrl (o cmd) + clic lo mostrerà nell'Esploratore della documentazione:
Facendo clic sul pannello "Query variables" in basso, possiamo comporre variabili da passare alla query, sotto forma di una mappa JSON di variable => value:
Per eseguire la query GraphQL, premiamo il pulsante "Run", oppure premiamo ctrl (o cmd) + enter:
La risposta GraphQL verrà mostrata nel pannello centrale:
Nel pannello superiore, ci sono diversi add-on per GraphiQL:
Facendo clic su ciascun pulsante di add-on verrà eseguita una determinata azione:
- "Prettify" formatta la query GraphQL
- "History" mostra l'elenco delle query precedenti più recenti, e facendo clic su una di esse verrà inserita nell'editor delle query
- "Explorer" apre il pannello GraphiQL Explorer
Il GraphiQL Explorer è un ottimo add-on. Mostra l'elenco di tutti i campi, e facendo clic su di essi vengono aggiunti alla query nell'editor, permettendo di comporre la query GraphQL in modo visivo: