PricingLoginStart free
tRPC End-to-End Type Safe APIs · Урок

Оптимистичные обновления с мутациями tRPC

Сделайте интерфейс Next.js мгновенным на вид, применяя оптимистичные обновления к мутациям tRPC и корректно откатывая их при сбое запроса.

Урок 4 из 413 шагов

«Оптимистичные обновления с мутациями tRPC» — бесплатный урок tRPC End-to-End Type Safe APIs на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения tRPC End-to-End Type Safe APIs, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс tRPC End-to-End Type Safe APIs содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

Why Optimistic Updates

When a user clicks a button, waiting for the server feels slow. Optimistic updates update the UI immediately, assuming the mutation will succeed, then reconcile with the real server response.

tRPC pairs perfectly with React Query, which handles the cache mechanics for you.

Anatomy of a tRPC Mutation

A mutation hook gives you mutate, isPending, and lifecycle callbacks: onMutate, onError, onSettled.

Optimistic logic lives in these callbacks.

const mutation = trpc.todo.add.useMutation();
mutation.mutate({ text: 'Buy milk' });

Getting the Query Utils

To touch the cache you need the tRPC utils object. It exposes per-query cancel, get, and set methods that mirror React Query.

const utils = trpc.useUtils();

Cancel In-Flight Queries

Inside onMutate, first cancel any outgoing refetches so they do not overwrite your optimistic value.

onMutate: async (newTodo) => {
  await utils.todo.list.cancel();
}

Snapshot the Previous Value

Save the current cache so you can roll back if the mutation fails.

const previous = utils.todo.list.getData();

Apply the Optimistic Change

Write the expected new state into the cache with setData. The UI updates instantly.

utils.todo.list.setData(undefined, (old) =>
  old ? [...old, { id: 'temp', text: newTodo.text }] : old
);

Return a Rollback Context

Return the snapshot from onMutate. React Query passes it to onError as context.

return { previous };

Roll Back on Error

If the server rejects the mutation, restore the snapshot so the UI matches reality.

onError: (err, newTodo, context) => {
  utils.todo.list.setData(undefined, context?.previous);
}

Reconcile on Settled

Whether it succeeds or fails, invalidate the query in onSettled so the cache resyncs with the server truth.

onSettled: () => {
  utils.todo.list.invalidate();
}

Putting It Together

The full optimistic mutation wires every callback in one place.

const add = trpc.todo.add.useMutation({
  onMutate: async (n) => {
    await utils.todo.list.cancel();
    const previous = utils.todo.list.getData();
    utils.todo.list.setData(undefined, (o) => o ? [...o, { id: 'temp', text: n.text }] : o);
    return { previous };
  },
  onError: (e, n, ctx) => utils.todo.list.setData(undefined, ctx?.previous),
  onSettled: () => utils.todo.list.invalidate(),
});

Best Practices

Keep optimistic updates safe:

  • Always cancel in-flight queries first
  • Always snapshot before mutating
  • Use a temporary id you can replace later
  • Invalidate on settle to avoid drift

Quick Check

Test your optimistic update knowledge.

Ответь в интерактивном уроке

Recap

You implemented optimistic updates with tRPC and React Query:

  • Cancel queries, snapshot, then setData in onMutate
  • Restore the snapshot in onError
  • Invalidate in onSettled

Your UI now feels instant while staying consistent with the server.

Можно начать бесплатно

Изучай tRPC End-to-End Type Safe APIs с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
10
Уроки
40
Начать учиться бесплатноПосмотреть полный курс

Часто задаваемые вопросы

Урок «Оптимистичные обновления с мутациями tRPC» бесплатный?

Да — полный текст урока «Оптимистичные обновления с мутациями tRPC» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс tRPC End-to-End Type Safe APIs, подпишись на CoddyKit PRO. Курс tRPC End-to-End Type Safe APIs содержит 4 уроков всего.

Чему я научусь в уроке «Оптимистичные обновления с мутациями tRPC»?

Сделайте интерфейс Next.js мгновенным на вид, применяя оптимистичные обновления к мутациям tRPC и корректно откатывая их при сбое запроса. Ты практикуешь tRPC End-to-End Type Safe APIs с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать tRPC End-to-End Type Safe APIs?

Предыдущий опыт не требуется. tRPC End-to-End Type Safe APIs на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Оптимистичные обновления с мутациями tRPC»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке tRPC End-to-End Type Safe APIs?

Да. Каждый урок tRPC End-to-End Type Safe APIs включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. tRPC с маршрутизатором приложений Next.js
  2. Расширенная интеграция React Query
  3. Серверные компоненты и получение данных tRPC
  4. Оптимистичные обновления с мутациями tRPC
← Назад к tRPC End-to-End Type Safe APIs