Библиотеки запросов и дедупликация

Библиотека запросов — это кэш, ключённый по query-ключу, и сам ключ — весь механизм. Ты не загружаешь данные в компонент; ты объявляешь «этот ключ отображается в этот fetcher», а библиотека владеет записью кэша. Каждый компонент, который просит тот же ключ, читает ту же запись. Эта единственная идея и даёт тебе дедупликацию, шеринг и инвалидацию бесплатно.

"use client";
import { useQuery } from "@tanstack/react-query";

function useUser(id: string) {
  return useQuery({
    queryKey: ["user", id],          // identity of the cached resource
    queryFn: () => fetch(`/api/users/${id}`).then((r) => r.json()),
    staleTime: 30_000,               // 30s: data is "fresh", no refetch
  });
}

Смонтируй useUser("42") в трёх компонентах — и ты не получишь три запроса. Библиотека видит один промис в полёте для ["user","42"] и отдаёт всем трём один результат. Это дедупликация запросов — первое, что иначе ты переизобрёл бы плохо.

Фоновая ревалидация — это stale-while-revalidate: мгновенно отдать кэшированное значение, перезапросить под капотом, подменить, когда свежее готово. Твой компонент никогда не блокируется на перезапросе, которого не просил. Когда запрос устаревает (прошёл staleTime) и что-то снова его триггерит — повторный монтаж, возврат фокуса окну, ручной invalidate, — библиотека немедленно возвращает кэшированные данные и запускает фоновый fetch. UI показывает последние известные-хорошие данные без спиннера, затем обновляется.

function UserName({ id }: { id: string }) {
  const { data, isPending, isFetching } = useUser(id);
  if (isPending) return <Skeleton />;          // first load, no cache yet
  // isFetching === true here means a *background* revalidation is running;
  // `data` is still the cached value, fully usable — no spinner needed
  return <span>{data.name}{isFetching && <Dot title="refreshing" />}</span>;
}

Заметь два разных состояния: isPending (данных нет вообще, показывай скелетон) против isFetching (данные есть, обновляются в фоне). Самописная загрузка схлопывает оба в один булев loading и мигает спиннером на каждой ревалидации. Библиотека их разделяет, потому что это разный UX.

Мутации не пишут в кэш напрямую — они инвалидируют ключи, а зависимые чтения сами ревалидируются. После записи истина — на сервере, поэтому правильный ход: пометить затронутые query-ключи устаревшими и дать библиотеке перезапросить. Ты объявляешь, какие ключи инвалидирует эта мутация; всё, что читает эти ключи, обновляется. Ты никогда вручную не лезешь в другие компоненты, чтобы «ещё и их копию обновить».

import { useMutation, useQueryClient } from "@tanstack/react-query";

function useRenameUser(id: string) {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: (name: string) =>
      fetch(`/api/users/${id}`, { method: "PATCH", body: JSON.stringify({ name }) }),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["user", id] });  // this user refetches
      qc.invalidateQueries({ queryKey: ["users"] });      // any list including them refetches
    },
  });
}

Один вызов invalidateQueries веером расходится на каждого потребителя этого ключа. Нет проброса нового значения через пропсы, нет Redux-экшена, рябью идущего через редьюсеры, — кэш единственный источник, а инвалидация единственный механизм синхронизации.

Повторы и ось отказов встроены — а режим отказа при отсутствии библиотеки — это продублированное серверное состояние. Библиотеки запросов повторяют упавшие запросы с backoff, выставляют error/isError и позволяют настроить число повторов на запрос. Ты получаешь настоящий путь ошибки, а не недоделанный try/catch в каждом компоненте. Но более глубокий выигрыш — в том, что ты перестаёшь делать: в тот момент, как ты копируешь загруженный ответ в useState или диспатчишь его в Redux, ты создал второй источник истины, который сервер может инвалидировать в любую секунду, — и теперь ты владеешь кодом синхронизации, который вечно расходится.

// ANTI-PATTERN: server data copied into client state, synced by hand
const [user, setUser] = useState<User | null>(null);
useEffect(() => { fetch(`/api/users/${id}`).then(r => r.json()).then(setUser); }, [id]);
async function rename(name: string) {
  await fetch(`/api/users/${id}`, { method: "PATCH", body: JSON.stringify({ name }) });
  setUser((u) => u && { ...u, name }); // optimistic guess — now this copy can drift from the server,
                                       // and any OTHER component holding its own copy won't update at all
}

Этот setUser — ловушка: это догадка о серверном состоянии, она не распространяется на другие копии, и здесь нет дедупликации, нет ревалидации, нет повторов. Библиотека заменяет всё это на «прочитай ключ, инвалидируй ключ».