الهيدر يعرف إن السلة اتغيرت

الهيدر فيه Cart Badge، وصفحة Cart، و Cart Summary. كلهم محتاجين نفس بيانات السلة.

بدل ما add-to-cart تبعت Props للهيدر والصفحة، كل واحد يقرأ نفس الـ Query Key.

import { useQuery } from '@tanstack/react-query';import { cartQueries } from '@/entities/cart';export function CartBadge() {  const { data: cart } = useQuery(    cartQueries.current()  );  const count =    cart?.items.reduce(      (total, item) => total + item.quantity,      0    ) ?? 0;  return <span>{count}</span>;}

لما عملية الإضافة تنجح، invalidateQueries بتعلّم بيانات السلة إنها محتاجة تحديث. React Query تعيد جلبها لو الـ Query نشطة، وتحدّث كل المكونات المشتركة في نفس الكاش.

• الهيدر يعرض العدد الجديد.
• صفحة Cart تعرض العناصر الجديدة.
• Cart Summary يعرض الإجمالي المحدّث.

مفيش اعتماد مباشر بين المكونات دي وبين Feature الإضافة.

خلّصت الفصل لما

• شارة السلة تقرأ cartQueries.current
• نفس المفتاح بين الشارة والصفحة والملخص
• التحديث ييجي من invalidate مش من props بين الفيتشر والهيدر