Merge pull request Shopify#341 from Shopify/jl-better-evicted-cart-su…

…pport Add better evicted cart support
rafaelstz · Jan 6, 2023 · 83096b5 · 83096b5
2 parents 44ec893 + 5e4f1d2
commit 83096b5
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 19 deletions.
diff --git a/rfc/cart.md b/rfc/cart.md
@@ -15,11 +15,13 @@ export async function action({request, context}) {
   const {session, storefront} = context;
   const headers = new Headers();
 
-  const [formData, cartId] = await Promise.all([
+  const [formData, storedCartId] = await Promise.all([
     request.formData(),
     session.get('cartId'),
   ]);
 
+  let cartId = storedCartId;
+
   const cartAction = formData.get('cartAction');
   invariant(cartAction, 'No cartAction defined');
 
@@ -42,10 +44,6 @@ export async function action({request, context}) {
           input: {lines},
           storefront,
         });
-
-        // cart created - we only need a Set-Cookie header if we're creating
-        session.set('cartId', result.cart.id);
-        headers.set('Set-Cookie', await session.commit());
       } else {
         // Add line(s) to existing cart
         result = await cartAdd({
@@ -54,6 +52,9 @@ export async function action({request, context}) {
           storefront,
         });
       }
+
+      cartId = result.cart.id;
+
       break;
     default:
       invariant(false, `${cartAction} cart action is not defined`);
@@ -65,6 +66,10 @@ export async function action({request, context}) {
     headers.set('Location', redirectTo);
   }
 
+  // The Cart ID may change after each mutation. We need to update it each time in the session.
+  session.set('cartId', cartId);
+  headers.set('Set-Cookie', await session.commit());
+
   const {cart, errors} = result;
   return json({cart, errors}, {status, headers});
 }

diff --git a/templates/demo-store/app/root.tsx b/templates/demo-store/app/root.tsx
@@ -267,7 +267,7 @@ const CART_QUERY = `#graphql
 export async function getCart({storefront}: AppLoadContext, cartId: string) {
   invariant(storefront, 'missing storefront client in cart query');
 
-  const {cart} = await storefront.query<{cart: Cart}>(CART_QUERY, {
+  const {cart} = await storefront.query<{cart?: Cart}>(CART_QUERY, {
     variables: {
       cartId,
       country: storefront.i18n?.country,
@@ -276,7 +276,5 @@ export async function getCart({storefront}: AppLoadContext, cartId: string) {
     cache: storefront.CacheNone(),
   });
 
-  invariant(cart, 'No data returned from Shopify API');
-
   return cart;
 }
diff --git a/templates/demo-store/app/routes/cart.tsx b/templates/demo-store/app/routes/cart.tsx
@@ -23,12 +23,14 @@ export async function action({request, context}: ActionArgs) {
   const {session, storefront} = context;
   const headers = new Headers();
 
-  const [formData, cartId, customerAccessToken] = await Promise.all([
+  const [formData, storedCartId, customerAccessToken] = await Promise.all([
     request.formData(),
     session.get('cartId'),
     session.get('customerAccessToken'),
   ]);
 
+  let cartId = storedCartId;
+
   const cartAction = formData.get('cartAction') as CartActions;
   invariant(cartAction, 'No cartAction defined');
 
@@ -49,24 +51,24 @@ export async function action({request, context}: ActionArgs) {
         : ([] as CartLineInput[]);
       invariant(lines.length, 'No lines to add');
 
-      //! Flow A — no previous cart, create and add line(s)
+      /**
+       * If no previous cart exists, create one with the lines.
+       */
       if (!cartId) {
         result = await cartCreate({
           input: countryCode ? {lines, buyerIdentity: {countryCode}} : {lines},
           storefront,
         });
-
-        // cart created - we only need a Set-Cookie header if we're creating
-        session.set('cartId', result.cart.id);
-        headers.set('Set-Cookie', await session.commit());
       } else {
-        //! Flow B — add line(s) to existing cart
         result = await cartAdd({
           cartId,
           lines,
           storefront,
         });
       }
+
+      cartId = result.cart.id;
+
       break;
     case CartAction.REMOVE_FROM_CART:
       const lineIds = formData.get('linesIds')
@@ -80,6 +82,8 @@ export async function action({request, context}: ActionArgs) {
         storefront,
       });
 
+      cartId = result.cart.id;
+
       break;
     case CartAction.UPDATE_CART:
       const updateLines = formData.get('lines')
@@ -93,6 +97,8 @@ export async function action({request, context}: ActionArgs) {
         storefront,
       });
 
+      cartId = result.cart.id;
+
       break;
     case CartAction.UPDATE_DISCOUNT:
       invariant(cartId, 'Missing cartId');
@@ -105,6 +111,9 @@ export async function action({request, context}: ActionArgs) {
         discountCodes,
         storefront,
       });
+
+      cartId = result.cart.id;
+
       break;
     case CartAction.UPDATE_BUYER_IDENTITY:
       const buyerIdentity = formData.get('buyerIdentity')
@@ -113,8 +122,6 @@ export async function action({request, context}: ActionArgs) {
           ) as CartBuyerIdentityInput)
         : ({} as CartBuyerIdentityInput);
 
-      //! if we have an existing cart, we update the identity,
-      //! else we create a new cart with the passed identity
       result = cartId
         ? await cartUpdateBuyerIdentity({
             cartId,
@@ -134,14 +141,19 @@ export async function action({request, context}: ActionArgs) {
             storefront,
           });
 
-      session.set('cartId', result.cart.id);
-      headers.set('Set-Cookie', await session.commit());
+      cartId = result.cart.id;
 
       break;
     default:
       invariant(false, `${cartAction} cart action is not defined`);
   }
 
+  /**
+   * The Cart ID may change after each mutation. We need to update it each time in the session.
+   */
+  session.set('cartId', cartId);
+  headers.set('Set-Cookie', await session.commit());
+
   const redirectTo = formData.get('redirectTo') ?? null;
   if (typeof redirectTo === 'string' && isLocalPath(redirectTo)) {
     status = 303;