@shopify/cli-hydrogen 6.1.1 → 7.0.1

package/dist/generator-templates/starter/CHANGELOG.md

@@ -1,5 +1,71 @@
 # skeleton
 
+## 1.0.3
+
+### Patch Changes
+
+- ♻️ `CustomerClient` type is deprecated and replaced by `CustomerAccount` ([#1692](https://github.com/Shopify/hydrogen/pull/1692)) by [@michenly](https://github.com/michenly)
+
+- Updated dependencies [[`02798786`](https://github.com/Shopify/hydrogen/commit/02798786bf8ae5c53f6430723a86d62b8e94d120), [`52b15df4`](https://github.com/Shopify/hydrogen/commit/52b15df457ce723bbc83ad594ded73a7b06447d6), [`a2664362`](https://github.com/Shopify/hydrogen/commit/a2664362a7d89b34835553a9b0eb7af55ca70ae4), [`eee5d927`](https://github.com/Shopify/hydrogen/commit/eee5d9274b72404dfb0ffef30d5503fd553be5fe), [`c7b2017f`](https://github.com/Shopify/hydrogen/commit/c7b2017f11a2cb4d280dfd8f170e65a908b9ea02), [`06320ee4`](https://github.com/Shopify/hydrogen/commit/06320ee48b94dbfece945461031a252f454fd0a3)]:
+  - @shopify/hydrogen@2024.1.1
+  - @shopify/cli-hydrogen@7.0.1
+
+## 1.0.2
+
+### Patch Changes
+
+- Use new parameters introduced in Storefront API v2024-01 to fix redirection to the product's default variant when there are unknown query params in the URL. ([#1642](https://github.com/Shopify/hydrogen/pull/1642)) by [@wizardlyhel](https://github.com/wizardlyhel)
+
+  ```diff
+  -   selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions) {
+  +   selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions, ignoreUnknownOptions: true, caseInsensitiveMatch: true) {
+        ...ProductVariant
+      }
+  ```
+
+- Update the GraphQL config in `.graphqlrc.yml` to use the more modern `projects` structure: ([#1577](https://github.com/Shopify/hydrogen/pull/1577)) by [@frandiox](https://github.com/frandiox)
+
+  ```diff
+  -schema: node_modules/@shopify/hydrogen/storefront.schema.json
+  +projects:
+  + default:
+  +    schema: 'node_modules/@shopify/hydrogen/storefront.schema.json'
+  ```
+
+  This allows you to add additional projects to the GraphQL config, such as third party CMS schemas.
+
+  Also, you can modify the document paths used for the Storefront API queries. This is useful if you have a large codebase and want to exclude certain files from being used for codegen or other GraphQL utilities:
+
+  ```yaml
+  projects:
+    default:
+      schema: 'node_modules/@shopify/hydrogen/storefront.schema.json'
+      documents:
+        - '!*.d.ts'
+        - '*.{ts,tsx,js,jsx}'
+        - 'app/**/*.{ts,tsx,js,jsx}'
+  ```
+
+- Improve resiliency of `HydrogenSession` ([#1583](https://github.com/Shopify/hydrogen/pull/1583)) by [@blittle](https://github.com/blittle)
+
+- Update `@shopify/cli` dependency in `package.json`: ([#1579](https://github.com/Shopify/hydrogen/pull/1579)) by [@frandiox](https://github.com/frandiox)
+
+  ```diff
+  -   "@shopify/cli": "3.51.0",
+  +   "@shopify/cli": "3.52.0",
+  ```
+
+- - Update example and template Remix versions to `^2.5.1` ([#1639](https://github.com/Shopify/hydrogen/pull/1639)) by [@wizardlyhel](https://github.com/wizardlyhel)
+
+  - Enable Remix future flags:
+    - [`v3_fetcherPersist`](https://remix.run/docs/en/main/hooks/use-fetchers#additional-resources)
+    - [`v3_relativeSplatpath`](https://remix.run/docs/en/main/hooks/use-resolved-path#splat-paths)
+
+- Updated dependencies [[`810f48cf`](https://github.com/Shopify/hydrogen/commit/810f48cf5d55f0cfcac6e01fe481db8c76e77cd2), [`8c477cb5`](https://github.com/Shopify/hydrogen/commit/8c477cb565c3e018bf4e13bad01804c21611fb8a), [`42ac4138`](https://github.com/Shopify/hydrogen/commit/42ac4138553c7e1a438b075c4f9cb781edffebc4), [`0241b7d2`](https://github.com/Shopify/hydrogen/commit/0241b7d2dcb887d259ce9033aca356d391bc07df), [`6a897586`](https://github.com/Shopify/hydrogen/commit/6a897586bd0908db90736921d11e4b6bdf29c912), [`0ff63bed`](https://github.com/Shopify/hydrogen/commit/0ff63bed840f5b8a5eb9968b67bd9a5a57099253), [`6bc1d61c`](https://github.com/Shopify/hydrogen/commit/6bc1d61c17a9c9be13f52338d2ab940e64e73495), [`eb0f4bcc`](https://github.com/Shopify/hydrogen/commit/eb0f4bccb57966a00ecb2b88d17dd694599da340), [`400bfee6`](https://github.com/Shopify/hydrogen/commit/400bfee6836a51c6ab5e4804e8b1e9ad48856dcb), [`a69c21ca`](https://github.com/Shopify/hydrogen/commit/a69c21caa15dfedb88afd50f262f17bf86f74836), [`970073e7`](https://github.com/Shopify/hydrogen/commit/970073e78258880505e0de563136b5379d5d24af), [`772118ca`](https://github.com/Shopify/hydrogen/commit/772118ca6aefbd47841fffc6ce42856c2dc779bd), [`335375a6`](https://github.com/Shopify/hydrogen/commit/335375a6b1a512f70e169a82bc87a8392dc8c92c), [`335371ce`](https://github.com/Shopify/hydrogen/commit/335371ceb6e1bd5aebb6104f131d3f22798a245f), [`94509b75`](https://github.com/Shopify/hydrogen/commit/94509b750afefd686971198ed86277e2c70f3176), [`36d6fa2c`](https://github.com/Shopify/hydrogen/commit/36d6fa2c4fa54ff79f06ef17aa41f60478977bc0), [`3e7b6e8a`](https://github.com/Shopify/hydrogen/commit/3e7b6e8a3bf66bad7fc0f9c224f1c163dbe3e288), [`cce65795`](https://github.com/Shopify/hydrogen/commit/cce6579580f849bec9a28cf575f7130ba3627f6b), [`9e3d88d4`](https://github.com/Shopify/hydrogen/commit/9e3d88d498efaa20fe23de9837e0f444180bc787), [`ca1161b2`](https://github.com/Shopify/hydrogen/commit/ca1161b29ad7b4d0838953782fb114d5fe82193a), [`92840e51`](https://github.com/Shopify/hydrogen/commit/92840e51820e5c7822f731affd3f591c0099be10), [`952fedf2`](https://github.com/Shopify/hydrogen/commit/952fedf27b869164550954d1c15f53b32ec02675), [`1bc053c9`](https://github.com/Shopify/hydrogen/commit/1bc053c94ba1be14ddc28be9eb70be7219b295d1)]:
+  - @shopify/hydrogen@2024.1.0
+  - @shopify/cli-hydrogen@7.0.0
+  - @shopify/remix-oxygen@2.0.3
+
 ## 1.0.1
 
 ### Patch Changes

package/dist/generator-templates/starter/README.md

@@ -38,3 +38,26 @@ npm run build
 ```bash
 npm run dev
 ```
+
+## Setup for using Customer Account API (`/account` section)
+
+### Setup public domain using ngrok
+
+1. Setup a [ngrok](https://ngrok.com/) account and add a permanent domain (ie. `https://<your-ngrok-domain>.app`).
+1. Install the [ngrok CLI](https://ngrok.com/download) to use in terminal
+1. Start ngrok using `ngrok http --domain=<your-ngrok-domain>.app 3000`
+
+### Include public domain in Customer Account API settings
+
+1. Go to your Shopify admin => `Hydrogen` or `Headless` app/channel => Customer Account API => Application setup
+1. Edit `Callback URI(s)` to include `https://<your-ngrok-domain>.app/account/authorize`
+1. Edit `Javascript origin(s)` to include your public domain `https://<your-ngrok-domain>.app` or keep it blank
+1. Edit `Logout URI` to include your public domain `https://<your-ngrok-domain>.app` or keep it blank
+
+### Prepare Environment variables
+
+Run [`npx shopify hydrogen link`](https://shopify.dev/docs/custom-storefronts/hydrogen/cli#link) or [`npx shopify hydrogen env pull`](https://shopify.dev/docs/custom-storefronts/hydrogen/cli#env-pull) to link this app to your own test shop.
+
+Alternatly, the values of the required environment varaibles "PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID" and "PUBLIC_CUSTOMER_ACCOUNT_API_URL" can be found in customer account api settings in the Hydrogen admin channel.
+
+🗒️ Note that mock.shop doesn't supply these variables automatically.

package/dist/generator-templates/starter/app/components/Cart.tsx

@@ -2,7 +2,7 @@ import {CartForm, Image, Money} from '@shopify/hydrogen';
 import type {CartLineUpdateInput} from '@shopify/hydrogen/storefront-api-types';
 import {Link} from '@remix-run/react';
 import type {CartApiQueryFragment} from 'storefrontapi.generated';
-import {useVariantUrl} from '~/utils';
+import {useVariantUrl} from '~/lib/variants';
 
 type CartLine = CartApiQueryFragment['lines']['nodes'][0];
 

package/dist/generator-templates/starter/app/components/Header.tsx

@@ -93,7 +93,11 @@ function HeaderCtas({
     <nav className="header-ctas" role="navigation">
       <HeaderMenuMobileToggle />
       <NavLink prefetch="intent" to="/account" style={activeLinkStyle}>
-        {isLoggedIn ? 'Account' : 'Sign in'}
+        <Suspense fallback="Sign in">
+          <Await resolve={isLoggedIn} errorElement="Sign in">
+            {(isLoggedIn) => (isLoggedIn ? 'Account' : 'Sign in')}
+          </Await>
+        </Suspense>
       </NavLink>
       <SearchToggle />
       <CartToggle cart={cart} />

package/dist/generator-templates/starter/app/components/Layout.tsx

@@ -19,7 +19,7 @@ export type LayoutProps = {
   children?: React.ReactNode;
   footer: Promise<FooterQuery>;
   header: HeaderQuery;
-  isLoggedIn: boolean;
+  isLoggedIn: Promise<boolean>;
 };
 
 export function Layout({

package/dist/generator-templates/starter/app/components/Search.tsx

@@ -211,7 +211,7 @@ function SearchResultArticleGrid({articles}: Pick<SearchQuery, 'articles'>) {
       <div>
         {articles?.nodes?.map((article) => (
           <div className="search-results-item" key={article.id}>
-            <Link prefetch="intent" to={`/blog/${article.handle}`}>
+            <Link prefetch="intent" to={`/blogs/${article.handle}`}>
               {article.title}
             </Link>
           </div>

package/dist/generator-templates/starter/app/graphql/customer-account/CustomerAddressMutations.ts

@@ -0,0 +1,61 @@
+// NOTE: https://shopify.dev/docs/api/customer/latest/mutations/customerAddressUpdate
+export const UPDATE_ADDRESS_MUTATION = `#graphql
+  mutation customerAddressUpdate(
+    $address: CustomerAddressInput!
+    $addressId: ID!
+    $defaultAddress: Boolean
+ ) {
+    customerAddressUpdate(
+      address: $address
+      addressId: $addressId
+      defaultAddress: $defaultAddress
+    ) {
+      customerAddress {
+        id
+      }
+      userErrors {
+        code
+        field
+        message
+      }
+    }
+  }
+` as const;
+
+// NOTE: https://shopify.dev/docs/api/customer/latest/mutations/customerAddressDelete
+export const DELETE_ADDRESS_MUTATION = `#graphql
+  mutation customerAddressDelete(
+    $addressId: ID!,
+  ) {
+    customerAddressDelete(addressId: $addressId) {
+      deletedAddressId
+      userErrors {
+        code
+        field
+        message
+      }
+    }
+  }
+` as const;
+
+// NOTE: https://shopify.dev/docs/api/customer/latest/mutations/customerAddressCreate
+export const CREATE_ADDRESS_MUTATION = `#graphql
+  mutation customerAddressCreate(
+    $address: CustomerAddressInput!
+    $defaultAddress: Boolean
+  ) {
+    customerAddressCreate(
+      address: $address
+      defaultAddress: $defaultAddress
+    ) {
+      customerAddress {
+        id
+      }
+      userErrors {
+        code
+        field
+        message
+      }
+    }
+  }
+` as const;

package/dist/generator-templates/starter/app/graphql/customer-account/CustomerDetailsQuery.ts

@@ -0,0 +1,39 @@
+// NOTE: https://shopify.dev/docs/api/customer/latest/objects/Customer
+export const CUSTOMER_FRAGMENT = `#graphql
+  fragment Customer on Customer {
+    firstName
+    lastName
+    defaultAddress {
+      ...Address
+    }
+    addresses(first: 6) {
+      nodes {
+        ...Address
+      }
+    }
+  }
+  fragment Address on CustomerAddress {
+    id
+    formatted
+    firstName
+    lastName
+    company
+    address1
+    address2
+    territoryCode
+    zoneCode
+    city
+    zip
+    phoneNumber
+  }
+` as const;
+
+// NOTE: https://shopify.dev/docs/api/customer/latest/queries/customer
+export const CUSTOMER_DETAILS_QUERY = `#graphql
+  query CustomerDetails {
+    customer {
+      ...Customer
+    }
+  }
+  ${CUSTOMER_FRAGMENT}
+` as const;

package/dist/generator-templates/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/generator-templates/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/generator-templates/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/generator-templates/starter/app/lib/fragments.ts

@@ -0,0 +1,102 @@
+// 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
+        }
+        selectedOptions {
+          name
+          value
+        }
+      }
+    }
+  }
+  fragment CartApiQuery on Cart {
+    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;

package/dist/generator-templates/starter/app/lib/session.ts

@@ -0,0 +1,67 @@
+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 {
+  #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() {
+    return this.#session.unset;
+  }
+
+  get set() {
+    return this.#session.set;
+  }
+
+  destroy() {
+    return this.#sessionStorage.destroySession(this.#session);
+  }
+
+  commit() {
+    return this.#sessionStorage.commitSession(this.#session);
+  }
+}

package/dist/generator-templates/starter/app/root.tsx

@@ -60,21 +60,19 @@ export function links() {
   ];
 }
 
+/**
+ * Access the result of the root loader from a React component.
+ */
 export const useRootLoaderData = () => {
   const [root] = useMatches();
   return root?.data as SerializeFrom<typeof loader>;
 };
 
 export async function loader({context}: LoaderFunctionArgs) {
-  const {storefront, session, cart} = context;
-  const customerAccessToken = await session.get('customerAccessToken');
+  const {storefront, customerAccount, cart} = context;
   const publicStoreDomain = context.env.PUBLIC_STORE_DOMAIN;
 
-  // validate the customer access token is valid
-  const {isLoggedIn, headers} = await validateCustomerAccessToken(
-    session,
-    customerAccessToken,
-  );
+  const isLoggedInPromise = customerAccount.isLoggedIn();
 
   // defer the cart query by not awaiting it
   const cartPromise = cart.get();
@@ -100,10 +98,14 @@ export async function loader({context}: LoaderFunctionArgs) {
       cart: cartPromise,
       footer: footerPromise,
       header: await headerPromise,
-      isLoggedIn,
+      isLoggedIn: isLoggedInPromise,
       publicStoreDomain,
     },
-    {headers},
+    {
+      headers: {
+        'Set-Cookie': await context.session.commit(),
+      },
+    },
   );
 }
 
@@ -173,42 +175,6 @@ export function ErrorBoundary() {
   );
 }
 
-/**
- * Validates the customer access token and returns a boolean and headers
- * @see https://shopify.dev/docs/api/storefront/latest/objects/CustomerAccessToken
- *
- * @example
- * ```js
- * const {isLoggedIn, headers} = await validateCustomerAccessToken(
- *  customerAccessToken,
- *  session,
- * );
- * ```
- */
-async function validateCustomerAccessToken(
-  session: LoaderFunctionArgs['context']['session'],
-  customerAccessToken?: CustomerAccessToken,
-) {
-  let isLoggedIn = false;
-  const headers = new Headers();
-  if (!customerAccessToken?.accessToken || !customerAccessToken?.expiresAt) {
-    return {isLoggedIn, headers};
-  }
-
-  const expiresAt = new Date(customerAccessToken.expiresAt).getTime();
-  const dateNow = Date.now();
-  const customerAccessTokenExpired = expiresAt < dateNow;
-
-  if (customerAccessTokenExpired) {
-    session.unset('customerAccessToken');
-    headers.append('Set-Cookie', await session.commit());
-  } else {
-    isLoggedIn = true;
-  }
-
-  return {isLoggedIn, headers};
-}
-
 const MENU_FRAGMENT = `#graphql
   fragment MenuItem on MenuItem {
     id

package/dist/generator-templates/starter/app/routes/account.$.tsx

@@ -1,8 +1,12 @@
 import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 
+// fallback wild card for all unauthenticated routes in account section
 export async function loader({context}: LoaderFunctionArgs) {
-  if (await context.session.get('customerAccessToken')) {
-    return redirect('/account');
-  }
-  return redirect('/account/login');
+  await context.customerAccount.handleAuthStatus();
+
+  return redirect('/account', {
+    headers: {
+      'Set-Cookie': await context.session.commit(),
+    },
+  });
 }