chore: update session commit per hydrogen migration requirement

app/lib/customer/utils.ts

@@ -22,7 +22,6 @@ export const validateCustomerAccessToken = async (
 
   if (customerAccessTokenExpired) {
     session.unset('customerAccessToken');
-    headers.append('Set-Cookie', await session.commit());
   } else {
     isLoggedIn = true;
   }

app/lib/session.server.ts

@@ -8,6 +8,7 @@ import type {SessionStorage, Session} from '@shopify/remix-oxygen';
  * swap out the cookie-based implementation with something else!
  */
 export class AppSession implements HydrogenSession {
+  public isPending = false;
   #sessionStorage;
   #session;
 
@@ -45,10 +46,12 @@ export class AppSession implements HydrogenSession {
   }
 
   get unset() {
+    this.isPending = true;
     return this.#session.unset;
   }
 
   get set() {
+    this.isPending = true;
     return this.#session.set;
   }
 
@@ -57,6 +60,7 @@ export class AppSession implements HydrogenSession {
   }
 
   commit() {
+    this.isPending = true;
     return this.#sessionStorage.commitSession(this.#session);
   }
 }

app/routes/($locale).account.login.tsx

@@ -19,7 +19,7 @@ export async function action({request, context}: ActionFunctionArgs) {
   const customerAccessToken = data.customerAccessToken;
   if (customerAccessToken) {
     session.set('customerAccessToken', customerAccessToken);
-    return json(data, {headers: {'Set-Cookie': await session.commit()}});
+    return json(data);
   }
   return json(data, {status});
 }

app/routes/($locale).account.logout.ts

@@ -9,7 +9,7 @@ import type {
 import {LOGGED_OUT_REDIRECT_TO} from '~/lib/constants';
 import type {I18nLocale} from '~/lib/types';
 
-export async function cusomterLogout(context: AppLoadContext) {
+export async function customerLogout(context: AppLoadContext) {
   const {session} = context;
   session.unset('customerAccessToken');
 
@@ -18,11 +18,6 @@ export async function cusomterLogout(context: AppLoadContext) {
     `${
       (context.storefront.i18n as I18nLocale).pathPrefix
     }${LOGGED_OUT_REDIRECT_TO}`,
-    {
-      headers: {
-        'Set-Cookie': await session.commit(),
-      },
-    },
   );
 }
 
@@ -35,5 +30,5 @@ export async function loader({context}: LoaderFunctionArgs) {
 }
 
 export const action: ActionFunction = async ({context}: ActionFunctionArgs) => {
-  return cusomterLogout(context);
+  return customerLogout(context);
 };

app/routes/($locale).account.profile.tsx

@@ -17,10 +17,7 @@ export async function action({request, context}: ActionFunctionArgs) {
   const {data, status} = await customerUpdateProfileAction({request, context});
   if (data.customerAccessToken) {
     context.session.set('customerAccessToken', data.customerAccessToken);
-    return json(data, {
-      status,
-      headers: {'Set-Cookie': await context.session.commit()},
-    });
+    return json(data, {status});
   }
   return json(data, {status});
 }

app/routes/($locale).account.register.tsx

@@ -19,7 +19,7 @@ export async function action({request, context}: ActionFunctionArgs) {
   const customerAccessToken = data.customerAccessToken;
   if (customerAccessToken) {
     session.set('customerAccessToken', customerAccessToken);
-    return json(data, {headers: {'Set-Cookie': await session.commit()}});
+    return json(data);
   }
   return json({...data}, {status});
 }

app/routes/($locale).account.tsx

@@ -58,11 +58,6 @@ export async function loader({request, context, params}: LoaderFunctionArgs) {
     session.unset('customerAccessToken');
     return redirect(
       locale ? `/${locale}${LOGGED_OUT_REDIRECT_TO}` : LOGGED_OUT_REDIRECT_TO,
-      {
-        headers: {
-          'Set-Cookie': await session.commit(),
-        },
-      },
     );
   }
 }

server.ts

@@ -106,6 +106,10 @@ export default {
         }),
       );
 
+      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.