@shopify/cli 3.61.0 → 3.61.2

package/dist/assets/hydrogen/starter/app/routes/account.addresses.tsx

@@ -37,14 +37,7 @@ export const meta: MetaFunction = () => {
 export async function loader({context}: LoaderFunctionArgs) {
   await context.customerAccount.handleAuthStatus();
 
-  return json(
-    {},
-    {
-      headers: {
-        'Set-Cookie': await context.session.commit(),
-      },
-    },
-  );
+  return json({});
 }
 
 export async function action({request, context}: ActionFunctionArgs) {
@@ -67,9 +60,6 @@ export async function action({request, context}: ActionFunctionArgs) {
         {error: {[addressId]: 'Unauthorized'}},
         {
           status: 401,
-          headers: {
-            'Set-Cookie': await context.session.commit(),
-          },
         },
       );
     }
@@ -121,27 +111,17 @@ export async function action({request, context}: ActionFunctionArgs) {
             throw new Error('Customer address create failed.');
           }
 
-          return json(
-            {
-              error: null,
-              createdAddress: data?.customerAddressCreate?.customerAddress,
-              defaultAddress,
-            },
-            {
-              headers: {
-                'Set-Cookie': await context.session.commit(),
-              },
-            },
-          );
+          return json({
+            error: null,
+            createdAddress: data?.customerAddressCreate?.customerAddress,
+            defaultAddress,
+          });
         } catch (error: unknown) {
           if (error instanceof Error) {
             return json(
               {error: {[addressId]: error.message}},
               {
                 status: 400,
-                headers: {
-                  'Set-Cookie': await context.session.commit(),
-                },
               },
             );
           }
@@ -149,9 +129,6 @@ export async function action({request, context}: ActionFunctionArgs) {
             {error: {[addressId]: error}},
             {
               status: 400,
-              headers: {
-                'Set-Cookie': await context.session.commit(),
-              },
             },
           );
         }
@@ -183,27 +160,17 @@ export async function action({request, context}: ActionFunctionArgs) {
             throw new Error('Customer address update failed.');
           }
 
-          return json(
-            {
-              error: null,
-              updatedAddress: address,
-              defaultAddress,
-            },
-            {
-              headers: {
-                'Set-Cookie': await context.session.commit(),
-              },
-            },
-          );
+          return json({
+            error: null,
+            updatedAddress: address,
+            defaultAddress,
+          });
         } catch (error: unknown) {
           if (error instanceof Error) {
             return json(
               {error: {[addressId]: error.message}},
               {
                 status: 400,
-                headers: {
-                  'Set-Cookie': await context.session.commit(),
-                },
               },
             );
           }
@@ -211,9 +178,6 @@ export async function action({request, context}: ActionFunctionArgs) {
             {error: {[addressId]: error}},
             {
               status: 400,
-              headers: {
-                'Set-Cookie': await context.session.commit(),
-              },
             },
           );
         }
@@ -241,23 +205,13 @@ export async function action({request, context}: ActionFunctionArgs) {
             throw new Error('Customer address delete failed.');
           }
 
-          return json(
-            {error: null, deletedAddress: addressId},
-            {
-              headers: {
-                'Set-Cookie': await context.session.commit(),
-              },
-            },
-          );
+          return json({error: null, deletedAddress: addressId});
         } catch (error: unknown) {
           if (error instanceof Error) {
             return json(
               {error: {[addressId]: error.message}},
               {
                 status: 400,
-                headers: {
-                  'Set-Cookie': await context.session.commit(),
-                },
               },
             );
           }
@@ -265,9 +219,6 @@ export async function action({request, context}: ActionFunctionArgs) {
             {error: {[addressId]: error}},
             {
               status: 400,
-              headers: {
-                'Set-Cookie': await context.session.commit(),
-              },
             },
           );
         }
