From f7a6be87a310425118b16a243ce168f9ea99437b Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 3 Jul 2025 20:07:14 +0200
Subject: [PATCH 1/2] Refactor cart fetching logic and improve error handling

Replaces the use of useQuery and refetch with a new fetchCart method using $apollo and useAsyncData for cart data retrieval. Updates cartUpdater.js to call fetchCart on plugin initialization instead of refetching on every route change. Improves error handling and simplifies cart clearing logic.
---
 plugins/cartUpdater.js | 15 ++--------
 store/useCart.js       | 65 +++++++++++++++++++++---------------------
 2 files changed, 36 insertions(+), 44 deletions(-)

diff --git a/plugins/cartUpdater.js b/plugins/cartUpdater.js
index a654f6ac..6ef602d6 100644
--- a/plugins/cartUpdater.js
+++ b/plugins/cartUpdater.js
@@ -1,15 +1,6 @@
 import { useCart } from "@/store/useCart";
 
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.hook("app:created", () => {
-    const cart = useCart();
-
-    cart.refetch();
-
-    // Refetch cart data on route change
-    nuxtApp.$router.beforeEach((_to, _from, next) => {
-      cart.refetch();
-      next();
-    });
-  });
+export default defineNuxtPlugin(async (nuxtApp) => {
+  const cart = useCart();
+  await cart.fetchCart();
 });
diff --git a/store/useCart.js b/store/useCart.js
index ef3e75b7..c6f873a4 100644
--- a/store/useCart.js
+++ b/store/useCart.js
@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
-import { useQuery, useMutation } from "@vue/apollo-composable";
-import { computed, ref, watch } from "vue";
+import { useMutation } from "@vue/apollo-composable";
+import { computed, ref } from "vue";
 
 import ADD_TO_CART_MUTATION from "@/apollo/mutations/ADD_TO_CART_MUTATION.gql";
 import UPDATE_CART_MUTATION from "@/apollo/mutations/UPDATE_CART_MUTATION.gql";
@@ -14,21 +14,32 @@ export const useCart = defineStore(
     const error = ref(null);
     const cartTotals = ref({});
 
-    const { result: cartResult, refetch: refetchCart } = useQuery(
-      GET_CART_QUERY,
-      null,
-      {
-        fetchPolicy: "network-only",
-      },
-    );
+    const { $apollo } = useNuxtApp();
 
-    watch(cartResult, (newCartResult) => {
-      if (newCartResult && newCartResult.cart) {
-        updateCartState(newCartResult.cart);
+    const fetchCart = async () => {
+      try {
+        const { data } = await useAsyncData("cart", async () => {
+          const { data } = await $apollo.client.query({
+            query: GET_CART_QUERY,
+            fetchPolicy: "network-only",
+          });
+          return data.cart;
+        });
+
+        if (data.value) {
+          updateCartState(data.value);
+        }
+      } catch (e) {
+        error.value = e;
       }
-    });
+    };
 
     const updateCartState = (newCart) => {
+      if (!newCart) {
+        cart.value = [];
+        cartTotals.value = {};
+        return;
+      }
       cart.value = newCart.contents.nodes.map((item) => ({
         key: item.key,
         product: item.product.node,
@@ -64,8 +75,9 @@ export const useCart = defineStore(
             quantity: quantity,
           },
         });
-        await refetchCart();
+        await fetchCart();
       } catch (err) {
+        error.value = err;
       } finally {
         loading.value = false;
       }
@@ -81,17 +93,16 @@ export const useCart = defineStore(
             items: [{ key, quantity }],
           },
         });
-        await refetchCart();
+        await fetchCart();
       } catch (err) {
-        await refetchCart();
+        error.value = err;
+        await fetchCart();
       } finally {
         loading.value = false;
       }
     };
 
     const removeProductFromCart = async (key) => {
-      loading.value = true;
-      error.value = null;
       try {
         const isLastItem = cart.value.length === 1;
         await updateCartItemQuantity(key, 0);
@@ -99,23 +110,13 @@ export const useCart = defineStore(
           await navigateTo("/");
         }
       } catch (err) {
-      } finally {
-        loading.value = false;
+        error.value = err;
       }
     };
 
     const clearCart = async () => {
-      loading.value = true;
-      error.value = null;
-      try {
-        for (const item of cart.value) {
-          await removeProductFromCart(item.key);
-        }
-      } catch (err) {
-      } finally {
-        loading.value = false;
-        await refetchCart();
-      }
+      const itemKeys = cart.value.map((item) => ({ key: item.key, quantity: 0 }));
+      await updateCartItemQuantity(itemKeys);
     };
 
     const cartQuantity = computed(() => {
@@ -142,7 +143,7 @@ export const useCart = defineStore(
       cartQuantity,
       cartSubtotal,
       cartTotal,
-      refetch: refetchCart,
+      fetchCart,
     };
   },
   {

From 9e847d449e7f1df8d817d663d9c7fad946a39f7e Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 3 Jul 2025 20:22:07 +0200
Subject: [PATCH 2/2] Refactor clearCart for improved readability

Reformatted the mapping in clearCart to use a multi-line object for better code clarity and consistency.
---
 store/useCart.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/store/useCart.js b/store/useCart.js
index c6f873a4..2e52493a 100644
--- a/store/useCart.js
+++ b/store/useCart.js
@@ -115,7 +115,10 @@ export const useCart = defineStore(
     };
 
     const clearCart = async () => {
-      const itemKeys = cart.value.map((item) => ({ key: item.key, quantity: 0 }));
+      const itemKeys = cart.value.map((item) => ({
+        key: item.key,
+        quantity: 0,
+      }));
       await updateCartItemQuantity(itemKeys);
     };