hydrogen-forge 0.1.0

package/templates/starter/app/routes/api.$version.[graphql.json].tsx

@@ -0,0 +1,14 @@
+import type {Route} from './+types/api.$version.[graphql.json]';
+
+export async function action({params, context, request}: Route.ActionArgs) {
+  const response = await fetch(
+    `https://${context.env.PUBLIC_CHECKOUT_DOMAIN}/api/${params.version}/graphql.json`,
+    {
+      method: 'POST',
+      body: request.body,
+      headers: request.headers,
+    },
+  );
+
+  return new Response(response.body, {headers: new Headers(response.headers)});
+}

package/templates/starter/app/routes/blogs.$blogHandle.$articleHandle.tsx

@@ -0,0 +1,129 @@
+import {useLoaderData} from 'react-router';
+import type {Route} from './+types/blogs.$blogHandle.$articleHandle';
+import {Image} from '@shopify/hydrogen';
+import {redirectIfHandleIsLocalized} from '~/lib/redirect';
+
+export const meta: Route.MetaFunction = ({data}) => {
+  return [{title: `Hydrogen | ${data?.article.title ?? ''} article`}];
+};
+
+export async function loader(args: Route.LoaderArgs) {
+  // 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 {...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}: Route.LoaderArgs) {
+  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});
+  }
+
+  redirectIfHandleIsLocalized(
+    request,
+    {
+      handle: articleHandle,
+      data: blog.articleByHandle,
+    },
+    {
+      handle: blogHandle,
+      data: blog,
+    },
+  );
+
+  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}: Route.LoaderArgs) {
+  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>
+          <time dateTime={article.publishedAt}>{publishedDate}</time> &middot;{' '}
+          <address>{author?.name}</address>
+        </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) {
+      handle
+      articleByHandle(handle: $articleHandle) {
+        handle
+        title
+        contentHtml
+        publishedAt
+        author: authorV2 {
+          name
+        }
+        image {
+          id
+          altText
+          url
+          width
+          height
+        }
+        seo {
+          description
+          title
+        }
+      }
+    }
+  }
+` as const;

package/templates/starter/app/routes/blogs.$blogHandle._index.tsx

@@ -0,0 +1,175 @@
+import {Link, useLoaderData} from 'react-router';
+import type {Route} from './+types/blogs.$blogHandle._index';
+import {Image, getPaginationVariables} from '@shopify/hydrogen';
+import type {ArticleItemFragment} from 'storefrontapi.generated';
+import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
+import {redirectIfHandleIsLocalized} from '~/lib/redirect';
+
+export const meta: Route.MetaFunction = ({data}) => {
+  return [{title: `Hydrogen | ${data?.blog.title ?? ''} blog`}];
+};
+
+export async function loader(args: Route.LoaderArgs) {
+  // 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 {...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}: Route.LoaderArgs) {
+  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});
+  }
+
+  redirectIfHandleIsLocalized(request, {handle: params.blogHandle, data: 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}: Route.LoaderArgs) {
+  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">
+        <PaginatedResourceSection<ArticleItemFragment> connection={articles}>
+          {({node: article, index}) => (
+            <ArticleItem
+              article={article}
+              key={article.id}
+              loading={index < 2 ? 'eager' : 'lazy'}
+            />
+          )}
+        </PaginatedResourceSection>
+      </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
+      handle
+      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/templates/starter/app/routes/blogs._index.tsx

@@ -0,0 +1,109 @@
+import {Link, useLoaderData} from 'react-router';
+import type {Route} from './+types/blogs._index';
+import {getPaginationVariables} from '@shopify/hydrogen';
+import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
+import type {BlogsQuery} from 'storefrontapi.generated';
+
+type BlogNode = BlogsQuery['blogs']['nodes'][0];
+
+export const meta: Route.MetaFunction = () => {
+  return [{title: `Hydrogen | Blogs`}];
+};
+
+export async function loader(args: Route.LoaderArgs) {
+  // 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 {...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}: Route.LoaderArgs) {
+  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}: Route.LoaderArgs) {
+  return {};
+}
+
+export default function Blogs() {
+  const {blogs} = useLoaderData<typeof loader>();
+
+  return (
+    <div className="blogs">
+      <h1>Blogs</h1>
+      <div className="blogs-grid">
+        <PaginatedResourceSection<BlogNode> connection={blogs}>
+          {({node: blog}) => (
+            <Link
+              className="blog"
+              key={blog.handle}
+              prefetch="intent"
+              to={`/blogs/${blog.handle}`}
+            >
+              <h2>{blog.title}</h2>
+            </Link>
+          )}
+        </PaginatedResourceSection>
+      </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/templates/starter/app/routes/cart.$lines.tsx

@@ -0,0 +1,70 @@
+import {redirect} from 'react-router';
+import type {Route} from './+types/cart.$lines';
+
+/**
+ * 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}: Route.LoaderArgs) {
+  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/templates/starter/app/routes/cart.tsx

@@ -0,0 +1,117 @@
+import {useLoaderData, data, type HeadersFunction} from 'react-router';
+import type {Route} from './+types/cart';
+import type {CartQueryDataReturn} from '@shopify/hydrogen';
+import {CartForm} from '@shopify/hydrogen';
+import {CartMain} from '~/components/CartMain';
+
+export const meta: Route.MetaFunction = () => {
+  return [{title: `Hydrogen | Cart`}];
+};
+
+export const headers: HeadersFunction = ({actionHeaders}) => actionHeaders;
+
+export async function action({request, context}: Route.ActionArgs) {
+  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.GiftCardCodesUpdate: {
+      const formGiftCardCode = inputs.giftCardCode;
+
+      // User inputted gift card code
+      const giftCardCodes = (
+        formGiftCardCode ? [formGiftCardCode] : []
+      ) as string[];
+
+      // Combine gift card codes already applied on cart
+      giftCardCodes.push(...inputs.giftCardCodes);
+
+      result = await cart.updateGiftCardCodes(giftCardCodes);
+      break;
+    }
+    case CartForm.ACTIONS.GiftCardCodesRemove: {
+      const appliedGiftCardIds = inputs.giftCardCodes as string[];
+      result = await cart.removeGiftCardCodes(appliedGiftCardIds);
+      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, warnings} = result;
+
+  const redirectTo = formData.get('redirectTo') ?? null;
+  if (typeof redirectTo === 'string') {
+    status = 303;
+    headers.set('Location', redirectTo);
+  }
+
+  return data(
+    {
+      cart: cartResult,
+      errors,
+      warnings,
+      analytics: {
+        cartId,
+      },
+    },
+    {status, headers},
+  );
+}
+
+export async function loader({context}: Route.LoaderArgs) {
+  const {cart} = context;
+  return await cart.get();
+}
+
+export default function Cart() {
+  const cart = useLoaderData<typeof loader>();
+
+  return (
+    <div className="cart">
+      <h1>Cart</h1>
+      <CartMain layout="page" cart={cart} />
+    </div>
+  );
+}