fix: ssr context from cookies (#172)

.changeset/five-icons-study.md

@@ -0,0 +1,6 @@
+---
+"vue-demo-store": patch
+"@shopware-pwa/nuxt3-module": patch
+---
+
+Proper SSR context for requests. Logged in client have hydrated data on reload.

packages/composables/src/useAddress.ts

@@ -65,11 +65,6 @@ export function useAddress(): UseAddressReturn {
   );
   provide("swCustomerAddresses", _storeCustomerAddresses);
 
-  watch(isLoggedIn, () => {
-    _storeCustomerAddresses.value = [];
-    loadCustomerAddresses();
-  });
-
   /**
    * Get customer address list
    */

packages/nuxt3-module/plugin.ts

@@ -13,6 +13,18 @@ const ShopwarePlugin = {
   install(app, options) {
     const runtimeConfig = useRuntimeConfig();
 
+    const contextToken = useCookie("sw-context-token", {
+      maxAge: 60 * 60 * 24 * 365,
+      sameSite: "Lax",
+      path: "/",
+    });
+    const languageId = useCookie("sw-language-id", {
+      maxAge: 60 * 60 * 24 * 365,
+      sameSite: "Lax",
+      path: "/",
+    });
+
+    // workaround for SSG case, where cookies contains additional dot in name, related: https://github.com/shopware/frontends/commit/ee5b8a71e1e016c973a7852efa3b85a136e6ea14
     const cookieContextToken = Cookies.get("sw-context-token");
     const cookieLanguageId = Cookies.get("sw-language-id");
 
@@ -35,14 +47,16 @@ const ShopwarePlugin = {
         password:
           "<%=  options.shopwareApiClient.auth ? options.shopwareApiClient.auth.password : undefined %>",
       },
-      contextToken: cookieContextToken,
-      languageId: cookieLanguageId,
+      contextToken: contextToken.value || cookieContextToken,
+      languageId: languageId.value || cookieLanguageId,
     });
     /**
      * Save current contextToken when its change
      */
     instance.onConfigChange(({ config }) => {
       try {
+        contextToken.value = config.contextToken;
+        languageId.value = config.languageId;
         Cookies.set("sw-context-token", config.contextToken || "", {
           expires: 365, //days
           sameSite: "Lax",

templates/vue-demo-store/app.vue

@@ -15,12 +15,6 @@ useHead({
   },
 });
 
-const { refreshSessionContext } = useSessionContext();
-onBeforeMount(async () => {
-  await refreshSessionContext();
-  getWishlistProducts();
-});
-
 const { apiInstance } = useShopwareContext();
 const { data: sessionContextData } = await useAsyncData(
   "sessionContext",

templates/vue-demo-store/pages/wishlist.vue

@@ -7,8 +7,9 @@ export default {
 <script setup lang="ts">
 import { getProducts } from "@shopware-pwa/api-client";
 import { ClientApiError, Product } from "@shopware-pwa/types";
+import { removeWishlistProduct } from "@shopware-pwa/api-client";
 
-const { items } = useWishlist();
+const { items, getWishlistProducts } = useWishlist();
 const { apiInstance } = useShopwareContext();
 const products = ref<Product[]>([]);
 const isLoading = ref(false);
@@ -59,6 +60,13 @@ watch(
     immediate: true,
   }
 );
+
+async function clearWishlist() {
+  await Promise.all(
+    items.value.map((id) => removeWishlistProduct(id, apiInstance))
+  );
+  getWishlistProducts();
+}
 </script>
 
 <template>
@@ -67,8 +75,23 @@ watch(
       class="max-w-2xl mx-auto py-4 px-4 sm:py-4 sm:px-6 lg:max-w-7xl lg:px-8"
     >
       <!-- Wishlist is completed -->
-      <div v-if="products.length">
+      <div
+        v-if="isLoading"
+        class="absolute inset-0 flex items-center justify-center z-10 bg-white/50"
+      >
+        <div
+          class="h-15 w-15 i-carbon-progress-bar-round animate-spin c-gray-500"
+        />
+      </div>
+      <div v-else-if="products.length">
         <h1 class="my-3 text-3xl font-extrabold">Wishlist</h1>
+        <button
+          class="mb-4 justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-black hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+          data-testid="clear-wishlist-button"
+          @click="clearWishlist"
+        >
+          Clear wishlist
+        </button>
         <div
           class="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8"
         >