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 يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى tRPC End-to-End Type Safe APIs