@shopify/create-hydrogen 4.3.13 → 5.0.0

package/dist/assets/hydrogen/starter/app/graphql/customer-account/CustomerOrderQuery.ts

@@ -0,0 +1,87 @@
+// NOTE: https://shopify.dev/docs/api/customer/latest/queries/order
+export const CUSTOMER_ORDER_QUERY = `#graphql
+  fragment OrderMoney on MoneyV2 {
+    amount
+    currencyCode
+  }
+  fragment DiscountApplication on DiscountApplication {
+    value {
+      __typename
+      ... on MoneyV2 {
+        ...OrderMoney
+      }
+      ... on PricingPercentageValue {
+        percentage
+      }
+    }
+  }
+  fragment OrderLineItemFull on LineItem {
+    id
+    title
+    quantity
+    price {
+      ...OrderMoney
+    }
+    discountAllocations {
+      allocatedAmount {
+        ...OrderMoney
+      }
+      discountApplication {
+        ...DiscountApplication
+      }
+    }
+    totalDiscount {
+      ...OrderMoney
+    }
+    image {
+      altText
+      height
+      url
+      id
+      width
+    }
+    variantTitle
+  }
+  fragment Order on Order {
+    id
+    name
+    statusPageUrl
+    processedAt
+    fulfillments(first: 1) {
+      nodes {
+        status
+      }
+    }
+    totalTax {
+      ...OrderMoney
+    }
+    totalPrice {
+      ...OrderMoney
+    }
+    subtotal {
+      ...OrderMoney
+    }
+    shippingAddress {
+      name
+      formatted(withName: true)
+      formattedArea
+    }
+    discountApplications(first: 100) {
+      nodes {
+        ...DiscountApplication
+      }
+    }
+    lineItems(first: 100) {
+      nodes {
+        ...OrderLineItemFull
+      }
+    }
+  }
+  query Order($orderId: ID!) {
+    order(id: $orderId) {
+      ... on Order {
+        ...Order
+      }
+    }
+  }
+` as const;

package/dist/assets/hydrogen/starter/app/graphql/customer-account/CustomerOrdersQuery.ts

@@ -0,0 +1,58 @@
+// https://shopify.dev/docs/api/customer/latest/objects/Order
+export const ORDER_ITEM_FRAGMENT = `#graphql
+  fragment OrderItem on Order {
+    totalPrice {
+      amount
+      currencyCode
+    }
+    financialStatus
+    fulfillments(first: 1) {
+      nodes {
+        status
+      }
+    }
+    id
+    number
+    processedAt
+  }
+` as const;
+
+// https://shopify.dev/docs/api/customer/latest/objects/Customer
+export const CUSTOMER_ORDERS_FRAGMENT = `#graphql
+  fragment CustomerOrders on Customer {
+    orders(
+      sortKey: PROCESSED_AT,
+      reverse: true,
+      first: $first,
+      last: $last,
+      before: $startCursor,
+      after: $endCursor
+    ) {
+      nodes {
+        ...OrderItem
+      }
+      pageInfo {
+        hasPreviousPage
+        hasNextPage
+        endCursor
+        startCursor
+      }
+    }
+  }
+  ${ORDER_ITEM_FRAGMENT}
+` as const;
+
+// https://shopify.dev/docs/api/customer/latest/queries/customer
+export const CUSTOMER_ORDERS_QUERY = `#graphql
+  ${CUSTOMER_ORDERS_FRAGMENT}
+  query CustomerOrders(
+    $endCursor: String
+    $first: Int
+    $last: Int
+    $startCursor: String
+  ) {
+    customer {
+      ...CustomerOrders
+    }
+  }
+` as const;

package/dist/assets/hydrogen/starter/app/graphql/customer-account/CustomerUpdateMutation.ts

@@ -0,0 +1,24 @@
+export const CUSTOMER_UPDATE_MUTATION = `#graphql
+  # https://shopify.dev/docs/api/customer/latest/mutations/customerUpdate
+  mutation customerUpdate(
+    $customer: CustomerUpdateInput!
+  ){
+    customerUpdate(input: $customer) {
+      customer {
+        firstName
+        lastName
+        emailAddress {
+          emailAddress
+        }
+        phoneNumber {
+          phoneNumber
+        }
+      }
+      userErrors {
+        code
+        field
+        message
+      }
+    }
+  }
+` as const;

