add session utility for dirty state. Ensure this dirty state is set t…

…o true whenever session is changed. And set to false whenever session is commited. Then in server code, check if session is dirty, if its dirty, set cookie with sessin.commit. (#2137) move commit logic to template instead update all the examples bring back location header add changeset
Shopify · Jun 6, 2024 · 4337200 · 4337200
1 parent a8b9c6c
commit 4337200
Show file tree

Hide file tree

Showing 61 changed files with 496 additions and 484 deletions.
diff --git a/.changeset/bright-wombats-count.md b/.changeset/bright-wombats-count.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+`customerAccount` no longer commit session automatically in any situation.
diff --git a/.changeset/red-lamps-switch.md b/.changeset/red-lamps-switch.md
@@ -0,0 +1,65 @@
+---
+'skeleton': patch
+---
+
+Remove manual setting of session in headers and recommend setting it in server after response is created.
+
+Step 1: Add `isPending` implementation in session
+
+```diff
+// in app/lib/session.ts
+export class AppSession implements HydrogenSession {
++  public isPending = false;
+
+  get unset() {
++    this.isPending = true;
+    return this.#session.unset;
+  }
+
+  get set() {
++    this.isPending = true;
+    return this.#session.set;
+  }
+
+  commit() {
++    this.isPending = false;
+    return this.#sessionStorage.commitSession(this.#session);
+  }
+}
+```
+
+Step 2: update response header if `session.isPending` is true
+
+```diff
+// in server.ts
+export default {
+  async fetch(request: Request): Promise<Response> {
+    try {
+      const response = await handleRequest(request);
+
++      if (session.isPending) {
++        response.headers.set('Set-Cookie', await session.commit());
++      }
+
+      return response;
+    } catch (error) {
+      ...
+    }
+  },
+};
+```
+
+Step 3: remove setting cookie with session.commit() in routes
+
+```diff
+// in route files
+export async function loader({context}: LoaderFunctionArgs) {
+  return json({},
+-    {
+-      headers: {
+-        'Set-Cookie': await context.session.commit(),
+-      },
+    },
+  );
+}
+```
diff --git a/.changeset/six-pumas-allow.md b/.changeset/six-pumas-allow.md
@@ -0,0 +1,5 @@
+---
+'@shopify/cli-hydrogen': patch
+---
+
+skeleton template was updated to do session commit in server call instead of routes
diff --git a/docs/shopify-dev/analytics-setup/js/app/root.jsx b/docs/shopify-dev/analytics-setup/js/app/root.jsx
@@ -105,12 +105,7 @@ export async function loader({context}) {
         storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
       },
       // [END consent]
-    },
-    {
-      headers: {
-        'Set-Cookie': await context.session.commit(),
-      },
-    },
+    }
   );
 }
 

diff --git a/docs/shopify-dev/analytics-setup/js/app/routes/cart.jsx b/docs/shopify-dev/analytics-setup/js/app/routes/cart.jsx
@@ -1,9 +1,6 @@
 import {Await} from '@remix-run/react';
 import {Suspense} from 'react';
-import {
-  CartForm,
-  Analytics,
-} from '@shopify/hydrogen';
+import {CartForm, Analytics} from '@shopify/hydrogen';
 import {json} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/Cart';
 import {useRootLoaderData} from '~/lib/root-data';
@@ -74,8 +71,6 @@ export async function action({request, context}) {
     headers.set('Location', redirectTo);
   }
 
-  headers.append('Set-Cookie', await context.session.commit());
-
   return json(
     {
       cart: cartResult,

diff --git a/docs/shopify-dev/analytics-setup/ts/app/root.tsx b/docs/shopify-dev/analytics-setup/ts/app/root.tsx
@@ -106,12 +106,7 @@ export async function loader({context}: LoaderFunctionArgs) {
         storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
       },
       // [END consent]
-    },
-    {
-      headers: {
-        'Set-Cookie': await context.session.commit(),
-      },
-    },
+    }
   );
 }
 

