refactor(general): refactor how and where the cart is loaded

packages/api-client/src/api/cartTotalQty/cartTotalQty.ts

@@ -0,0 +1,9 @@
+import gql from 'graphql-tag';
+
+export default gql`
+  query cart($cartId: String!) {
+    cart(cart_id:$cartId) {
+      total_quantity
+    }
+  }
+`;

packages/api-client/src/api/cartTotalQty/index.ts

@@ -0,0 +1,25 @@
+import { ApolloQueryResult } from '@apollo/client/core';
+import { CustomQuery } from '@vue-storefront/core';
+import { CartQuery, CartQueryVariables } from '../../types/GraphQL';
+import cart from './cartTotalQty';
+import { Context } from '../../types/context';
+
+export default async (
+  context: Context,
+  cartId: string,
+  customQuery: CustomQuery = { cart: 'cart' },
+): Promise<ApolloQueryResult<CartQuery>> => {
+  const { cart: cartGQL } = context.extendQuery(
+    customQuery,
+    {
+      cart: {
+        query: cart,
+        variables: { cartId },
+      },
+    },
+  );
+  return context.client.query<CartQuery, CartQueryVariables>({
+    query: cartGQL.query,
+    variables: cartGQL.variables,
+  });
+};

packages/api-client/src/api/index.ts

@@ -8,6 +8,7 @@ export { default as addVirtualProductsToCart } from './addVirtualProductsToCart'
 export { default as applyCouponToCart } from './applyCouponToCart';
 export { default as availableStores } from './availableStores';
 export { default as cart } from './cart';
+export { default as cartTotalQty } from './cartTotalQty';
 export { default as categoryList } from './categoryList';
 export { default as categorySearch } from './categorySearch';
 export { default as changeCustomerPassword } from './changeCustomerPassword';

packages/api-client/src/types/API.ts

@@ -212,6 +212,11 @@ export interface MagentoApiMethods {
     customQuery?: CustomQuery
   ): Promise<ApolloQueryResult<CartQuery>>;
 
+  cartTotalQty(
+    cartId: string,
+    customQuery?: CustomQuery
+  ): Promise<ApolloQueryResult<CartQuery>>;
+
   categoryList(
     categoryFilter?: CategoryListQueryVariables,
     customQuery?: CustomQuery

packages/composables/src/composables/useCart/index.ts

@@ -384,6 +384,12 @@ const factoryParams: UseCartFactoryParams<Cart, CartItem, Product> = {
       product,
     },
   ) => !!currentCart?.items.find((cartItem) => cartItem?.product?.uid === product.uid),
+  loadTotalQty: async (context: Context) => {
+    const apiState = context.$magento.config.state;
+    const { data } : any = await context.$magento.api.cartTotalQty(apiState.getCartId());
+
+    return data.cart.total_quantity;
+  },
 };
 
 export default useCartFactory<Cart, CartItem, Product>(factoryParams);

packages/composables/src/factories/useCartFactory.ts

@@ -1,10 +1,12 @@
 import {
-  CustomQuery, UseCart, Context, FactoryParams, UseCartErrors, PlatformApi, sharedRef, Logger, configureFactoryParams, ComposableFunctionArgs,
+  UseCart as UseCartCore, Context, FactoryParams, UseCartErrors as UseCartErrorsCore, PlatformApi, sharedRef, Logger, configureFactoryParams, ComposableFunctionArgs,
 } from '@vue-storefront/core';
 import { computed, Ref } from '@vue/composition-api';
+import { ComputedProperty, CustomQuery } from '@vue-storefront/core/lib/src/types';
 
 export interface UseCartFactoryParams<CART, CART_ITEM, PRODUCT, API extends PlatformApi = any> extends FactoryParams<API> {
   load: (context: Context, params: ComposableFunctionArgs<{ realCart?: boolean; }>) => Promise<CART>;
+  loadTotalQty: (context: Context) => Promise<number>;
   addItem: (
     context: Context,
     params: ComposableFunctionArgs<{
@@ -27,11 +29,22 @@ export interface UseCartFactoryParams<CART, CART_ITEM, PRODUCT, API extends Plat
   isInCart: (context: Context, params: { currentCart: CART; product: PRODUCT }) => boolean;
 }
 
+export interface UseCart<CART, CART_ITEM, PRODUCT, API extends PlatformApi = any> extends UseCartCore<CART, CART_ITEM, PRODUCT, API> {
+  totalQuantity: ComputedProperty<number>,
+  loadTotalQty(params: {
+    customQuery?: CustomQuery;
+  }): Promise<void>;
+}
+export interface UseCartErrors extends UseCartErrorsCore {
+  loadTotalQty: Error
+}
+
 export const useCartFactory = <CART, CART_ITEM, PRODUCT, API extends PlatformApi = any>(
   factoryParams: UseCartFactoryParams<CART, CART_ITEM, PRODUCT, API>,
 ) => function useCart(): UseCart<CART, CART_ITEM, PRODUCT, API> {
   const loading: Ref<boolean> = sharedRef(false, 'useCart-loading');
   const cart: Ref<CART> = sharedRef(null, 'useCart-cart');
+  const totalQuantity: Ref<number> = sharedRef(0, 'useCart-totalQuantity');
   const error: Ref<UseCartErrors> = sharedRef({
     addItem: null,
     removeItem: null,
@@ -40,6 +53,7 @@ export const useCartFactory = <CART, CART_ITEM, PRODUCT, API extends PlatformApi
     clear: null,
     applyCoupon: null,
     removeCoupon: null,
+    loadTotalQty: null,
   }, 'useCart-error');
 
   // eslint-disable-next-line no-underscore-dangle,@typescript-eslint/naming-convention
@@ -78,6 +92,7 @@ export const useCartFactory = <CART, CART_ITEM, PRODUCT, API extends PlatformApi
       });
       error.value.addItem = null;
       cart.value = updatedCart;
+      totalQuantity.value = updatedCart.total_quantity;
     } catch (err) {
       error.value.addItem = err;
       Logger.error('useCart/addItem', err);
@@ -101,6 +116,7 @@ export const useCartFactory = <CART, CART_ITEM, PRODUCT, API extends PlatformApi
       });
       error.value.removeItem = null;
       cart.value = updatedCart;