@@ -278,9 +229,6 @@ export async function action({request, context}: ActionFunctionArgs) {
           {error: {[addressId]: 'Method not allowed'}},
           {
             status: 405,
-            headers: {
-              'Set-Cookie': await context.session.commit(),
-            },
           },
         );
       }
@@ -291,9 +239,6 @@ export async function action({request, context}: ActionFunctionArgs) {
         {error: error.message},
         {
           status: 400,
-          headers: {
-            'Set-Cookie': await context.session.commit(),
-          },
         },
       );
     }
@@ -301,9 +246,6 @@ export async function action({request, context}: ActionFunctionArgs) {
       {error},
       {
         status: 400,
-        headers: {
-          'Set-Cookie': await context.session.commit(),
-        },
       },
     );
   }

package/dist/assets/hydrogen/starter/app/routes/account.orders.$id.tsx

@@ -40,20 +40,13 @@ export async function loader({params, context}: LoaderFunctionArgs) {
     firstDiscount?.__typename === 'PricingPercentageValue' &&
     firstDiscount?.percentage;
 
-  return json(
-    {
-      order,
-      lineItems,
-      discountValue,
-      discountPercentage,
-      fulfillmentStatus,
-    },
-    {
-      headers: {
-        'Set-Cookie': await context.session.commit(),
-      },
-    },
-  );
+  return json({
+    order,
+    lineItems,
+    discountValue,
+    discountPercentage,
+    fulfillmentStatus,
+  });
 }
 
 export default function OrderRoute() {

package/dist/assets/hydrogen/starter/app/routes/account.orders._index.tsx

@@ -34,14 +34,7 @@ export async function loader({request, context}: LoaderFunctionArgs) {
     throw Error('Customer orders not found');
   }
 
-  return json(
-    {customer: data.customer},
-    {
-      headers: {
-        'Set-Cookie': await context.session.commit(),
-      },
-    },
-  );
+  return json({customer: data.customer});
 }
 
 export default function Orders() {

package/dist/assets/hydrogen/starter/app/routes/account.profile.tsx

@@ -26,14 +26,7 @@ export const meta: MetaFunction = () => {
 export async function loader({context}: LoaderFunctionArgs) {
   await context.customerAccount.handleAuthStatus();
 
-  return json(
-    {},
-    {
-      headers: {
-        'Set-Cookie': await context.session.commit(),
-      },
-    },
-  );
+  return json({});
 }
 
 export async function action({request, context}: ActionFunctionArgs) {
@@ -75,25 +68,15 @@ export async function action({request, context}: ActionFunctionArgs) {
       throw new Error('Customer profile update failed.');
     }
 
-    return json(
-      {
-        error: null,
-        customer: data?.customerUpdate?.customer,
-      },
-      {
-        headers: {
-          'Set-Cookie': await context.session.commit(),
-        },
-      },
-    );
+    return json({
+      error: null,
+      customer: data?.customerUpdate?.customer,
+    });
   } catch (error: any) {
     return json(
       {error: error.message, customer: null},
       {
         status: 400,
-        headers: {
-          'Set-Cookie': await context.session.commit(),
-        },
       },
     );
   }

package/dist/assets/hydrogen/starter/app/routes/account.tsx

@@ -20,7 +20,6 @@ export async function loader({context}: LoaderFunctionArgs) {
     {
       headers: {
         'Cache-Control': 'no-cache, no-store, must-revalidate',
-        'Set-Cookie': await context.session.commit(),
       },
     },
   );

package/dist/assets/hydrogen/starter/app/routes/blogs.$blogHandle.$articleHandle.tsx

@@ -1,4 +1,4 @@
-import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {useLoaderData, type MetaFunction} from '@remix-run/react';
 import {Image} from '@shopify/hydrogen';
 
@@ -6,16 +6,33 @@ export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.article.title ?? ''} article`}];
 };
 
-export async function loader({params, context}: LoaderFunctionArgs) {
+export async function loader(args: LoaderFunctionArgs) {
+  // Start fetching non-critical data without blocking time to first byte
+  const deferredData = loadDeferredData(args);
+
+  // Await the critical data required to render initial state of the page
+  const criticalData = await loadCriticalData(args);
+
+  return defer({...deferredData, ...criticalData});
+}
+
+/**
+ * Load data necessary for rendering content above the fold. This is the critical data
+ * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
+ */
+async function loadCriticalData({context, params}: LoaderFunctionArgs) {
   const {blogHandle, articleHandle} = params;
 
   if (!articleHandle || !blogHandle) {
     throw new Response('Not found', {status: 404});
   }
 
-  const {blog} = await context.storefront.query(ARTICLE_QUERY, {
-    variables: {blogHandle, articleHandle},
-  });
+  const [{blog}] = await Promise.all([
+    context.storefront.query(ARTICLE_QUERY, {
+      variables: {blogHandle, articleHandle},
+    }),
+    // Add other queries here, so that they are loaded in parallel
+  ]);
 
   if (!blog?.articleByHandle) {
     throw new Response(null, {status: 404});
@@ -23,7 +40,16 @@ export async function loader({params, context}: LoaderFunctionArgs) {
 
   const article = blog.articleByHandle;
 
-  return json({article});
+  return {article};
+}
+
+/**
+ * Load data for rendering content below the fold. This data is deferred and will be
+ * fetched after the initial page load. If it's unavailable, the page should still 200.
+ * Make sure to not throw any errors here, as it will cause the page to 500.
+ */
+function loadDeferredData({context}: LoaderFunctionArgs) {
+  return {};
 }
 
 export default function Article() {

package/dist/assets/hydrogen/starter/app/routes/blogs.$blogHandle._index.tsx

@@ -1,4 +1,4 @@
-import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
 import {Image, Pagination, getPaginationVariables} from '@shopify/hydrogen';
 import type {ArticleItemFragment} from 'storefrontapi.generated';
@@ -7,10 +7,24 @@ export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.blog.title ?? ''} blog`}];
 };
 
