From fe009cd46138b7861f81cb5b200f1a03247f67c8 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Thu, 3 Jul 2025 22:23:06 +0200 Subject: [PATCH 1/2] Refactor cart store to improve Apollo cache updates Switches from useAsyncQuery to useQuery for cart data with improved fetch policies. Removes refetchQueries from mutations and instead explicitly refetches the cart after add/update operations to ensure cache consistency. Also updates error handling to always refetch the cart on mutation errors. --- store/useCart.js | 31 ++++++++++++++++++------------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/store/useCart.js b/store/useCart.js index e0a03d41..c7ad56b9 100644 --- a/store/useCart.js +++ b/store/useCart.js @@ -1,6 +1,6 @@ import { defineStore } from "pinia"; import { computed, ref, watch } from "vue"; -import { useMutation } from "@vue/apollo-composable"; +import { useQuery, useMutation } from "@vue/apollo-composable"; import ADD_TO_CART_MUTATION from "@/apollo/mutations/ADD_TO_CART_MUTATION.gql"; import UPDATE_CART_MUTATION from "@/apollo/mutations/UPDATE_CART_MUTATION.gql"; @@ -13,11 +13,14 @@ export const useCart = defineStore( const cartTotals = ref({}); const { - data: cartData, - pending: loading, + result: cartData, + loading, error, - refresh: refetchCart, - } = useAsyncQuery(GET_CART_QUERY); + refetch: refetchCart, + } = useQuery(GET_CART_QUERY, {}, { + fetchPolicy: 'cache-and-network', + notifyOnNetworkStatusChange: true, + }); watch( cartData, @@ -62,15 +65,9 @@ export const useCart = defineStore( }; const { mutate: addToCartMutation, loading: addToCartLoading } = - useMutation(ADD_TO_CART_MUTATION, { - refetchQueries: [{ query: GET_CART_QUERY }], - awaitRefetchQueries: true, - }); + useMutation(ADD_TO_CART_MUTATION); const { mutate: updateCartMutation, loading: updateCartLoading } = - useMutation(UPDATE_CART_MUTATION, { - refetchQueries: [{ query: GET_CART_QUERY }], - awaitRefetchQueries: true, - }); + useMutation(UPDATE_CART_MUTATION); const addToCart = async (product, quantity = 1) => { try { @@ -80,8 +77,12 @@ export const useCart = defineStore( quantity: quantity, }, }); + // Force refetch to ensure cache is updated + await refetchCart(); } catch (err) { console.error("Error adding to cart:", err); + // Still refetch on error to ensure consistency + await refetchCart(); } }; @@ -92,8 +93,12 @@ export const useCart = defineStore( items: Array.isArray(key) ? key : [{ key, quantity }], }, }); + // Force refetch to ensure cache is updated + await refetchCart(); } catch (err) { console.error("Error updating cart item quantity:", err); + // Still refetch on error to ensure consistency + await refetchCart(); } }; From 64078df2da0f10d65055cef152ea8a5cc883eb74 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Thu, 3 Jul 2025 22:26:31 +0200 Subject: [PATCH 2/2] Refactor useQuery call formatting in useCart.js Reformatted the useQuery call to improve readability by placing each argument on a separate line and updating quote style for consistency. --- store/useCart.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/store/useCart.js b/store/useCart.js index c7ad56b9..e64d3cfe 100644 --- a/store/useCart.js +++ b/store/useCart.js @@ -17,10 +17,14 @@ export const useCart = defineStore( loading, error, refetch: refetchCart, - } = useQuery(GET_CART_QUERY, {}, { - fetchPolicy: 'cache-and-network', - notifyOnNetworkStatusChange: true, - }); + } = useQuery( + GET_CART_QUERY, + {}, + { + fetchPolicy: "cache-and-network", + notifyOnNetworkStatusChange: true, + }, + ); watch( cartData,