@shopify/create-hydrogen 4.3.13 → 5.0.0

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

@@ -0,0 +1,113 @@
+import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {useLoaderData, type MetaFunction} from '@remix-run/react';
+import {Image} from '@shopify/hydrogen';
+
+export const meta: MetaFunction<typeof loader> = ({data}) => {
+  return [{title: `Hydrogen | ${data?.article.title ?? ''} article`}];
+};
+
+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 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});
+  }
+
+  const article = blog.articleByHandle;
+
+  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() {
+  const {article} = useLoaderData<typeof loader>();
+  const {title, image, contentHtml, author} = article;
+
+  const publishedDate = new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }).format(new Date(article.publishedAt));
+
+  return (
+    <div className="article">
+      <h1>
+        {title}
+        <div>
+          {publishedDate} &middot; {author?.name}
+        </div>
+      </h1>
+
+      {image && <Image data={image} sizes="90vw" loading="eager" />}
+      <div
+        dangerouslySetInnerHTML={{__html: contentHtml}}
+        className="article"
+      />
+    </div>
+  );
+}
+
+// NOTE: https://shopify.dev/docs/api/storefront/latest/objects/blog#field-blog-articlebyhandle
+const ARTICLE_QUERY = `#graphql
+  query Article(
+    $articleHandle: String!
+    $blogHandle: String!
+    $country: CountryCode
+    $language: LanguageCode
+  ) @inContext(language: $language, country: $country) {
+    blog(handle: $blogHandle) {
+      articleByHandle(handle: $articleHandle) {
+        title
+        contentHtml
+        publishedAt
+        author: authorV2 {
+          name
+        }
+        image {
+          id
+          altText
+          url
+          width
+          height
+        }
+        seo {
+          description
+          title
+        }
+      }
+    }
+  }
+` as const;

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

@@ -0,0 +1,188 @@
+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';
+
+export const meta: MetaFunction<typeof loader> = ({data}) => {
+  return [{title: `Hydrogen | ${data?.blog.title ?? ''} blog`}];
+};
+
+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,
+}: LoaderFunctionArgs) {
+  const paginationVariables = getPaginationVariables(request, {
+    pageBy: 4,
+  });
+
+  if (!params.blogHandle) {
+    throw new Response(`blog not found`, {status: 404});
+  }
+
+  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 {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() {
+  const {blog} = useLoaderData<typeof loader>();
+  const {articles} = blog;
+
+  return (
+    <div className="blog">
+      <h1>{blog.title}</h1>
+      <div className="blog-grid">
+        <Pagination connection={articles}>
+          {({nodes, isLoading, PreviousLink, NextLink}) => {
+            return (
+              <>
+                <PreviousLink>
+                  {isLoading ? 'Loading...' : <span>↑ Load previous</span>}
+                </PreviousLink>
+                {nodes.map((article, index) => {
+                  return (
+                    <ArticleItem
+                      article={article}
+                      key={article.id}
+                      loading={index < 2 ? 'eager' : 'lazy'}
+                    />
+                  );
+                })}
+                <NextLink>
+                  {isLoading ? 'Loading...' : <span>Load more ↓</span>}
+                </NextLink>
+              </>
+            );
+          }}
+        </Pagination>
+      </div>
+    </div>
+  );
+}
+
+function ArticleItem({
+  article,
+  loading,
+}: {
+  article: ArticleItemFragment;
+  loading?: HTMLImageElement['loading'];
+}) {
+  const publishedAt = new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }).format(new Date(article.publishedAt!));
+  return (
+    <div className="blog-article" key={article.id}>
+      <Link to={`/blogs/${article.blog.handle}/${article.handle}`}>
+        {article.image && (
+          <div className="blog-article-image">
+            <Image
+              alt={article.image.altText || article.title}
+              aspectRatio="3/2"
+              data={article.image}
+              loading={loading}
+              sizes="(min-width: 768px) 50vw, 100vw"
+            />
+          </div>
+        )}
+        <h3>{article.title}</h3>
+        <small>{publishedAt}</small>
+      </Link>
+    </div>
+  );
+}
+
+// NOTE: https://shopify.dev/docs/api/storefront/latest/objects/blog
+const BLOGS_QUERY = `#graphql
+  query Blog(
+    $language: LanguageCode
+    $blogHandle: String!
+    $first: Int
+    $last: Int
+    $startCursor: String
+    $endCursor: String
+  ) @inContext(language: $language) {
+    blog(handle: $blogHandle) {
+      title
+      seo {
+        title
+        description
+      }
+      articles(
+        first: $first,
+        last: $last,
+        before: $startCursor,
+        after: $endCursor
+      ) {
+        nodes {
+          ...ArticleItem
+        }
+        pageInfo {
+          hasPreviousPage
+          hasNextPage
+          hasNextPage
+          endCursor
+          startCursor
+        }
+
+      }
+    }
+  }
+  fragment ArticleItem on Article {
+    author: authorV2 {
+      name
+    }
+    contentHtml
+    handle
+    id
+    image {
+      id
+      altText
+      url
+      width
+      height
+    }
+    publishedAt
+    title
+    blog {
+      handle
+    }
+  }
+` as const;

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

