Fix loading user and cart information (#6265)

* Fix loading user and cart information * Add changelogs
vuestorefront · Sep 3, 2021 · f20d9f9 · f20d9f9
1 parent 8eef208
commit f20d9f9
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 3 deletions.
diff --git a/packages/commercetools/composables/src/useUser/factoryParams.ts b/packages/commercetools/composables/src/useUser/factoryParams.ts
@@ -15,6 +15,7 @@ const load = async (context: Context, {customQuery}) => {
   }
 
   const profile = await context.$ct.api.getMe({ customer: true }, customQuery);
+  context.setCart(profile.data.me.activeCart);
   return profile.data.me.customer;
 };
 

diff --git a/packages/commercetools/theme/components/AppHeader.vue b/packages/commercetools/theme/components/AppHeader.vue
@@ -97,6 +97,7 @@
 <script>
 import { SfHeader, SfImage, SfIcon, SfButton, SfBadge, SfSearchBar, SfOverlay, SfMenuItem, SfLink } from '@storefront-ui/vue';
 import { useUiState } from '~/composables';
+import { onSSR } from '@vue-storefront/core';
 import { useCart, useUser, cartGetters } from '@vue-storefront/commercetools';
 import { computed, ref, onBeforeUnmount, watch } from '@vue/composition-api';
 import { useUiHelpers } from '~/composables';
@@ -131,7 +132,7 @@ export default {
     const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal, isMobileMenuOpen } = useUiState();
     const { setTermForUrl, getFacetsFromURL } = useUiHelpers();
     const { isAuthenticated, load: loadUser } = useUser();
-    const { cart } = useCart();
+    const { cart, load: loadCart } = useCart();
     const term = ref(getFacetsFromURL().phrase);
     const isSearchOpen = ref(false);
     const searchBarRef = ref(null);
@@ -145,7 +146,10 @@ export default {
 
     const accountIcon = computed(() => isAuthenticated.value ? 'profile_fill' : 'profile');
 
-    loadUser();
+    onSSR(async () => {
+      await loadUser();
+      await loadCart();
+    });
 
     // TODO: https://github.com/DivanteLtd/vue-storefront/issues/4927
     const handleAccountClick = async () => {

diff --git a/packages/core/docs/changelog/6265.js b/packages/core/docs/changelog/6265.js
@@ -0,0 +1,15 @@
+module.exports = {
+  description: 'Fix loading user and cart information',
+  link: 'https://github.com/vuestorefront/vue-storefront/pull/6265/',
+  isBreaking: true,
+  breakingChanges: [
+    {
+      module: 'Base theme',
+      before: '`loadCart` was called directly inside `setup` method in `CartSidebar.vue` component',
+      after: '`loadCart` is called inside `onSSR` callback in `CartSidebar.vue` component',
+      comment: 'Calling `loadCart` directly inside `setup` method caused hydration issues, since cart information was not properly loaded during SSR'
+    }
+  ],
+  author: 'Filip Sobol',
+  linkToGitHubAccount: 'https://github.com/filipsobol'
+};
diff --git a/packages/core/docs/commercetools/changelog/6265.js b/packages/core/docs/commercetools/changelog/6265.js
@@ -0,0 +1,15 @@
+module.exports = {
+  description: 'Fix loading user and cart information',
+  link: 'https://github.com/vuestorefront/vue-storefront/pull/6265/',
+  isBreaking: true,
+  breakingChanges: [
+    {
+      module: 'commercetools theme',
+      before: '`loadUser` was called directly inside `setup` method in `CartSidebar.vue` component',
+      after: '`loadUser` is called inside `onSSR` callback in `CartSidebar.vue` component',
+      comment: 'Calling `loadUser` directly inside `setup` method caused hydration issues, since cart information was not properly loaded during SSR. Additionally cart will now be automatically updated after calling `load` from the `useUser` composable, the same way as it happens when calling `logIn`, `logOut` and `register`.'
+    }
+  ],
+  author: 'Filip Sobol',
+  linkToGitHubAccount: 'https://github.com/filipsobol'
+};
diff --git a/packages/core/nuxt-theme-module/theme/components/CartSidebar.vue b/packages/core/nuxt-theme-module/theme/components/CartSidebar.vue
@@ -121,6 +121,7 @@ import {
   SfQuantitySelector
 } from '@storefront-ui/vue';
 import { computed } from '@vue/composition-api';
+import { onSSR } from '@vue-storefront/core';
 import { useCart, useUser, cartGetters } from '<%= options.generate.replace.composables %>';
 import { useUiState } from '~/composables';
 
@@ -144,7 +145,10 @@ export default {
     const products = computed(() => cartGetters.getItems(cart.value));
     const totals = computed(() => cartGetters.getTotals(cart.value));
     const totalItems = computed(() => cartGetters.getTotalItems(cart.value));
-    loadCart();
+
+    onSSR(async () => {
+      await loadCart();
+    });
 
     return {
       loading,