@shopify/create-hydrogen 4.3.13 → 5.0.0

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

@@ -0,0 +1,93 @@
+import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
+import {type Shop} from '@shopify/hydrogen/storefront-api-types';
+
+type SelectedPolicies = keyof Pick<
+  Shop,
+  'privacyPolicy' | 'shippingPolicy' | 'termsOfService' | 'refundPolicy'
+>;
+
+export const meta: MetaFunction<typeof loader> = ({data}) => {
+  return [{title: `Hydrogen | ${data?.policy.title ?? ''}`}];
+};
+
+export async function loader({params, context}: LoaderFunctionArgs) {
+  if (!params.handle) {
+    throw new Response('No handle was passed in', {status: 404});
+  }
+
+  const policyName = params.handle.replace(
+    /-([a-z])/g,
+    (_: unknown, m1: string) => m1.toUpperCase(),
+  ) as SelectedPolicies;
+
+  const data = await context.storefront.query(POLICY_CONTENT_QUERY, {
+    variables: {
+      privacyPolicy: false,
+      shippingPolicy: false,
+      termsOfService: false,
+      refundPolicy: false,
+      [policyName]: true,
+      language: context.storefront.i18n?.language,
+    },
+  });
+
+  const policy = data.shop?.[policyName];
+
+  if (!policy) {
+    throw new Response('Could not find the policy', {status: 404});
+  }
+
+  return json({policy});
+}
+
+export default function Policy() {
+  const {policy} = useLoaderData<typeof loader>();
+
+  return (
+    <div className="policy">
+      <br />
+      <br />
+      <div>
+        <Link to="/policies">← Back to Policies</Link>
+      </div>
+      <br />
+      <h1>{policy.title}</h1>
+      <div dangerouslySetInnerHTML={{__html: policy.body}} />
+    </div>
+  );
+}
+
+// NOTE: https://shopify.dev/docs/api/storefront/latest/objects/Shop
+const POLICY_CONTENT_QUERY = `#graphql
+  fragment Policy on ShopPolicy {
+    body
+    handle
+    id
+    title
+    url
+  }
+  query Policy(
+    $country: CountryCode
+    $language: LanguageCode
+    $privacyPolicy: Boolean!
+    $refundPolicy: Boolean!
+    $shippingPolicy: Boolean!
+    $termsOfService: Boolean!
+  ) @inContext(language: $language, country: $country) {
+    shop {
+      privacyPolicy @include(if: $privacyPolicy) {
+        ...Policy
+      }
+      shippingPolicy @include(if: $shippingPolicy) {
+        ...Policy
+      }
+      termsOfService @include(if: $termsOfService) {
+        ...Policy
+      }
+      refundPolicy @include(if: $refundPolicy) {
+        ...Policy
+      }
+    }
+  }
+` as const;

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

