تحديث السلة قبل رد السيرفر

import { queryOptions } from '@tanstack/react-query';import { getCart } from '../api/get-cart';export const cartKeys = {  all: ['cart'] as const,  current: () => [...cartKeys.all, 'current'] as const,};export const cartQueries = {  current: () =>    queryOptions({      queryKey: cartKeys.current(),      queryFn: getCart,    }),};

export interface CartItem {  productId: string;  quantity: number;  price: number;}export interface Cart {  items: CartItem[];}

import {  useMutation,  useQueryClient,} from '@tanstack/react-query';import { addCartItem } from '@/entities/cart';import { cartKeys } from '@/entities/cart/model/queries';import type { Cart } from '@/entities/cart/model/types';type AddCartItemInput = {  productId: string;  quantity: number;};export function useAddToCart() {  const queryClient = useQueryClient();  const queryKey = cartKeys.current();  return useMutation({    mutationFn: (input: AddCartItemInput) =>      addCartItem(input),    onMutate: async (input) => {      await queryClient.cancelQueries({        queryKey,      });      const previousCart =        queryClient.getQueryData<Cart>(queryKey);      if (previousCart) {        queryClient.setQueryData<Cart>(          queryKey,          (oldCart) => {            if (!oldCart) return oldCart;            const existingItem = oldCart.items.find(              (item) =>                item.productId === input.productId,            );            if (existingItem) {              return {                ...oldCart,                items: oldCart.items.map((item) =>                  item.productId === input.productId                    ? {                        ...item,                        quantity:                          item.quantity + input.quantity,                      }                    : item,                ),              };            }            return {              ...oldCart,              items: [                ...oldCart.items,                {                  productId: input.productId,                  quantity: input.quantity,                  price: 0,                },              ],            };          },        );      }      return { previousCart };    },    onError: (_error, _input, context) => {      if (context?.previousCart) {        queryClient.setQueryData(          queryKey,          context.previousCart,        );      }    },    onSettled: () =>      queryClient.invalidateQueries({        queryKey,      }),  });}

import { useAddToCart } from '../model/use-add-to-cart';export function AddToCartButton({  productId,}: {  productId: string;}) {  const mutation = useAddToCart();  return (    <button      disabled={mutation.isPending}      onClick={() =>        mutation.mutate({          productId,          quantity: 1,        })      }    >      {mutation.isPending        ? 'Adding...'        : 'Add to Cart'}    </button>  );}

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>;}