package/dist/assets/hydrogen/starter/app/lib/fragments.ts

@@ -0,0 +1,174 @@
+// NOTE: https://shopify.dev/docs/api/storefront/latest/queries/cart
+export const CART_QUERY_FRAGMENT = `#graphql
+  fragment Money on MoneyV2 {
+    currencyCode
+    amount
+  }
+  fragment CartLine on CartLine {
+    id
+    quantity
+    attributes {
+      key
+      value
+    }
+    cost {
+      totalAmount {
+        ...Money
+      }
+      amountPerQuantity {
+        ...Money
+      }
+      compareAtAmountPerQuantity {
+        ...Money
+      }
+    }
+    merchandise {
+      ... on ProductVariant {
+        id
+        availableForSale
+        compareAtPrice {
+          ...Money
+        }
+        price {
+          ...Money
+        }
+        requiresShipping
+        title
+        image {
+          id
+          url
+          altText
+          width
+          height
+
+        }
+        product {
+          handle
+          title
+          id
+          vendor
+        }
+        selectedOptions {
+          name
+          value
+        }
+      }
+    }
+  }
+  fragment CartApiQuery on Cart {
+    updatedAt
+    id
+    checkoutUrl
+    totalQuantity
+    buyerIdentity {
+      countryCode
+      customer {
+        id
+        email
+        firstName
+        lastName
+        displayName
+      }
+      email
+      phone
+    }
+    lines(first: $numCartLines) {
+      nodes {
+        ...CartLine
+      }
+    }
+    cost {
+      subtotalAmount {
+        ...Money
+      }
+      totalAmount {
+        ...Money
+      }
+      totalDutyAmount {
+        ...Money
+      }
+      totalTaxAmount {
+        ...Money
+      }
+    }
+    note
+    attributes {
+      key
+      value
+    }
+    discountCodes {
+      code
+      applicable
+    }
+  }
+` as const;
+
+const MENU_FRAGMENT = `#graphql
+  fragment MenuItem on MenuItem {
+    id
+    resourceId
+    tags
+    title
+    type
+    url
+  }
+  fragment ChildMenuItem on MenuItem {
+    ...MenuItem
+  }
+  fragment ParentMenuItem on MenuItem {
+    ...MenuItem
+    items {
+      ...ChildMenuItem
+    }
+  }
+  fragment Menu on Menu {
+    id
+    items {
+      ...ParentMenuItem
+    }
+  }
+` as const;
+
+export const HEADER_QUERY = `#graphql
+  fragment Shop on Shop {
+    id
+    name
+    description
+    primaryDomain {
+      url
+    }
+    brand {
+      logo {
+        image {
+          url
+        }
+      }
+    }
+  }
+  query Header(
+    $country: CountryCode
+    $headerMenuHandle: String!
+    $language: LanguageCode
+  ) @inContext(language: $language, country: $country) {
+    shop {
+      ...Shop
+    }
+    menu(handle: $headerMenuHandle) {
+      ...Menu
+    }
+  }
+  ${MENU_FRAGMENT}
+` as const;
+
+export const FOOTER_QUERY = `#graphql
+  query Footer(
+    $country: CountryCode
+    $footerMenuHandle: String!
+    $language: LanguageCode
+  ) @inContext(language: $language, country: $country) {
+    menu(handle: $footerMenuHandle) {
+      ...Menu
+    }
+  }
+  ${MENU_FRAGMENT}
+` as const;

package/dist/assets/hydrogen/starter/app/lib/search.ts

@@ -0,0 +1,29 @@
+import type {
+  PredictiveQueryFragment,
+  SearchProductFragment,
+  PredictiveProductFragment,
+  PredictiveCollectionFragment,
+  PredictivePageFragment,
+  PredictiveArticleFragment,
+} from 'storefrontapi.generated';
+
+export function applyTrackingParams(
+  resource:
+    | PredictiveQueryFragment
+    | SearchProductFragment
+    | PredictiveProductFragment
+    | PredictiveCollectionFragment
+    | PredictiveArticleFragment
+    | PredictivePageFragment,
+  params?: string,
+) {
+  if (params) {
+    return resource?.trackingParameters
+      ? `?${params}&${resource.trackingParameters}`
+      : `?${params}`;
+  } else {
+    return resource?.trackingParameters
+      ? `?${resource.trackingParameters}`
+      : '';
+  }
+}

