GraphQL – Apollo Client useQuery()

Apollo Client è una libreria che può essere utilizzata all’interno di applicazioni React, per il recuperare e modificare dati utilizzando GraphQL. Apollo client permette di ottenere dati in modi differenti, ed una di queste è mandando una query direttamente al server utilizzando l’hook useQuery(). Con questa hook non solo è possibile ottenere dati, ma è anche possibile gestire gli stati.

In particolare useQuery() accetta in ingresso una props e ritorna un oggetto con tre variabili di stato:

• loading: viene impostata a true quando non ci sono dati in arrivo
• error: viene impostata se si verificano degli errori
• data: viene impostata con i dati ritornati dal server

Sulla base dello schema fornito dal server è possibile integrare la query della richiesta con altri campi, e/o con altre relazioni sui dati. Immaginiamo di poter ottenere nome e cognome di un utente e l’elendo della su todo list.

La query potrebbe essere :

query getUser {
	user {
		firstName
		lastName
		todos {
			title
			status
		}
	}
}

dove oltre che al nome e cognome dell’utente viene richiesta anche l’elenco della todo list (todos) composto da titole e stato. La possibile risposta :

"data": {
	"user": {
		"firstName": "John",
		"lastName": "Doe",
		"todos": [
			{
				"title": "Do dishes",
				"status" "complete"
			},
			{
				"title": "Walk the dog",
				"status": "open"
			}
		}
	}
}

Da evidenziare come il campo todos non rifletta in maniera precisa quello che è stato richiesto nella richiesta. Infatti, nella query di richiesta stiamo richiedendo un oggetto, mentre nella risposta otteniamo una lista di oggetti. Se, anzichè utilizzare GraphQL avessimo utilizzando delle API rest, con molta probabilità avremmo effettuato due chiamate: una per ottenere le informazioni dell’user ed una per ottenere la todos per l’utente selezionato.