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. move commit logic to template instead update all the examples bring back location header add changeset
Shopify · May 30, 2024 · 9e7e023 · 9e7e023
1 parent e29ecf0
commit 9e7e023
Show file tree

Hide file tree

Showing 54 changed files with 477 additions and 421 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()
+
+```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
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,
     },
-  );
+  });
 }
 
 export 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
@@ -88,28 +88,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,
     },
-  );
+  });
 }
 
 export function Layout({children}: {children?: React.ReactNode}) {

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/gtm/app/root.tsx b/examples/gtm/app/root.tsx
@@ -80,28 +80,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,
     },
-  );
+  });
 }
 
 export function Layout({children}: {children?: React.ReactNode}) {

diff --git a/examples/legacy-customer-account-flow/app/root.tsx b/examples/legacy-customer-account-flow/app/root.tsx
@@ -209,7 +209,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});
   }

diff --git a/examples/legacy-customer-account-flow/app/routes/account.tsx b/examples/legacy-customer-account-flow/app/routes/account.tsx
@@ -20,11 +20,7 @@ export async function loader({request, context}: LoaderFunctionArgs) {
   if (!isLoggedIn) {
     if (isPrivateRoute || isAccountHome) {
       session.unset('customerAccessToken');
-      return redirect('/account/login', {
-        headers: {
-          'Set-Cookie': await session.commit(),
-        },
-      });
+      return redirect('/account/login');
     } else {
       // public subroute such as /account/login...
       return json({
@@ -67,11 +63,7 @@ export async function loader({request, context}: LoaderFunctionArgs) {
     // eslint-disable-next-line no-console
     console.error('There was a problem loading account', error);
     session.unset('customerAccessToken');
-    return redirect('/account/login', {
-      headers: {
-        'Set-Cookie': await session.commit(),
-      },
-    });
+    return redirect('/account/login');
   }
 }
 

diff --git a/examples/legacy-customer-account-flow/app/routes/account_.activate.$id.$activationToken.tsx b/examples/legacy-customer-account-flow/app/routes/account_.activate.$id.$activationToken.tsx
@@ -70,11 +70,7 @@ export async function action({request, context, params}: ActionFunctionArgs) {
     }
     session.set('customerAccessToken', customerAccessToken);
 
-    return redirect('/account', {
-      headers: {
-        'Set-Cookie': await session.commit(),
-      },
-    });
+    return redirect('/account');
   } catch (error: unknown) {
     if (error instanceof Error) {
       return json({error: error.message}, {status: 400});

diff --git a/examples/legacy-customer-account-flow/app/routes/account_.login.tsx b/examples/legacy-customer-account-flow/app/routes/account_.login.tsx
@@ -54,11 +54,7 @@ export async function action({request, context}: ActionFunctionArgs) {
     const {customerAccessToken} = customerAccessTokenCreate;
     session.set('customerAccessToken', customerAccessToken);
 
-    return redirect('/account', {
-      headers: {
-        'Set-Cookie': await session.commit(),
-      },
-    });
+    return redirect('/account');
   } catch (error: unknown) {
     if (error instanceof Error) {
       return json({error: error.message}, {status: 400});

diff --git a/examples/legacy-customer-account-flow/app/routes/account_.logout.tsx b/examples/legacy-customer-account-flow/app/routes/account_.logout.tsx
@@ -17,11 +17,7 @@ export async function action({request, context}: ActionFunctionArgs) {
     return json({error: 'Method not allowed'}, {status: 405});
   }
 
-  return redirect('/', {
-    headers: {
-      'Set-Cookie': await session.commit(),
-    },
-  });
+  return redirect('/');
 }
 
 export default function Logout() {

diff --git a/examples/legacy-customer-account-flow/app/routes/account_.register.tsx b/examples/legacy-customer-account-flow/app/routes/account_.register.tsx
@@ -90,7 +90,6 @@ export async function action({request, context}: ActionFunctionArgs) {
       {
         status: 302,
         headers: {
-          'Set-Cookie': await session.commit(),
           Location: '/account',
         },
       },

diff --git a/examples/legacy-customer-account-flow/app/routes/account_.reset.$id.$resetToken.tsx b/examples/legacy-customer-account-flow/app/routes/account_.reset.$id.$resetToken.tsx
@@ -47,11 +47,7 @@ export async function action({request, context, params}: ActionFunctionArgs) {
     }
     session.set('customerAccessToken', customerReset.customerAccessToken);
 
-    return redirect('/account', {
-      headers: {
-        'Set-Cookie': await session.commit(),
-      },
-    });
+    return redirect('/account');
   } catch (error: unknown) {
     if (error instanceof Error) {
       return json({error: error.message}, {status: 400});

diff --git a/examples/legacy-customer-account-flow/app/routes/cart.tsx b/examples/legacy-customer-account-flow/app/routes/cart.tsx
@@ -80,8 +80,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/legacy-customer-account-flow/server.ts b/examples/legacy-customer-account-flow/server.ts
@@ -82,6 +82,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.