package/dist/assets/hydrogen/starter/app/lib/session.ts

@@ -0,0 +1,72 @@
+import type {HydrogenSession} from '@shopify/hydrogen';
+import {
+  createCookieSessionStorage,
+  type SessionStorage,
+  type Session,
+} from '@shopify/remix-oxygen';
+
+/**
+ * This is a custom session implementation for your Hydrogen shop.
+ * Feel free to customize it to your needs, add helper methods, or
+ * swap out the cookie-based implementation with something else!
+ */
+export class AppSession implements HydrogenSession {
+  public isPending = false;
+
+  #sessionStorage;
+  #session;
+
+  constructor(sessionStorage: SessionStorage, session: Session) {
+    this.#sessionStorage = sessionStorage;
+    this.#session = session;
+  }
+
+  static async init(request: Request, secrets: string[]) {
+    const storage = createCookieSessionStorage({
+      cookie: {
+        name: 'session',
+        httpOnly: true,
+        path: '/',
+        sameSite: 'lax',
+        secrets,
+      },
+    });
+
+    const session = await storage
+      .getSession(request.headers.get('Cookie'))
+      .catch(() => storage.getSession());
+
+    return new this(storage, session);
+  }
+
+  get has() {
+    return this.#session.has;
+  }
+
+  get get() {
+    return this.#session.get;
+  }
+
+  get flash() {
+    return this.#session.flash;
+  }
+
+  get unset() {
+    this.isPending = true;
+    return this.#session.unset;
+  }
+
+  get set() {
+    this.isPending = true;
+    return this.#session.set;
+  }
+
+  destroy() {
+    return this.#sessionStorage.destroySession(this.#session);
+  }
+
+  commit() {
+    this.isPending = false;
+    return this.#sessionStorage.commitSession(this.#session);
+  }
+}

package/dist/assets/hydrogen/starter/app/lib/variants.ts

@@ -0,0 +1,46 @@
+import {useLocation} from '@remix-run/react';
+import type {SelectedOption} from '@shopify/hydrogen/storefront-api-types';
+import {useMemo} from 'react';
+
+export function useVariantUrl(
+  handle: string,
+  selectedOptions: SelectedOption[],
+) {
+  const {pathname} = useLocation();
+
+  return useMemo(() => {
+    return getVariantUrl({
+      handle,
+      pathname,
+      searchParams: new URLSearchParams(),
+      selectedOptions,
+    });
+  }, [handle, selectedOptions, pathname]);
+}
+
+export function getVariantUrl({
+  handle,
+  pathname,
+  searchParams,
+  selectedOptions,
+}: {
+  handle: string;
+  pathname: string;
+  searchParams: URLSearchParams;
+  selectedOptions: SelectedOption[];
+}) {
+  const match = /(\/[a-zA-Z]{2}-[a-zA-Z]{2}\/)/g.exec(pathname);
+  const isLocalePathname = match && match.length > 0;
+
+  const path = isLocalePathname
+    ? `${match![0]}products/${handle}`
+    : `/products/${handle}`;
+
+  selectedOptions.forEach((option) => {
+    searchParams.set(option.name, option.value);
+  });
+
+  const searchString = searchParams.toString();
+
+  return path + (searchString ? '?' + searchParams.toString() : '');
+}

package/dist/assets/hydrogen/starter/app/root.tsx

