in React

React e GraphQL

Nei post precedenti si è parlato della gestione degli stati all’ interno di un applicazione React. E soprattutto dell’importanza di usare gli state all’interno dei componenti: senza, si ricadrebbe a poco piu di una semplice pagina HTML. Oltre all’utilizzo dei context e di redux (o l’insieme dei due), è possibile utilizzare GraphQL.

Come i Context, GraphQL può essere utilizzato sia per lo sviluppo di applicazioni Web, sia per applicazioni mobile. GraphQL è un query language che viene utilizzato con API, e viene implementato server-side.

Per poter utilizzare GraphQL all’interno di applicazioni React è necessario utilizzare librerie di terze parti, come ad esempio Apollo Client.

Dalla pagina della libreria troviamo:

Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, and modify application data, all while automatically updating your UI.

A differenza dei Context, utilizzando GraphQL non è necessario utilizzare Redux per gestire lo stato dell’applicazione: apollo client, ad esempio, fornisce tutti gli hook per recuperare e modificare dati da server GraphQL.

Prima di entrare nel funzionamento dei GraphQL, un pò di terminologia:

GraphQL: è il linguaggio che viene utilizzato per definire i dati e i loro cambiamenti

Apollo Client: è una libreria che consente di ottenere e mutare i dati. Contiene componenti e hooks che pssono essere utilizzati per all’interno delle applicazioni.

Query: è il comando che viene eseguito verso il server GraphQL

Fragment: nel caso in cui si abbia la necessità di eseguire query di grandi dimensioni, il fragment ne rappresenta una parte

Mutation: e’ un particolare tipo di query che consente di modificare i dati sul server remoto. Una volta effettuata la mutazione, il client Apollo dovrà riportare questi cambiamenti all’interno del frontend

Subscription: è il tipo di GraphQL che viene utilizzato per lo scambio real-time tra client e server. Ad esempio in applicazioni come chat e sistemi di notifica realtime.

Nei prossimi post vedremo come installare ed interagire con un server GraphQL.