@@ -0,0 +1,119 @@
+import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
+import {Pagination, getPaginationVariables} from '@shopify/hydrogen';
+
+export const meta: MetaFunction = () => {
+  return [{title: `Hydrogen | Blogs`}];
+};
+
+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 Promise.all([
+    context.storefront.query(BLOGS_QUERY, {
+      variables: {
+        ...paginationVariables,
+      },
+    }),
+    // Add other queries here, so that they are loaded in parallel
+  ]);
+
+  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>();
+
+  return (
+    <div className="blogs">
+      <h1>Blogs</h1>
+      <div className="blogs-grid">
+        <Pagination connection={blogs}>
+          {({nodes, isLoading, PreviousLink, NextLink}) => {
+            return (
+              <>
+                <PreviousLink>
+                  {isLoading ? 'Loading...' : <span>↑ Load previous</span>}
+                </PreviousLink>
+                {nodes.map((blog) => {
+                  return (
+                    <Link
+                      className="blog"
+                      key={blog.handle}
+                      prefetch="intent"
+                      to={`/blogs/${blog.handle}`}
+                    >
+                      <h2>{blog.title}</h2>
+                    </Link>
+                  );
+                })}
+                <NextLink>
+                  {isLoading ? 'Loading...' : <span>Load more ↓</span>}
+                </NextLink>
+              </>
+            );
+          }}
+        </Pagination>
+      </div>
+    </div>
+  );
+}
+
+// NOTE: https://shopify.dev/docs/api/storefront/latest/objects/blog
+const BLOGS_QUERY = `#graphql
+  query Blogs(
+    $country: CountryCode
+    $endCursor: String
+    $first: Int
+    $language: LanguageCode
+    $last: Int
+    $startCursor: String
+  ) @inContext(country: $country, language: $language) {
+    blogs(
+      first: $first,
+      last: $last,
+      before: $startCursor,
+      after: $endCursor
+    ) {
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+        startCursor
+        endCursor
+      }
+      nodes {
+        title
+        handle
+        seo {
+          title
+          description
+        }
+      }
+    }
+  }
+` as const;

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

