`Cache Normalizat în Clienții GraphQL: Apollo Client In-Memory Cache și Fetch Policies` în GraphQL

Ghid complet pentru cache-ul din Apollo Client: mecanismul de normalizare bazat pe __typename și id, diferența dintre fetchPolicy: cache-first și network-only, și actualizările optimiste (Optimistic UI).

Sintaxă

const client = new ApolloClient({ cache: new InMemoryCache() }); fetchPolicy: 'cache-and-network'

Spre deosebire de un cache HTTP REST care memorează URL-uri întregi, InMemoryCache din Apollo Client descompune răspunsurile primite în entități unice identificate prin formula __typename:id. Dacă un obiect este actualizat într-o mutație, toate ecranele din aplicație care afișează acel obiect se actualizează automat fără un nou apel de rețea!

Politici de preluare (Fetch Policies) în Apollo Client

import { useQuery, gql } from '@apollo/client';

const GET_NOTIFICARI = gql`
    query GetNotificari {
        notificari {
            id
            mesaj
            citit
        }
    }
`;

function ComponentaNotificari() {
    const { data, loading } = useQuery(GET_NOTIFICARI, {
        // Politica 'cache-and-network':
        // 1. Returnează instant datele existente în cache pentru experiență fluidă.
        // 2. Lansează în fundal cererea de rețea și actualizează UI-ul când sosește răspunsul proaspăt.
        fetchPolicy: 'cache-and-network',
        pollInterval: 10000 // re-interogare la fiecare 10 secunde
    });

    if (loading && !data) return <p>Se încarcă...</p>;
    return <ul>{data?.notificari.map(n => <li key={n.id}>{n.mesaj}</li>)}</ul>;
}