-export async function loader({
+export async function loader(args: LoaderFunctionArgs) {
+  // Start fetching non-critical data without blocking time to first byte
+  const deferredData = loadDeferredData(args);
+
+  // Await the critical data required to render initial state of the page
+  const criticalData = await loadCriticalData(args);
+
+  return defer({...deferredData, ...criticalData});
+}
+
+/**
+ * Load data necessary for rendering content above the fold. This is the critical data
+ * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
+ */
+async function loadCriticalData({
+  context,
   request,
   params,
-  context: {storefront},
 }: LoaderFunctionArgs) {
   const paginationVariables = getPaginationVariables(request, {
     pageBy: 4,
@@ -20,18 +34,30 @@ export async function loader({
     throw new Response(`blog not found`, {status: 404});
   }
 
-  const {blog} = await storefront.query(BLOGS_QUERY, {
-    variables: {
-      blogHandle: params.blogHandle,
-      ...paginationVariables,
-    },
-  });
+  const [{blog}] = await Promise.all([
+    context.storefront.query(BLOGS_QUERY, {
+      variables: {
+        blogHandle: params.blogHandle,
+        ...paginationVariables,
+      },
+    }),
+    // Add other queries here, so that they are loaded in parallel
+  ]);
 
   if (!blog?.articles) {
     throw new Response('Not found', {status: 404});
   }
 
-  return json({blog});
+  return {blog};
+}
+
+/**
+ * Load data for rendering content below the fold. This data is deferred and will be
+ * fetched after the initial page load. If it's unavailable, the page should still 200.
+ * Make sure to not throw any errors here, as it will cause the page to 500.
+ */
+function loadDeferredData({context}: LoaderFunctionArgs) {
+  return {};
 }
 
 export default function Blog() {

package/dist/assets/hydrogen/starter/app/routes/blogs._index.tsx

@@ -1,4 +1,4 @@
-import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
 import {Pagination, getPaginationVariables} from '@shopify/hydrogen';
 
@@ -6,22 +6,45 @@ export const meta: MetaFunction = () => {
   return [{title: `Hydrogen | Blogs`}];
 };
 
-export const loader = async ({
-  request,
-  context: {storefront},
-}: LoaderFunctionArgs) => {
+export async function loader(args: LoaderFunctionArgs) {
+  // Start fetching non-critical data without blocking time to first byte
+  const deferredData = loadDeferredData(args);
+
+  // Await the critical data required to render initial state of the page
+  const criticalData = await loadCriticalData(args);
+
+  return defer({...deferredData, ...criticalData});
+}
+
+/**
+ * Load data necessary for rendering content above the fold. This is the critical data
+ * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
+ */
+async function loadCriticalData({context, request}: LoaderFunctionArgs) {
   const paginationVariables = getPaginationVariables(request, {
     pageBy: 10,
   });
 
-  const {blogs} = await storefront.query(BLOGS_QUERY, {
-    variables: {
-      ...paginationVariables,
-    },
-  });
+  const [{blogs}] = await Promise.all([
+    context.storefront.query(BLOGS_QUERY, {
+      variables: {
+        ...paginationVariables,
+      },
+    }),
+    // Add other queries here, so that they are loaded in parallel
+  ]);
 
-  return json({blogs});
-};
+  return {blogs};
+}
+
+/**
+ * Load data for rendering content below the fold. This data is deferred and will be
+ * fetched after the initial page load. If it's unavailable, the page should still 200.
+ * Make sure to not throw any errors here, as it will cause the page to 500.
+ */
+function loadDeferredData({context}: LoaderFunctionArgs) {
+  return {};
+}
 
 export default function Blogs() {
   const {blogs} = useLoaderData<typeof loader>();

package/dist/assets/hydrogen/starter/app/routes/cart.tsx

@@ -68,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,

package/dist/assets/hydrogen/starter/app/routes/collections.$handle.tsx

@@ -1,4 +1,4 @@
-import {json, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {defer, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {useLoaderData, Link, type MetaFunction} from '@remix-run/react';
 import {
   Pagination,
@@ -14,7 +14,25 @@ export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.collection.title ?? ''} Collection`}];
 };
 
-export async function loader({request, params, context}: LoaderFunctionArgs) {
+export async function loader(args: LoaderFunctionArgs) {
+  // Start fetching non-critical data without blocking time to first byte
+  const deferredData = loadDeferredData(args);
+
+  // Await the critical data required to render initial state of the page
+  const criticalData = await loadCriticalData(args);
+
+  return defer({...deferredData, ...criticalData});
+}
+
+/**
+ * Load data necessary for rendering content above the fold. This is the critical data
+ * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
+ */
+async function loadCriticalData({
+  context,
+  params,
+  request,
+}: LoaderFunctionArgs) {
   const {handle} = params;
   const {storefront} = context;
   const paginationVariables = getPaginationVariables(request, {
@@ -22,19 +40,34 @@ export async function loader({request, params, context}: LoaderFunctionArgs) {
   });
 
   if (!handle) {
-    return redirect('/collections');
+    throw redirect('/collections');
   }
 
-  const {collection} = await storefront.query(COLLECTION_QUERY, {
-    variables: {handle, ...paginationVariables},
-  });
+  const [{collection}] = await Promise.all([
+    storefront.query(COLLECTION_QUERY, {
+      variables: {handle, ...paginationVariables},
+      // Add other queries here, so that they are loaded in parallel
+    }),
+  ]);
 
   if (!collection) {
     throw new Response(`Collection ${handle} not found`, {
       status: 404,
     });
   }
-  return json({collection});
+
+  return {
+    collection,
+  };
+}
+
+/**
+ * Load data for rendering content below the fold. This data is deferred and will be
+ * fetched after the initial page load. If it's unavailable, the page should still 200.
+ * Make sure to not throw any errors here, as it will cause the page to 500.
+ */
+function loadDeferredData({context}: LoaderFunctionArgs) {
+  return {};
 }
 
 export default function Collection() {

package/dist/assets/hydrogen/starter/app/routes/collections._index.tsx

@@ -1,18 +1,44 @@
 import {useLoaderData, Link} from '@remix-run/react';
-import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {Pagination, getPaginationVariables, Image} from '@shopify/hydrogen';
 import type {CollectionFragment} from 'storefrontapi.generated';
 
-export async function loader({context, request}: LoaderFunctionArgs) {
+export async function loader(args: LoaderFunctionArgs) {
+  // Start fetching non-critical data without blocking time to first byte
+  const deferredData = loadDeferredData(args);
+
+  // Await the critical data required to render initial state of the page
+  const criticalData = await loadCriticalData(args);
+
+  return defer({...deferredData, ...criticalData});
+}
+
+/**
+ * Load data necessary for rendering content above the fold. This is the critical data
+ * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
+ */
+async function loadCriticalData({context, request}: LoaderFunctionArgs) {
   const paginationVariables = getPaginationVariables(request, {
     pageBy: 4,
   });
 
-  const {collections} = await context.storefront.query(COLLECTIONS_QUERY, {
-    variables: paginationVariables,
-  });
+  const [{collections}] = await Promise.all([
+    context.storefront.query(COLLECTIONS_QUERY, {
+      variables: paginationVariables,
+    }),
+    // Add other queries here, so that they are loaded in parallel
+  ]);
+
+  return {collections};
+}
 
-  return json({collections});
+/**
+ * Load data for rendering content below the fold. This data is deferred and will be
+ * fetched after the initial page load. If it's unavailable, the page should still 200.
+ * Make sure to not throw any errors here, as it will cause the page to 500.
+ */
+function loadDeferredData({context}: LoaderFunctionArgs) {
+  return {};
 }
 
 export default function Collections() {

package/dist/assets/hydrogen/starter/app/routes/collections.all.tsx

@@ -1,4 +1,4 @@
-import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {useLoaderData, Link, type MetaFunction} from '@remix-run/react';
 import {
   Pagination,
@@ -13,17 +13,42 @@ export const meta: MetaFunction<typeof loader> = () => {
   return [{title: `Hydrogen | Products`}];
 };
 
-export async function loader({request, context}: LoaderFunctionArgs) {
+export async function loader(args: LoaderFunctionArgs) {
+  // Start fetching non-critical data without blocking time to first byte
+  const deferredData = loadDeferredData(args);
+
+  // Await the critical data required to render initial state of the page
+  const criticalData = await loadCriticalData(args);
+
+  return defer({...deferredData, ...criticalData});
+}
+
+/**
+ * Load data necessary for rendering content above the fold. This is the critical data
+ * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
+ */
+async function loadCriticalData({context, request}: LoaderFunctionArgs) {
   const {storefront} = context;
   const paginationVariables = getPaginationVariables(request, {
     pageBy: 8,
   });
 
-  const {products} = await storefront.query(CATALOG_QUERY, {
-    variables: {...paginationVariables},
-  });
+  const [{products}] = await Promise.all([
+    storefront.query(CATALOG_QUERY, {
+      variables: {...paginationVariables},
+    }),
+    // Add other queries here, so that they are loaded in parallel
+  ]);
+  return {products};
+}
 
-  return json({products});
+/**
+ * Load data for rendering content below the fold. This data is deferred and will be
+ * fetched after the initial page load. If it's unavailable, the page should still 200.
+ * Make sure to not throw any errors here, as it will cause the page to 500.
+ */
+function loadDeferredData({context}: LoaderFunctionArgs) {
+  return {};
 }
 
 export default function Collection() {