@@ -0,0 +1,69 @@
+import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+
+/**
+ * Automatically creates a new cart based on the URL and redirects straight to checkout.
+ * Expected URL structure:
+ * ```js
+ * /cart/<variant_id>:<quantity>
+ *
+ * ```
+ *
+ * More than one `<variant_id>:<quantity>` separated by a comma, can be supplied in the URL, for
+ * carts with more than one product variant.
+ *
+ * @example
+ * Example path creating a cart with two product variants, different quantities, and a discount code in the querystring:
+ * ```js
+ * /cart/41007289663544:1,41007289696312:2?discount=HYDROBOARD
+ *
+ * ```
+ */
+export async function loader({request, context, params}: LoaderFunctionArgs) {
+  const {cart} = context;
+  const {lines} = params;
+  if (!lines) return redirect('/cart');
+  const linesMap = lines.split(',').map((line) => {
+    const lineDetails = line.split(':');
+    const variantId = lineDetails[0];
+    const quantity = parseInt(lineDetails[1], 10);
+
+    return {
+      merchandiseId: `gid://shopify/ProductVariant/${variantId}`,
+      quantity,
+    };
+  });
+
+  const url = new URL(request.url);
+  const searchParams = new URLSearchParams(url.search);
+
+  const discount = searchParams.get('discount');
+  const discountArray = discount ? [discount] : [];
+
+  // create a cart
+  const result = await cart.create({
+    lines: linesMap,
+    discountCodes: discountArray,
+  });
+
+  const cartResult = result.cart;
+
+  if (result.errors?.length || !cartResult) {
+    throw new Response('Link may be expired. Try checking the URL.', {
+      status: 410,
+    });
+  }
+
+  // Update cart id in cookie
+  const headers = cart.setCartId(cartResult.id);
+
+  // redirect to checkout
+  if (cartResult.checkoutUrl) {
+    return redirect(cartResult.checkoutUrl, {headers});
+  } else {
+    throw new Error('No checkout URL found');
+  }
+}
+
+export default function Component() {
+  return null;
+}

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

@@ -0,0 +1,102 @@
+import {Await, type MetaFunction, useRouteLoaderData} from '@remix-run/react';
+import {Suspense} from 'react';
+import type {CartQueryDataReturn} from '@shopify/hydrogen';
+import {CartForm} from '@shopify/hydrogen';
+import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
+import {CartMain} from '~/components/CartMain';
+import type {RootLoader} from '~/root';
+
+export const meta: MetaFunction = () => {
+  return [{title: `Hydrogen | Cart`}];
+};
+
+export async function action({request, context}: ActionFunctionArgs) {
+  const {cart} = context;
+
+  const formData = await request.formData();
+
+  const {action, inputs} = CartForm.getFormInput(formData);
+
+  if (!action) {
+    throw new Error('No action provided');
+  }
+
+  let status = 200;
+  let result: CartQueryDataReturn;
+
+  switch (action) {
+    case CartForm.ACTIONS.LinesAdd:
+      result = await cart.addLines(inputs.lines);
+      break;
+    case CartForm.ACTIONS.LinesUpdate:
+      result = await cart.updateLines(inputs.lines);
+      break;
+    case CartForm.ACTIONS.LinesRemove:
+      result = await cart.removeLines(inputs.lineIds);
+      break;
+    case CartForm.ACTIONS.DiscountCodesUpdate: {
+      const formDiscountCode = inputs.discountCode;
+
+      // User inputted discount code
+      const discountCodes = (
+        formDiscountCode ? [formDiscountCode] : []
+      ) as string[];
+
+      // Combine discount codes already applied on cart
+      discountCodes.push(...inputs.discountCodes);
+
+      result = await cart.updateDiscountCodes(discountCodes);
+      break;
+    }
+    case CartForm.ACTIONS.BuyerIdentityUpdate: {
+      result = await cart.updateBuyerIdentity({
+        ...inputs.buyerIdentity,
+      });
+      break;
+    }
+    default:
+      throw new Error(`${action} cart action is not defined`);
+  }
+
+  const cartId = result?.cart?.id;
+  const headers = cartId ? cart.setCartId(result.cart.id) : new Headers();
+  const {cart: cartResult, errors} = result;
+
+  const redirectTo = formData.get('redirectTo') ?? null;
+  if (typeof redirectTo === 'string') {
+    status = 303;
+    headers.set('Location', redirectTo);
+  }
+
+  return json(
+    {
+      cart: cartResult,
+      errors,
+      analytics: {
+        cartId,
+      },
+    },
+    {status, headers},
+  );
+}
+
+export default function Cart() {
+  const rootData = useRouteLoaderData<RootLoader>('root');
+  if (!rootData) return null;
+
+  return (
+    <div className="cart">
+      <h1>Cart</h1>
+      <Suspense fallback={<p>Loading cart ...</p>}>
+        <Await
+          resolve={rootData.cart}
+          errorElement={<div>An error occurred</div>}
+        >
+          {(cart) => {
+            return <CartMain layout="page" cart={cart} />;
+          }}
+        </Await>
+      </Suspense>
+    </div>
+  );
+}