@@ -0,0 +1,191 @@
+import {useNonce, getShopAnalytics, Analytics} from '@shopify/hydrogen';
+import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  useRouteError,
+  useRouteLoaderData,
+  ScrollRestoration,
+  isRouteErrorResponse,
+  type ShouldRevalidateFunction,
+} from '@remix-run/react';
+import favicon from '~/assets/favicon.svg';
+import resetStyles from '~/styles/reset.css?url';
+import appStyles from '~/styles/app.css?url';
+import {PageLayout} from '~/components/PageLayout';
+import {FOOTER_QUERY, HEADER_QUERY} from '~/lib/fragments';
+
+export type RootLoader = typeof loader;
+
+/**
+ * This is important to avoid re-fetching root queries on sub-navigations
+ */
+export const shouldRevalidate: ShouldRevalidateFunction = ({
+  formMethod,
+  currentUrl,
+  nextUrl,
+}) => {
+  // revalidate when a mutation is performed e.g add to cart, login...
+  if (formMethod && formMethod !== 'GET') {
+    return true;
+  }
+
+  // revalidate when manually revalidating via useRevalidator
+  if (currentUrl.toString() === nextUrl.toString()) {
+    return true;
+  }
+
+  return false;
+};
+
+export function links() {
+  return [
+    {rel: 'stylesheet', href: resetStyles},
+    {rel: 'stylesheet', href: appStyles},
+    {
+      rel: 'preconnect',
+      href: 'https://cdn.shopify.com',
+    },
+    {
+      rel: 'preconnect',
+      href: 'https://shop.app',
+    },
+    {rel: 'icon', type: 'image/svg+xml', href: favicon},
+  ];
+}
+
+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);
+
+  const {storefront, env} = args.context;
+
+  return defer({
+    ...deferredData,
+    ...criticalData,
+    publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
+    shop: getShopAnalytics({
+      storefront,
+      publicStorefrontId: env.PUBLIC_STOREFRONT_ID,
+    }),
+    consent: {
+      checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
+      storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
+    },
+  });
+}
+
+/**
+ * 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}: LoaderFunctionArgs) {
+  const {storefront} = context;
+
+  const [header] = await Promise.all([
+    storefront.query(HEADER_QUERY, {
+      cache: storefront.CacheLong(),
+      variables: {
+        headerMenuHandle: 'main-menu', // Adjust to your header menu handle
+      },
+    }),
+    // Add other queries here, so that they are loaded in parallel
+  ]);
+
+  return {
+    header,
+  };
+}
+
+/**
+ * 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) {
+  const {storefront, customerAccount, cart} = context;
+
+  // defer the footer query (below the fold)
+  const footer = storefront
+    .query(FOOTER_QUERY, {
+      cache: storefront.CacheLong(),
+      variables: {
+        footerMenuHandle: 'footer', // Adjust to your footer menu handle
+      },
+    })
+    .catch((error) => {
+      // Log query errors, but don't throw them so the page can still render
+      console.error(error);
+      return null;
+    });
+  return {
+    cart: cart.get(),
+    isLoggedIn: customerAccount.isLoggedIn(),
+    footer,
+  };
+}
+
+export function Layout({children}: {children?: React.ReactNode}) {
+  const nonce = useNonce();
+  const data = useRouteLoaderData<RootLoader>('root');
+
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {data ? (
+          <Analytics.Provider
+            cart={data.cart}
+            shop={data.shop}
+            consent={data.consent}
+          >
+            <PageLayout {...data}>{children}</PageLayout>
+          </Analytics.Provider>
+        ) : (
+          children
+        )}
+        <ScrollRestoration nonce={nonce} />
+        <Scripts nonce={nonce} />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return <Outlet />;
+}
+
+export function ErrorBoundary() {
+  const error = useRouteError();
+  let errorMessage = 'Unknown error';
+  let errorStatus = 500;
+
+  if (isRouteErrorResponse(error)) {
+    errorMessage = error?.data?.message ?? error.data;
+    errorStatus = error.status;
+  } else if (error instanceof Error) {
+    errorMessage = error.message;
+  }
+
+  return (
+    <div className="route-error">
+      <h1>Oops</h1>
+      <h2>{errorStatus}</h2>
+      {errorMessage && (
+        <fieldset>
+          <pre>{errorMessage}</pre>
+        </fieldset>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,11 @@
+import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';
+
+export async function loader({request}: LoaderFunctionArgs) {
+  throw new Response(`${new URL(request.url).pathname} not found`, {
+    status: 404,
+  });
+}
+
+export default function CatchAllPage() {
+  return null;
+}