@@ -0,0 +1,63 @@
+import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {useLoaderData, Link} from '@remix-run/react';
+
+export async function loader({context}: LoaderFunctionArgs) {
+  const data = await context.storefront.query(POLICIES_QUERY);
+  const policies = Object.values(data.shop || {});
+
+  if (!policies.length) {
+    throw new Response('No policies found', {status: 404});
+  }
+
+  return json({policies});
+}
+
+export default function Policies() {
+  const {policies} = useLoaderData<typeof loader>();
+
+  return (
+    <div className="policies">
+      <h1>Policies</h1>
+      <div>
+        {policies.map((policy) => {
+          if (!policy) return null;
+          return (
+            <fieldset key={policy.id}>
+              <Link to={`/policies/${policy.handle}`}>{policy.title}</Link>
+            </fieldset>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+const POLICIES_QUERY = `#graphql
+  fragment PolicyItem on ShopPolicy {
+    id
+    title
+    handle
+  }
+  query Policies ($country: CountryCode, $language: LanguageCode)
+    @inContext(country: $country, language: $language) {
+    shop {
+      privacyPolicy {
+        ...PolicyItem
+      }
+      shippingPolicy {
+        ...PolicyItem
+      }
+      termsOfService {
+        ...PolicyItem
+      }
+      refundPolicy {
+        ...PolicyItem
+      }
+      subscriptionPolicy {
+        id
+        title
+        handle
+      }
+    }
+  }
+` as const;

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

@@ -0,0 +1,299 @@
+import {Suspense} from 'react';
+import {defer, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {Await, useLoaderData, type MetaFunction} from '@remix-run/react';
+import type {ProductFragment} from 'storefrontapi.generated';
+import {
+  getSelectedProductOptions,
+  Analytics,
+  useOptimisticVariant,
+} from '@shopify/hydrogen';
+import type {SelectedOption} from '@shopify/hydrogen/storefront-api-types';
+import {getVariantUrl} from '~/lib/variants';
+import {ProductPrice} from '~/components/ProductPrice';
+import {ProductImage} from '~/components/ProductImage';
+import {ProductForm} from '~/components/ProductForm';
+
+export const meta: MetaFunction<typeof loader> = ({data}) => {
+  return [{title: `Hydrogen | ${data?.product.title ?? ''}`}];
+};
+
+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;
+
+  if (!handle) {
+    throw new Error('Expected product handle to be defined');
+  }
+
+  const [{product}] = await Promise.all([
+    storefront.query(PRODUCT_QUERY, {
+      variables: {handle, selectedOptions: getSelectedProductOptions(request)},
+    }),
+    // Add other queries here, so that they are loaded in parallel
+  ]);
+
+  if (!product?.id) {
+    throw new Response(null, {status: 404});
+  }
+
+  const firstVariant = product.variants.nodes[0];
+  const firstVariantIsDefault = Boolean(
+    firstVariant.selectedOptions.find(
+      (option: SelectedOption) =>
+        option.name === 'Title' && option.value === 'Default Title',
+    ),
+  );
+
+  if (firstVariantIsDefault) {
+    product.selectedVariant = firstVariant;
+  } else {
+    // if no selected variant was returned from the selected options,
+    // we redirect to the first variant's url with it's selected options applied
+    if (!product.selectedVariant) {
+      throw redirectToFirstVariant({product, request});
+    }
+  }
+
+  return {
+    product,
+  };
+}
+
+/**
+ * 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, params}: LoaderFunctionArgs) {
+  // In order to show which variants are available in the UI, we need to query
+  // all of them. But there might be a *lot*, so instead separate the variants
+  // into it's own separate query that is deferred. So there's a brief moment
+  // where variant options might show as available when they're not, but after
+  // this deffered query resolves, the UI will update.
+  const variants = context.storefront
+    .query(VARIANTS_QUERY, {
+      variables: {handle: params.handle!},
+    })
+    .catch((error) => {
+      // Log query errors, but don't throw them so the page can still render
+      console.error(error);
+      return null;
+    });
+
+  return {
+    variants,
+  };
+}
+
+function redirectToFirstVariant({
+  product,
+  request,
+}: {
+  product: ProductFragment;
+  request: Request;
+}) {
+  const url = new URL(request.url);
+  const firstVariant = product.variants.nodes[0];
+
+  return redirect(
+    getVariantUrl({
+      pathname: url.pathname,
+      handle: product.handle,
+      selectedOptions: firstVariant.selectedOptions,
+      searchParams: new URLSearchParams(url.search),
+    }),
+    {
+      status: 302,
+    },
+  );
+}
+
+export default function Product() {
+  const {product, variants} = useLoaderData<typeof loader>();
+  const selectedVariant = useOptimisticVariant(
+    product.selectedVariant,
+    variants,
+  );
+
+  const {title, descriptionHtml} = product;
+
+  return (
+    <div className="product">
+      <ProductImage image={selectedVariant?.image} />
+      <div className="product-main">
+        <h1>{title}</h1>
+        <ProductPrice
+          price={selectedVariant?.price}
+          compareAtPrice={selectedVariant?.compareAtPrice}
+        />
+        <br />
+        <Suspense
+          fallback={
+            <ProductForm
+              product={product}
+              selectedVariant={selectedVariant}
+              variants={[]}
+            />
+          }
+        >
+          <Await
+            errorElement="There was a problem loading product variants"
+            resolve={variants}
+          >
+            {(data) => (
+              <ProductForm
+                product={product}
+                selectedVariant={selectedVariant}
+                variants={data?.product?.variants.nodes || []}
+              />
+            )}
+          </Await>
+        </Suspense>
+        <br />
+        <br />
+        <p>
+          <strong>Description</strong>
+        </p>
+        <br />
+        <div dangerouslySetInnerHTML={{__html: descriptionHtml}} />
+        <br />
+      </div>
+      <Analytics.ProductView
+        data={{
+          products: [
+            {
+              id: product.id,
+              title: product.title,
+              price: selectedVariant?.price.amount || '0',
+              vendor: product.vendor,
+              variantId: selectedVariant?.id || '',
+              variantTitle: selectedVariant?.title || '',
+              quantity: 1,
+            },
+          ],
+        }}
+      />
+    </div>
+  );
+}
+
+const PRODUCT_VARIANT_FRAGMENT = `#graphql
+  fragment ProductVariant on ProductVariant {
+    availableForSale
+    compareAtPrice {
+      amount
+      currencyCode
+    }
+    id
+    image {
+      __typename
+      id
+      url
+      altText
+      width
+      height
+    }
+    price {
+      amount
+      currencyCode
+    }
+    product {
+      title
+      handle
+    }
+    selectedOptions {
+      name
+      value
+    }
+    sku
+    title
+    unitPrice {
+      amount
+      currencyCode
+    }
+  }
+` as const;
+
+const PRODUCT_FRAGMENT = `#graphql
+  fragment Product on Product {
+    id
+    title
+    vendor
+    handle
+    descriptionHtml
+    description
+    options {
+      name
+      values
+    }
+    selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions, ignoreUnknownOptions: true, caseInsensitiveMatch: true) {
+      ...ProductVariant
+    }
+    variants(first: 1) {
+      nodes {
+        ...ProductVariant
+      }
+    }
+    seo {
+      description
+      title
+    }
+  }
+  ${PRODUCT_VARIANT_FRAGMENT}
+` as const;
+
+const PRODUCT_QUERY = `#graphql
+  query Product(
+    $country: CountryCode
+    $handle: String!
+    $language: LanguageCode
+    $selectedOptions: [SelectedOptionInput!]!
+  ) @inContext(country: $country, language: $language) {
+    product(handle: $handle) {
+      ...Product
+    }
+  }
+  ${PRODUCT_FRAGMENT}
+` as const;
+
+const PRODUCT_VARIANTS_FRAGMENT = `#graphql
+  fragment ProductVariants on Product {
+    variants(first: 250) {
+      nodes {
+        ...ProductVariant
+      }
+    }
+  }
+  ${PRODUCT_VARIANT_FRAGMENT}
+` as const;
+
+const VARIANTS_QUERY = `#graphql
+  ${PRODUCT_VARIANTS_FRAGMENT}
+  query ProductVariants(
+    $country: CountryCode
+    $language: LanguageCode
+    $handle: String!
+  ) @inContext(country: $country, language: $language) {
+    product(handle: $handle) {
+      ...ProductVariants
+    }
+  }
+` as const;

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

@@ -0,0 +1,177 @@
+import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {useLoaderData, type MetaFunction} from '@remix-run/react';
+import {getPaginationVariables, Analytics} from '@shopify/hydrogen';
+
+import {SearchForm, SearchResults, NoSearchResults} from '~/components/Search';
+
+export const meta: MetaFunction = () => {
+  return [{title: `Hydrogen | Search`}];
+};
+
+export async function loader({request, context}: LoaderFunctionArgs) {
+  const url = new URL(request.url);
+  const searchParams = new URLSearchParams(url.search);
+  const variables = getPaginationVariables(request, {pageBy: 8});
+  const searchTerm = String(searchParams.get('q') || '');
+
+  if (!searchTerm) {
+    return {
+      searchResults: {results: null, totalResults: 0},
+      searchTerm,
+    };
+  }
+
+  const {errors, ...data} = await context.storefront.query(SEARCH_QUERY, {
+    variables: {
+      query: searchTerm,
+      ...variables,
+    },
+  });
+
+  if (!data) {
+    throw new Error('No search data returned from Shopify API');
+  }
+
+  const totalResults = Object.values(data).reduce((total, value) => {
+    return total + value.nodes.length;
+  }, 0);
+
+  const searchResults = {
+    results: data,
+    totalResults,
+  };
+
+  return defer({
+    searchTerm,
+    searchResults,
+  });
+}
+
+export default function SearchPage() {
+  const {searchTerm, searchResults} = useLoaderData<typeof loader>();
+
+  return (
+    <div className="search">
+      <h1>Search</h1>
+      <SearchForm searchTerm={searchTerm} />
+      {!searchTerm || !searchResults.totalResults ? (
+        <NoSearchResults />
+      ) : (
+        <SearchResults
+          results={searchResults.results}
+          searchTerm={searchTerm}
+        />
+      )}
+      <Analytics.SearchView
+        data={{searchTerm, searchResults}}
+      />
+    </div>
+  );
+}
+
+const SEARCH_QUERY = `#graphql
+  fragment SearchProduct on Product {
+    __typename
+    handle
+    id
+    publishedAt
+    title
+    trackingParameters
+    vendor
+    variants(first: 1) {
+      nodes {
+        id
+        image {
+          url
+          altText
+          width
+          height
+        }
+        price {
+          amount
+          currencyCode
+        }
+        compareAtPrice {
+          amount
+          currencyCode
+        }
+        selectedOptions {
+          name
+          value
+        }
+        product {
+          handle
+          title
+        }
+      }
+    }
+  }
+  fragment SearchPage on Page {
+     __typename
+     handle
+    id
+    title
+    trackingParameters
+  }
+  fragment SearchArticle on Article {
+    __typename
+    handle
+    id
+    title
+    trackingParameters
+  }
+  query search(
+    $country: CountryCode
+    $endCursor: String
+    $first: Int
+    $language: LanguageCode
+    $last: Int
+    $query: String!
+    $startCursor: String
+  ) @inContext(country: $country, language: $language) {
+    products: search(
+      query: $query,
+      unavailableProducts: HIDE,
+      types: [PRODUCT],
+      first: $first,
+      sortKey: RELEVANCE,
+      last: $last,
+      before: $startCursor,
+      after: $endCursor
+    ) {
+      nodes {
+        ...on Product {
+          ...SearchProduct
+        }
+      }
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+        startCursor
+        endCursor
+      }
+    }
+    pages: search(
+      query: $query,
+      types: [PAGE],
+      first: 10
+    ) {
+      nodes {
+        ...on Page {
+          ...SearchPage
+        }
+      }
+    }
+    articles: search(
+      query: $query,
+      types: [ARTICLE],
+      first: 10
+    ) {
+      nodes {
+        ...on Article {
+          ...SearchArticle
+        }
+      }
+    }
+  }
+` as const;