GraphQL React – useMutation()

Nel post precedente abbiamo visto come sia possibile ottenere dati da un server GraphQL inviandogli direttamente una query con l’hook useQuery(). E’ il momento di modificare i dati del server utilizzando l’hook useMutatation().

Analizziamo la seguente mutation:

mutation changeTodoStatus($input: ChangeTodoStatusInput!) {
	changeTodoStatus(input: $input) {
		todo {
			title
			status
		}
		user {
			todos {
				title
				status
				}
			}
		}
}

La mutation prende in ingresso lo stato di un elemento todoe ritorna le sue informazioni aggiornate. Inoltre, ritorna anche l’utente con tutta la lista delle todo di quell’utente.

Come per il recupero delle informazioni dal server, anche per eseguire mutazioni esistono modi differenti. In questo caso, quello che analizzeremo è l’hook useMutation().

import { gql, useMutation} from '@apollo/client';
const ADD_TODO = gql'
// Insert mutation
';
function AddTodo() {
	let input;
	const [addTodo, { data, loading, error }] =
	useMutation(ADD_TODO);
	if (loading) return 'Submitting...';
	if (error) return 'Submission error! ${error.message}';
	return (
	<div>
		<form
		onSubmit={e => {
			e.preventDefault();
			addTodo({ variables: { text: input.value } });
			input.value = '';
		}}
	>
		<input
		ref={node => {
			input = node;
		}}
	/>
		<button type="submit">Add Todo</button>
		</form>
	</div>
);
}
export default AddTodo;

Abbiamo impostata una form (dove all’ onSubmit viene annullato il comportamento di default a favore di addTodo). Quando viene premuto il pulsante submit viene preso valore inserito all’interno dell’input box e passato come parametro alla funzione addTodo. A questo punto viene eseguito useMutation() che accetta come parametro una mutation e ritorna un oggetto su cui eseguire la mutation e un oggetto con i dati. Come nel caso della useQuery() quando i dati non sono ancora stati ritornati, viene impostata a true lo state loading (e verrà visualizzato a video “Submitting…”) mentre in caso di errore verrà impostata a true lo state error (con al visualizzazion di “Submission error!” ed il relativo errore).