Introduzione a Relay Modern: Un Client GraphQL Ottimizzato per React

Relay Modern è un client GraphQL avanzato e altamente ottimizzato, sviluppato da Facebook, progettato specificamente per l’ecosistema React. È noto per la sua capacità di gestire applicazioni complesse e per la sua integrazione nativa con React, fornendo potenti strumenti per ottimizzare le query, le mutazioni e la gestione dello stato. In questo articolo, esploreremo cos’è Relay Modern, come funziona e come può essere utilizzato per migliorare le performance e la scalabilità delle tue applicazioni React con GraphQL.

Cos’è Relay Modern?

Relay Modern è un framework per la gestione dei dati basato su GraphQL, costruito per fornire un’esperienza di sviluppo ottimizzata e scalabile per applicazioni React. È pensato per applicazioni che hanno bisogno di gestire dati complessi con un forte focus sulle performance, grazie a caratteristiche come il caching avanzato, il supporto per le query frammentate, e una gestione efficiente del ciclo di vita delle query.

Caratteristiche Chiave di Relay Modern

1. Frammenti GraphQL: Relay si basa su frammenti GraphQL che consentono di specificare le dipendenze sui dati a livello di componente.
2. Persisted Queries: Relay genera automaticamente query persistenti e ottimizzate.
3. Normative Store: Relay gestisce uno store locale per i dati, normalizzando le risposte GraphQL per migliorare la gestione della cache.
4. Mutazioni Ottimistiche: Supporto per mutazioni ottimistiche, che consentono di aggiornare l’interfaccia utente prima di ricevere una risposta dal server.
5. Precaricamento: Relay precarica le query, riducendo il tempo di attesa per i dati e migliorando l’esperienza utente.

Perché Usare Relay Modern?

Relay Modern è ideale per le applicazioni React di grandi dimensioni che richiedono una gestione sofisticata dei dati. Ecco alcuni motivi per cui dovresti considerare di utilizzare Relay:

1. Performance Ottimizzate: Relay minimizza il numero di richieste di rete e normalizza i dati in uno store centralizzato, migliorando le performance e la scalabilità.
2. Gestione Avanzata della Cache: Relay gestisce una cache normativa che consente di aggiornare automaticamente i dati in risposta alle mutazioni.
3. Componenti Autocontenuti: Utilizzando frammenti, ogni componente React specifica le proprie dipendenze sui dati, rendendo il codice più modulare e riutilizzabile.

Come Iniziare con Relay Modern

Step 1: Installazione

Per iniziare con Relay Modern, devi installare le dipendenze necessarie:

npm install react-relay relay-runtime babel-plugin-relay graphql

Relay richiede un plugin Babel per trasformare le query GraphQL definite nei componenti React. Aggiungi il plugin babel-plugin-relay al tuo file di configurazione .babelrc:

{
  "plugins": ["relay"]
}

Step 2: Configurazione di Relay

Relay Modern richiede un ambiente GraphQL e uno schema GraphQL per funzionare correttamente. Uno dei primi passaggi è generare gli artefatti di Relay (frammenti e query ottimizzati). Assicurati di avere un endpoint GraphQL configurato e un file schema .graphql.

Generare Artefatti con Relay Compiler

Relay Modern utilizza un Relay Compiler che genera artefatti di query a partire dallo schema GraphQL.

1. Installare Relay Compiler:

npm install --save-dev relay-compiler

2. Aggiungere uno script per eseguire Relay Compiler in package.json:

{
  "scripts": {
    "relay": "relay-compiler --src ./src --schema ./schema.graphql"
  }
}

3. Eseguire Relay Compiler per generare i frammenti e le query ottimizzate:

npm run relay

Step 3: Configurare un Ambiente di Rete in Relay

Relay ha bisogno di un ambiente di rete per eseguire query e mutazioni. Configura il tuo RelayEnvironment in questo modo:

import { Environment, Network, RecordSource, Store } from "relay-runtime";

// Definisci la funzione per inviare richieste al server GraphQL
function fetchQuery(operation, variables) {
  return fetch("http://localhost:4000/graphql", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      query: operation.text,
      variables,
    }),
  }).then((response) => response.json());
}

// Crea l'ambiente di rete di Relay
const environment = new Environment({
  network: Network.create(fetchQuery),
  store: new Store(new RecordSource()),
});

export default environment;

Step 4: Creare il Primo Componente con Relay

Ora che l’ambiente Relay è configurato, possiamo creare il primo componente React che utilizza Relay per ottenere dati da un’API GraphQL.

1. Definisci una Query e un Frammento:

import React from "react";
import { graphql, useLazyLoadQuery } from "react-relay/hooks";

const PostQuery = graphql`
  query PostQuery {
    posts {
      id
      title
      author {
        name
      }
    }
  }
`;

export default function PostComponent() {
  const data = useLazyLoadQuery(PostQuery);

  return (
    <ul>
      {data.posts.map((post) => (
        <li key={post.id}>
          {post.title} by {post.author.name}
        </li>
      ))}
    </ul>
  );
}

2. Avvolgi l’App con l’Ambiente Relay:

import React from "react";
import { RelayEnvironmentProvider } from "react-relay/hooks";
import environment from "./RelayEnvironment";
import PostComponent from "./PostComponent";

export default function App() {
  return (
    <RelayEnvironmentProvider environment={environment}>
      <PostComponent />
    </RelayEnvironmentProvider>
  );
}

In questo esempio, Relay gestisce automaticamente la query GraphQL PostQuery e si assicura che i dati siano aggiornati e disponibili per il componente React.

5. Frammenti in Relay

Una delle caratteristiche chiave di Relay è l’uso dei frammenti per specificare le dipendenze sui dati a livello di componente. I frammenti consentono a ciascun componente di dichiarare quali dati sono necessari, migliorando la modularità e la riutilizzabilità.

Esempio di Frammento

import { graphql } from "react-relay";

const PostFragment = graphql`
  fragment PostFragment on Post {
    id
    title
    author {
      name
    }
  }
`;

I frammenti possono essere composti in query più grandi o in altri frammenti, semplificando la gestione delle dipendenze sui dati a livello di componente.

6. Mutazioni in Relay Modern

Relay Modern gestisce le mutazioni in modo efficiente, consentendo di aggiornare lo stato dell’interfaccia utente in modo ottimistico prima che il server confermi l’operazione.

Esempio di Mutazione

import { commitMutation, graphql } from "react-relay";

const mutation = graphql`
  mutation AddPostMutation($input: AddPostInput!) {
    addPost(input: $input) {
      post {
        id
        title
      }
    }
  }
`;

function commit(environment, input) {
  return commitMutation(environment, {
    mutation,
    variables: { input },
    optimisticResponse: {
      addPost: {
        post: {
          id: "temp-id",
          title: input.title,
        },
      },
    },
    onCompleted: (response, errors) => {
      console.log("Risposta mutazione completata:", response);
    },
    onError: (err) => console.error(err),
  });
}

Le mutazioni ottimistiche consentono di aggiornare immediatamente l’interfaccia utente senza attendere la conferma del server, migliorando l’esperienza utente.

Conclusione

Relay Modern è una soluzione avanzata per la gestione dei dati nelle applicazioni React basate su GraphQL, offrendo funzionalità potenti come il caching, il precaricamento e le mutazioni ottimistiche. È particolarmente adatto per applicazioni su larga scala, dove la gestione efficiente delle query e dello stato è fondamentale. Grazie alla sua integrazione nativa con React e GraphQL, Relay Modern ti permette di costruire applicazioni performanti, scalabili e facili da mantenere.