+      totalQuantity.value = updatedCart.total_quantity;
     } catch (err) {
       error.value.removeItem = err;
       Logger.error('useCart/removeItem', err);
@@ -130,6 +146,7 @@ export const useCartFactory = <CART, CART_ITEM, PRODUCT, API extends PlatformApi
         });
         error.value.updateItemQty = null;
         cart.value = updatedCart;
+        totalQuantity.value = updatedCart.total_quantity;
       } catch (err) {
         error.value.updateItemQty = err;
         Logger.error('useCart/updateItemQty', err);
@@ -150,11 +167,14 @@ export const useCartFactory = <CART, CART_ITEM, PRODUCT, API extends PlatformApi
       loading.value = false;
       error.value.load = null;
       cart.value = { ...cart.value };
+
       return;
     }
     try {
       loading.value = true;
-      cart.value = await _factoryParams.load({ customQuery });
+      const loadedCart = await _factoryParams.load({ customQuery });
+      cart.value = loadedCart;
+      totalQuantity.value = loadedCart.total_quantity;
       error.value.load = null;
     } catch (err) {
       error.value.load = err;
@@ -164,6 +184,21 @@ export const useCartFactory = <CART, CART_ITEM, PRODUCT, API extends PlatformApi
     }
   };
 
+  const loadTotalQty = async ({ customQuery } = { customQuery: undefined }) => {
+    Logger.debug('useCart.loadTotalQty');
+
+    try {
+      loading.value = true;
+      totalQuantity.value = await _factoryParams.loadTotalQty({ customQuery });
+      error.value.loadTotalQty = null;
+    } catch (err) {
+      error.value.loadTotalQty = err;
+      Logger.error('useCart/loadTotalQty', err);
+    } finally {
+      loading.value = false;
+    }
+  };
+
   const clear = async () => {
     Logger.debug('useCart.clear');
 
@@ -172,6 +207,7 @@ export const useCartFactory = <CART, CART_ITEM, PRODUCT, API extends PlatformApi
       const updatedCart = await _factoryParams.clear({ currentCart: cart.value });
       error.value.clear = null;
       cart.value = updatedCart;
+      totalQuantity.value = updatedCart.total_quantity;
     } catch (err) {
       error.value.clear = err;
       Logger.error('useCart/clear', err);
@@ -236,9 +272,11 @@ export const useCartFactory = <CART, CART_ITEM, PRODUCT, API extends PlatformApi
     api: _factoryParams.api,
     setCart,
     cart: computed(() => cart.value),
+    totalQuantity,
     isInCart,
     addItem,
     load,
+    loadTotalQty,
     removeItem,
     clear,
     updateItemQty,

packages/theme/components/AppHeader.vue

@@ -171,7 +171,6 @@ import {
   SfOverlay,
 } from '@storefront-ui/vue';
 import {
-  cartGetters,
   categoryGetters,
   useCart,
   useCategory,
@@ -187,8 +186,8 @@ import {
   defineComponent,
   useRouter,
   useContext,
+  useAsync,
 } from '@nuxtjs/composition-api';
-import { onSSR } from '@vue-storefront/core';
 import { clickOutside } from '@storefront-ui/vue/src/utilities/directives/click-outside/click-outside-directive.js';
 import {
   mapMobileObserver,
@@ -221,12 +220,11 @@ export default defineComponent({
     const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } = useUiState();
     const { setTermForUrl, getFacetsFromURL, getAgnosticCatLink } = useUiHelpers();
     const { isAuthenticated } = useUser();
-    const { cart } = useCart();
+    const { totalQuantity, loadTotalQty } = useCart();
     const { wishlist } = useWishlist('GlobalWishlist');
     const {
       result: searchResult,
       search: productsSearch,
-      // loading: productsLoading,
     } = useFacet('AppHeader:Products');
     const {
       result: categories,
@@ -245,11 +243,6 @@ export default defineComponent({
     const wishlistHasProducts = computed(() => wishlistGetters.getTotalItems(wishlist.value) > 0);
     const wishlistItemsQty = computed(() => wishlistGetters.getTotalItems(wishlist.value));
 
-    const cartTotalItems = computed(() => {
-      const count = cartGetters.getTotalItems(cart.value);
-      return count ? count.toString() : null;
-    });
-
     const accountIcon = computed(() => (isAuthenticated.value ? 'profile_fill' : 'profile'));
 
     const categoryTree = computed(() => categoryGetters.getCategoryTree(categoryList.value?.[0])?.items.filter((c) => c.count > 0));
@@ -262,10 +255,8 @@ export default defineComponent({
       }
     };
 
-    onSSR(async () => {
-      await categoriesListSearch({
-        pageSize: 20,
-      });
+    useAsync(async () => {
+      await Promise.all([loadTotalQty(), categoriesListSearch({ pageSize: 20 })]);
     });
 
     const showSearch = () => {
@@ -332,7 +323,7 @@ export default defineComponent({
 
     return {
       accountIcon,
-      cartTotalItems,
+      cartTotalItems: totalQuantity,
       categoryTree,
       closeOrFocusSearchBar,
       closeSearch,