Back cart with GraphQL storage

app/pages/cart.vue

@@ -16,6 +16,8 @@ const deliveryAddressesQuery = useQuery(MyDeliveryAddressesDocument);
 
 const {
   items: cartItems,
+  fetchCart,
+  selectedDeliveryAddressId,
   totalPositions,
   totalItems,
   totalVolume,
@@ -23,9 +25,9 @@ const {
   decrementQuantity,
   removeProduct,
   clearCart,
+  setDeliveryAddress,
 } = useClientCart();
 
-const selectedDeliveryAddressId = ref('');
 const sending = ref(false);
 const success = ref('');
 const errorMessage = ref('');
@@ -35,9 +37,11 @@ const hasDeliveryAddresses = computed(() => deliveryAddresses.value.length > 0);
 
 watch(
   deliveryAddresses,
-  (addresses) => {
+  async (addresses) => {
     if (addresses.length < 1) {
-      selectedDeliveryAddressId.value = '';
+      if (selectedDeliveryAddressId.value) {
+        await setDeliveryAddress(null);
+      }
       return;
     }
 
@@ -47,11 +51,15 @@ watch(
     }
 
     const defaultAddress = addresses.find((address) => address.isDefault);
-    selectedDeliveryAddressId.value = defaultAddress?.id || addresses[0]?.id || '';
+    await setDeliveryAddress(defaultAddress?.id || addresses[0]?.id || null);
   },
   { immediate: true },
 );
 
+onMounted(() => {
+  void fetchCart(true);
+});
+
 function lineVolume(productId: string) {
   const item = cartItems.value.find((entry) => entry.productId === productId);
   if (!item) {
@@ -64,19 +72,25 @@ function lineVolume(productId: string) {
 function increment(productId: string) {
   success.value = '';
   errorMessage.value = '';
-  incrementQuantity(productId);
+  void incrementQuantity(productId);
 }
 
 function decrement(productId: string) {
   success.value = '';
   errorMessage.value = '';
-  decrementQuantity(productId);
+  void decrementQuantity(productId);
 }
 
 function removeFromCart(productId: string) {
   success.value = '';
   errorMessage.value = '';
-  removeProduct(productId);
+  void removeProduct(productId);
+}
+
+function selectDeliveryAddress(addressId: string) {
+  success.value = '';
+  errorMessage.value = '';
+  void setDeliveryAddress(addressId);
 }
 
 async function submitCart() {
@@ -126,7 +140,7 @@ async function submitCart() {
   }
 
   sending.value = false;
-  clearCart();
+  await clearCart();
   success.value = `Отправлено заявок: ${createdCodes.length}. Статус: уточнение цены.`;
 }
 </script>
@@ -160,11 +174,11 @@ async function submitCart() {
           class="flex cursor-pointer items-start gap-3 rounded-2xl bg-white p-3 transition hover:shadow-md"
         >
           <input
-            v-model="selectedDeliveryAddressId"
             type="radio"
             name="delivery-address"
             class="radio radio-success mt-1"
-            :value="address.id"
+            :checked="selectedDeliveryAddressId === address.id"
+            @change="selectDeliveryAddress(address.id)"
           >
           <span>
             <span class="block font-semibold text-[#123824]">