diff --git a/docs/shopify-dev/analytics-setup/ts/app/routes/cart.tsx b/docs/shopify-dev/analytics-setup/ts/app/routes/cart.tsx
@@ -1,10 +1,7 @@
 import {Await, type MetaFunction} from '@remix-run/react';
 import {Suspense} from 'react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
-import {
-  CartForm,
-  Analytics,
-} from '@shopify/hydrogen';
+import {CartForm, Analytics} from '@shopify/hydrogen';
 import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/Cart';
 import {useRootLoaderData} from '~/lib/root-data';
@@ -71,8 +68,6 @@ export async function action({request, context}: ActionFunctionArgs) {
     headers.set('Location', redirectTo);
   }
 
-  headers.append('Set-Cookie', await context.session.commit());
-
   return json(
     {
       cart: cartResult,

diff --git a/examples/b2b/app/root.tsx b/examples/b2b/app/root.tsx
@@ -111,28 +111,21 @@ export async function loader({context}: LoaderFunctionArgs) {
     },
   });
 
-  return defer(
-    {
-      cart: cartPromise,
-      footer: footerPromise,
-      header: await headerPromise,
-      isLoggedIn: isLoggedInPromise,
-      publicStoreDomain,
-      shop: getShopAnalytics({
-        storefront,
-        publicStorefrontId: env.PUBLIC_STOREFRONT_ID,
-      }),
-      consent: {
-        checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
-        storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
-      },
-    },
-    {
-      headers: {
-        'Set-Cookie': await context.session.commit(),
-      },
+  return defer({
+    cart: cartPromise,
+    footer: footerPromise,
+    header: await headerPromise,
+    isLoggedIn: isLoggedInPromise,
+    publicStoreDomain,
+    shop: getShopAnalytics({
+      storefront,
+      publicStorefrontId: env.PUBLIC_STOREFRONT_ID,
+    }),
+    consent: {
+      checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
+      storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
     },
-  );
+  });
 }
 
 function Layout({children}: {children?: React.ReactNode}) {

diff --git a/examples/b2b/app/routes/b2blocations.tsx b/examples/b2b/app/routes/b2blocations.tsx
@@ -30,14 +30,7 @@ export async function loader({context}: LoaderFunctionArgs) {
 
   const modalOpen = Boolean(company) && !companyLocationId;
 
-  return defer(
-    {company, companyLocationId, modalOpen},
-    {
-      headers: {
-        'Set-Cookie': await context.session.commit(),
-      },
-    },
-  );
+  return defer({company, companyLocationId, modalOpen});
 }
 
 export default function CartRoute() {

diff --git a/examples/b2b/server.ts b/examples/b2b/server.ts
@@ -101,6 +101,10 @@ export default {
 
       const response = await handleRequest(request);
 
+      if (session.isPending) {
+        response.headers.set('Set-Cookie', await session.commit());
+      }
+
       if (response.status === 404) {
         /**
          * Check for redirects only when there's a 404 from the app.

diff --git a/examples/classic-remix/app/root.tsx b/examples/classic-remix/app/root.tsx
@@ -74,27 +74,19 @@ export async function loader(args: LoaderFunctionArgs) {
 
   const {storefront, env} = args.context;
 
-  return defer(
-    {
-      ...criticalData,
-      ...deferredData,
-      publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
-      shop: getShopAnalytics({
-        storefront,
-        publicStorefrontId: env.PUBLIC_STOREFRONT_ID,
-      }),
-      consent: {
-        checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
-        storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
-      },
-    },
-
-    {
-      headers: {
-        'Set-Cookie': await args.context.session.commit(),
-      },
+  return defer({
+    ...criticalData,
+    ...deferredData,
+    publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
+    shop: getShopAnalytics({
+      storefront,
+      publicStorefrontId: env.PUBLIC_STOREFRONT_ID,
+    }),
+    consent: {
+      checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
+      storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
     },
-  );
+  });
 }
 
 /**

diff --git a/examples/classic-remix/server.ts b/examples/classic-remix/server.ts
@@ -95,6 +95,10 @@ export default {
 
       const response = await handleRequest(request);
 
+      if (session.isPending) {
+        response.headers.set('Set-Cookie', await session.commit());
+      }
+
       if (response.status === 404) {
         /**
          * Check for redirects only when there's a 404 from the app.

diff --git a/examples/custom-cart-method/app/routes/cart.tsx b/examples/custom-cart-method/app/routes/cart.tsx
@@ -90,8 +90,6 @@ export async function action({request, context}: ActionFunctionArgs) {
     headers.set('Location', redirectTo);
   }
 
-  headers.append('Set-Cookie', await context.session.commit());
-
   return json(
     {
       cart: cartResult,

diff --git a/examples/custom-cart-method/server.ts b/examples/custom-cart-method/server.ts
@@ -132,6 +132,10 @@ export default {
 
       const response = await handleRequest(request);
 
+      if (session.isPending) {
+        response.headers.set('Set-Cookie', await session.commit());
+      }
+
       if (response.status === 404) {
         /**
          * Check for redirects only when there's a 404 from the app.

diff --git a/examples/express/app/root.tsx b/examples/express/app/root.tsx
@@ -58,18 +58,11 @@ export async function loader({context}: LoaderFunctionArgs) {
     await context.storefront.query<{shop: Shop}>(LAYOUT_QUERY),
   ]);
 
-  return defer(
-    {
-      isLoggedIn: Boolean(customerAccessToken),
-      cart,
-      layout,
-    },
-    {
-      headers: {
-        'Set-Cookie': await context.session.commit(),
-      },
-    },
-  );
+  return defer({
+    isLoggedIn: Boolean(customerAccessToken),
+    cart,
+    layout,
+  });
 }
 
 function Layout({children}: {children?: React.ReactNode}) {

diff --git a/examples/gtm/app/root.tsx b/examples/gtm/app/root.tsx
@@ -66,26 +66,19 @@ export async function loader(args: LoaderFunctionArgs) {
 
   const {storefront, env} = args.context;
 
-  return defer(
-    {
-      ...deferredData,
-      ...criticalData,
-      publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
-      shop: getShopAnalytics({
-        storefront,
-        publicStorefrontId: env.PUBLIC_STOREFRONT_ID,
-      }),
-      consent: {
-        checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
-        storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
-      },
-    },
-    {
-      headers: {
-        'Set-Cookie': await args.context.session.commit(),
-      },
+  return defer({
+    ...deferredData,
+    ...criticalData,
+    publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
+    shop: getShopAnalytics({
+      storefront,
+      publicStorefrontId: env.PUBLIC_STOREFRONT_ID,
+    }),
+    consent: {
+      checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
+      storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
     },
-  );
+  });
 }
 
 /**

diff --git a/examples/legacy-customer-account-flow/app/root.tsx b/examples/legacy-customer-account-flow/app/root.tsx
@@ -215,7 +215,6 @@ async function validateCustomerAccessToken(
 
   if (customerAccessTokenExpired) {
     session.unset('customerAccessToken');
-    headers.append('Set-Cookie', await session.commit());
   } else {
     isLoggedIn = true;
   }

diff --git a/examples/legacy-customer-account-flow/app/routes/account.profile.tsx b/examples/legacy-customer-account-flow/app/routes/account.profile.tsx
@@ -94,14 +94,7 @@ export async function action({request, context}: ActionFunctionArgs) {
       );
     }
 
-    return json(
-      {error: null, customer: updated.customerUpdate?.customer},
-      {
-        headers: {
-          'Set-Cookie': await session.commit(),
-        },
-      },
-    );
+    return json({error: null, customer: updated.customerUpdate?.customer});
   } catch (error: any) {
     return json({error: error.message, customer: null}, {status: 400});
   }