Updating to 2025-01 SFAPI (#2715)

Co-authored-by: Helen Lin <[email protected]>
Shopify · Jan 23, 2025 · 064de13 · 064de13
1 parent b45de26
commit 064de13
Show file tree

Hide file tree

Showing 74 changed files with 859 additions and 291 deletions.
diff --git a/.changeset/thick-lamps-attend.md b/.changeset/thick-lamps-attend.md
@@ -0,0 +1,9 @@
+---
+'@shopify/hydrogen-react': patch
+'skeleton': patch
+'@shopify/hydrogen': patch
+'@shopify/cli-hydrogen': patch
+'@shopify/create-hydrogen': patch
+---
+
+Bump SFAPI to 2025-01
diff --git a/examples/express/package.json b/examples/express/package.json
@@ -14,7 +14,7 @@
     "@remix-run/node": "^2.15.2",
     "@remix-run/react": "^2.15.2",
     "@remix-run/server-runtime": "^2.15.2",
-    "@shopify/hydrogen": "2024.10.1",
+    "@shopify/hydrogen": "2025.1.0",
     "compression": "^1.7.4",
     "cross-env": "^7.0.3",
     "express": "^4.19.2",

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/cli/src/lib/route-validator.test.ts b/packages/cli/src/lib/route-validator.test.ts
@@ -64,7 +64,7 @@ describe('reserved-routes', () => {
 
   it('returns an array of reserved routes', async () => {
     expect(
-      findReservedRoutes(createRoute('api/2024-10/graphql.json')),
+      findReservedRoutes(createRoute('api/2025-01/graphql.json')),
     ).toHaveLength(1);
 
     expect(

diff --git a/packages/hydrogen-react/codegen.ts b/packages/hydrogen-react/codegen.ts
@@ -4,8 +4,8 @@ import {
   customerAccountApiCustomScalars,
 } from './src/codegen.helpers';
 
-const SF_API_VERSION = '2024-10';
-const CA_API_VERSION = '2024-10';
+const SF_API_VERSION = '2025-01';
+const CA_API_VERSION = '2025-01';
 
 const storefrontAPISchema: CodegenConfig['schema'] = {
   [`https://hydrogen-preview.myshopify.com/api/${SF_API_VERSION}/graphql.json`]:

diff --git a/packages/hydrogen-react/customer-account.schema.json b/packages/hydrogen-react/customer-account.schema.json
diff --git a/packages/hydrogen-react/docs/staticPages/hydrogenReact.doc.ts b/packages/hydrogen-react/docs/staticPages/hydrogenReact.doc.ts
@@ -41,7 +41,7 @@ const data: LandingTemplateSchema = {
       anchorLink: 'authentication',
       title: 'Authentication',
       sectionContent:
-        'To use Hydrogen React, you need to authenticate with and make requests to the [Storefront API](/docs/api/storefront). Hydrogen React includes an [API client](/docs/api/hydrogen-react/2024-10/utilities/createstorefrontclient) to securely handle API queries and mutations.\n\nYou can create and manage Storefront API access tokens by installing the [Headless sales channel](https://apps.shopify.com/headless) on your store.\n\nApps have access to [two kinds of tokens](/docs/api/usage/authentication#access-tokens-for-the-storefront-api): a public API token, which can be used in client-side code, and a private API token, which should only be used in server-side contexts and never exposed publicly.',
+        'To use Hydrogen React, you need to authenticate with and make requests to the [Storefront API](/docs/api/storefront). Hydrogen React includes an [API client](/docs/api/hydrogen-react/2025-01/utilities/createstorefrontclient) to securely handle API queries and mutations.\n\nYou can create and manage Storefront API access tokens by installing the [Headless sales channel](https://apps.shopify.com/headless) on your store.\n\nApps have access to [two kinds of tokens](/docs/api/usage/authentication#access-tokens-for-the-storefront-api): a public API token, which can be used in client-side code, and a private API token, which should only be used in server-side contexts and never exposed publicly.',
       sectionCard: [
         {
           subtitle: 'Install',

diff --git a/packages/hydrogen-react/package.json b/packages/hydrogen-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@shopify/hydrogen-react",
-  "version": "2024.10.1",
+  "version": "2025.1.0",
   "description": "React components, hooks, and utilities for creating custom Shopify storefronts",
   "homepage": "https://github.com/Shopify/hydrogen/tree/main/packages/hydrogen-react",
   "license": "MIT",

diff --git a/packages/hydrogen-react/src/CartLineProvider.tsx b/packages/hydrogen-react/src/CartLineProvider.tsx
@@ -13,7 +13,7 @@ type CartLinePartialDeep = PartialDeep<
 export const CartLineContext = createContext<CartLinePartialDeep | null>(null);
 
 /**
- * The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/2024-10/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.
+ * The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/2025-01/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.
  */
 export function useCartLine(): CartLinePartialDeep {
   const context = useContext(CartLineContext);

diff --git a/packages/hydrogen-react/src/CartProvider.stories.tsx b/packages/hydrogen-react/src/CartProvider.stories.tsx
@@ -228,7 +228,7 @@ function CartComponent() {
 const config: ShopifyProviderProps = {
   storeDomain: 'hydrogen-preview.myshopify.com',
   storefrontToken: '3b580e70970c4528da70c98e097c2fa0',
-  storefrontApiVersion: '2024-10',
+  storefrontApiVersion: '2025-01',
   countryIsoCode: 'CA',
   languageIsoCode: 'EN',
 };
@@ -249,7 +249,7 @@ Default.args = {
   numCartLines: 30,
   /** A callback that is invoked when the process to create a cart begins, but before the cart is created in the Storefront API. */
   data: undefined,
-  /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/2024-10/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
+  /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/2025-01/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
   cartFragment: undefined,
   /** A customer access token that's accessible on the server if there's a customer login. */
   customerAccessToken: undefined,

diff --git a/packages/hydrogen-react/src/CartProvider.tsx b/packages/hydrogen-react/src/CartProvider.tsx
@@ -88,9 +88,9 @@ type CartProviderProps = {
   onAttributesUpdateComplete?: () => void;
   /** A callback that is invoked when the process to update the cart discount codes completes */
   onDiscountCodesUpdateComplete?: () => void;
-  /** An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/2024-10/objects/cart). */
+  /** An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/2025-01/objects/cart). */
   data?: PartialDeep<CartType, {recurseIntoArrays: true}>;
-  /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/2024-10/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
+  /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/2025-01/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
   cartFragment?: string;
   /** A customer access token that's accessible on the server if there's a customer login. */
   customerAccessToken?: CartBuyerIdentityInput['customerAccessToken'];

diff --git a/packages/hydrogen-react/src/Image.tsx b/packages/hydrogen-react/src/Image.tsx
@@ -67,7 +67,7 @@ type HydrogenImageBaseProps = {
    * @defaultValue `center`
    */
   crop?: Crop;
-  /** Data mapping to the [Storefront API `Image`](https://shopify.dev/docs/api/storefront/2024-10/objects/Image) object. Must be an Image object.
+  /** Data mapping to the [Storefront API `Image`](https://shopify.dev/docs/api/storefront/2025-01/objects/Image) object. Must be an Image object.
    *
    * @example
    * ```

diff --git a/packages/hydrogen-react/src/ModelViewer.tsx b/packages/hydrogen-react/src/ModelViewer.tsx
@@ -23,7 +23,7 @@ type ModelViewerProps = Omit<
   ModelViewerBaseProps;
 
 type ModelViewerBaseProps = {
-  /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/2024-10/objects/model3d). */
+  /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/2025-01/objects/model3d). */
   data: PartialDeep<Model3d, {recurseIntoArrays: true}>;
   /** The callback to invoke when the 'error' event is triggered. Refer to [error in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-error). */
   onError?: (event: Event) => void;

diff --git a/packages/hydrogen-react/src/Money.tsx b/packages/hydrogen-react/src/Money.tsx
@@ -12,7 +12,7 @@ export interface MoneyPropsBase<ComponentGeneric extends React.ElementType> {
   withoutCurrency?: boolean;
   /** Whether to remove trailing zeros (fractional money) from the output. */
   withoutTrailingZeros?: boolean;
-  /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/2024-10/objects/unitpricemeasurement). */
+  /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/2025-01/objects/unitpricemeasurement). */
   measurement?: PartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>;
   /** Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. */
   measurementSeparator?: ReactNode;

diff --git a/packages/hydrogen-react/src/ShopPayButton2.example.jsx b/packages/hydrogen-react/src/ShopPayButton2.example.jsx
@@ -5,7 +5,7 @@ export default function App() {
     <ShopifyProvider
       storeDomain="my-store"
       storefrontToken="abc123"
-      storefrontApiVersion="2024-10"
+      storefrontApiVersion="2025-01"
       countryIsoCode="CA"
       languageIsoCode="EN"
     >

diff --git a/packages/hydrogen-react/src/ShopPayButton2.example.tsx b/packages/hydrogen-react/src/ShopPayButton2.example.tsx
@@ -5,7 +5,7 @@ export default function App() {
     <ShopifyProvider
       storeDomain="my-store"
       storefrontToken="abc123"
-      storefrontApiVersion="2024-10"
+      storefrontApiVersion="2025-01"
       countryIsoCode="CA"
       languageIsoCode="EN"
     >

diff --git a/packages/hydrogen-react/src/ShopifyProvider.stories.tsx b/packages/hydrogen-react/src/ShopifyProvider.stories.tsx
@@ -51,5 +51,5 @@ export const Default = Template.bind({});
 Default.args = {
   storeDomain: 'notashop.myshopify.com',
   storefrontToken: 'abc123',
-  version: '2024-10',
+  version: '2025-01',
 };
diff --git a/packages/hydrogen-react/src/ShopifyProvider.test.tsx b/packages/hydrogen-react/src/ShopifyProvider.test.tsx
@@ -11,7 +11,7 @@ import type {PartialDeep} from 'type-fest';
 const SHOPIFY_CONFIG: ShopifyProviderProps = {
   storeDomain: 'https://notashop.myshopify.com',
   storefrontToken: 'abc123',
-  storefrontApiVersion: '2024-10',
+  storefrontApiVersion: '2025-01',
   countryIsoCode: 'CA',
   languageIsoCode: 'EN',
 };
@@ -41,7 +41,7 @@ describe('<ShopifyProvider/>', () => {
       });
 
       expect(result.current.getStorefrontApiUrl()).toBe(
-        'https://notashop.myshopify.com/api/2024-10/graphql.json',
+        'https://notashop.myshopify.com/api/2025-01/graphql.json',
       );
     });
 
@@ -84,7 +84,7 @@ describe('<ShopifyProvider/>', () => {
       ).toEqual({
         'X-SDK-Variant': 'hydrogen-react',
         'X-SDK-Variant-Source': 'react',
-        'X-SDK-Version': '2024-10',
+        'X-SDK-Version': '2025-01',
         'X-Shopify-Storefront-Access-Token': 'abc123',
         'content-type': 'application/json',
       });
@@ -110,7 +110,7 @@ describe('<ShopifyProvider/>', () => {
       ).toEqual({
         'X-SDK-Variant': 'hydrogen-react',
         'X-SDK-Variant-Source': 'react',
-        'X-SDK-Version': '2024-10',
+        'X-SDK-Version': '2025-01',
         'X-Shopify-Storefront-Access-Token': 'newtoken',
         'content-type': 'application/graphql',
       });
@@ -183,7 +183,7 @@ describe('<ShopifyProvider/>', () => {
       });
 
       expect(result.current.getStorefrontApiUrl()).toBe(
-        'https://notashop.myshopify.com/api/2024-10/graphql.json',
+        'https://notashop.myshopify.com/api/2025-01/graphql.json',
       );
     });
 
@@ -203,7 +203,7 @@ describe('<ShopifyProvider/>', () => {
         result.current.getStorefrontApiUrl({
           storeDomain: 'https://test.myshopify.com',
         }),
-      ).toBe('https://test.myshopify.com/api/2024-10/graphql.json');
+      ).toBe('https://test.myshopify.com/api/2025-01/graphql.json');
     });
 
     it(`handles when a '/' is at the end of the url and doesn't add an extra one`, () => {
@@ -219,7 +219,7 @@ describe('<ShopifyProvider/>', () => {
       });
 
       expect(result.current.getStorefrontApiUrl()).toBe(
-        'https://notashop.myshopify.com/api/2024-10/graphql.json',
+        'https://notashop.myshopify.com/api/2025-01/graphql.json',
       );
     });
   });
@@ -233,6 +233,6 @@ export function getShopifyConfig(
     languageIsoCode: config.languageIsoCode ?? 'EN',
     storeDomain: config.storeDomain ?? 'https://notashop.myshopify.io',
     storefrontToken: config.storefrontToken ?? 'abc123',
-    storefrontApiVersion: config.storefrontApiVersion ?? '2024-10',
+    storefrontApiVersion: config.storefrontApiVersion ?? '2025-01',
   };
 }
diff --git a/packages/hydrogen-react/src/Video.tsx b/packages/hydrogen-react/src/Video.tsx
@@ -4,7 +4,7 @@ import type {Video as VideoType} from './storefront-api-types.js';
 import type {PartialDeep} from 'type-fest';
 
 export interface VideoProps {
-  /** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/2024-10/objects/video). */
+  /** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/2025-01/objects/video). */
   data: PartialDeep<VideoType, {recurseIntoArrays: true}>;
   /** An object of image size options for the video's `previewImage`. Uses `shopifyImageLoader` to generate the `poster` URL. */
   previewImageOptions?: Parameters<typeof shopifyLoader>[0];

diff --git a/packages/hydrogen-react/src/codegen.helpers.ts b/packages/hydrogen-react/src/codegen.helpers.ts
@@ -1,6 +1,6 @@
 /**
  * Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly.
- * Reference for the GraphQL types: https://shopify.dev/docs/api/storefront/2024-10/scalars/HTML
+ * Reference for the GraphQL types: https://shopify.dev/docs/api/storefront/2025-01/scalars/HTML
  * Note: JSON is generated as 'unknown' by default.
  */
 export const storefrontApiCustomScalars = {
@@ -15,7 +15,7 @@ export const storefrontApiCustomScalars = {
 
 /**
  * Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly.
- * Reference for the GraphQL types: https://shopify.dev/docs/api/customer/2024-10/scalars/HTML
+ * Reference for the GraphQL types: https://shopify.dev/docs/api/customer/2025-01/scalars/HTML
  * Note: JSON is generated as 'unknown' by default.
  */
 export const customerAccountApiCustomScalars = {