Deprecate options.values and use options.optionValues instead

.changeset/quick-hotels-tell.md

@@ -0,0 +1,9 @@
+---
+'@shopify/hydrogen-react': patch
+'skeleton': patch
+'@shopify/hydrogen': patch
+'@shopify/cli-hydrogen': patch
+'@shopify/create-hydrogen': patch
+---
+
+Update to 2024-10 SFAPI

.changeset/strange-zebras-travel.md

@@ -0,0 +1,35 @@
+---
+'skeleton': patch
+'@shopify/hydrogen': patch
+'@shopify/cli-hydrogen': patch
+'@shopify/create-hydrogen': patch
+---
+
+SFAPI update - Deprecate usages of `product.options.values` and use `product.options.optionValues` instead.
+
+1. Update your product graphql query to use the new `optionValues` field.
+
+```diff
+  const PRODUCT_FRAGMENT = `#graphql
+    fragment Product on Product {
+      id
+      title
+      options {
+        name
+-        values
++        optionValues {
++          name
++        }
+      }
+```
+
+2. Update your `<VariantSelector>` to use the new `optionValues` field.
+
+```diff
+  <VariantSelector
+    handle={product.handle}
+-    options={product.options.filter((option) => option.values.length > 1)}
++    options={product.options.filter((option) => option.optionValues.length > 1)}
+    variants={variants}
+  >
+```

examples/b2b/app/components/ProductForm.tsx

@@ -27,7 +27,7 @@ export function ProductForm({
     <div className="product-form">
       <VariantSelector
         handle={product.handle}
-        options={product.options.filter((option) => option.values.length > 1)}
+        options={product.options.filter((option) => option.optionValues.length > 1)}
         variants={variants}
       >
         {({option}) => <ProductOptions key={option.name} option={option} />}

examples/b2b/app/routes/products.$handle.tsx

@@ -338,7 +338,9 @@ const PRODUCT_FRAGMENT = `#graphql
     description
     options {
       name
-      values
+      optionValues {
+        name
+      }
     }
     selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions, ignoreUnknownOptions: true, caseInsensitiveMatch: true) {
       ...ProductVariant

examples/b2b/storefrontapi.generated.d.ts

@@ -750,7 +750,11 @@ export type ProductFragment = Pick<
   StorefrontAPI.Product,
   'id' | 'title' | 'vendor' | 'handle' | 'descriptionHtml' | 'description'
 > & {
-  options: Array<Pick<StorefrontAPI.ProductOption, 'name' | 'values'>>;
+  options: Array<
+    Pick<StorefrontAPI.ProductOption, 'name'> & {
+      optionValues: Array<Pick<StorefrontAPI.ProductOptionValue, 'name'>>;
+    }
+  >;
   selectedVariant?: StorefrontAPI.Maybe<
     Pick<
       StorefrontAPI.ProductVariant,
@@ -842,7 +846,11 @@ export type ProductQuery = {
       StorefrontAPI.Product,
       'id' | 'title' | 'vendor' | 'handle' | 'descriptionHtml' | 'description'
     > & {
-      options: Array<Pick<StorefrontAPI.ProductOption, 'name' | 'values'>>;
+      options: Array<
+        Pick<StorefrontAPI.ProductOption, 'name'> & {
+          optionValues: Array<Pick<StorefrontAPI.ProductOptionValue, 'name'>>;
+        }
+      >;
       selectedVariant?: StorefrontAPI.Maybe<
         Pick<
           StorefrontAPI.ProductVariant,
@@ -1296,7 +1304,7 @@ interface GeneratedQueryTypes {
     return: PoliciesQuery;
     variables: PoliciesQueryVariables;
   };
-  '#graphql\n  query Product(\n    $country: CountryCode\n    $buyer: BuyerInput\n    $handle: String!\n    $language: LanguageCode\n    $selectedOptions: [SelectedOptionInput!]!\n  ) @inContext(country: $country, language: $language, buyer: $buyer) {\n    product(handle: $handle) {\n      ...Product\n    }\n  }\n  #graphql\n  fragment Product on Product {\n    id\n    title\n    vendor\n    handle\n    descriptionHtml\n    description\n    options {\n      name\n      values\n    }\n    selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions, ignoreUnknownOptions: true, caseInsensitiveMatch: true) {\n      ...ProductVariant\n    }\n    variants(first: 1) {\n      nodes {\n        ...ProductVariant\n      }\n    }\n    seo {\n      description\n      title\n    }\n  }\n  #graphql\n  fragment ProductVariant on ProductVariant {\n    availableForSale\n    compareAtPrice {\n      amount\n      currencyCode\n    }\n    id\n    image {\n      __typename\n      id\n      url\n      altText\n      width\n      height\n    }\n    price {\n      amount\n      currencyCode\n    }\n    product {\n      title\n      handle\n    }\n    selectedOptions {\n      name\n      value\n    }\n    quantityRule {\n      maximum\n      minimum\n      increment\n    }\n    quantityPriceBreaks(first: 5) {\n      nodes {\n        minimumQuantity\n        price {\n          amount\n          currencyCode\n        }\n      }\n    }\n    sku\n    title\n    unitPrice {\n      amount\n      currencyCode\n    }\n  }\n\n\n': {
+  '#graphql\n  query Product(\n    $country: CountryCode\n    $buyer: BuyerInput\n    $handle: String!\n    $language: LanguageCode\n    $selectedOptions: [SelectedOptionInput!]!\n  ) @inContext(country: $country, language: $language, buyer: $buyer) {\n    product(handle: $handle) {\n      ...Product\n    }\n  }\n  #graphql\n  fragment Product on Product {\n    id\n    title\n    vendor\n    handle\n    descriptionHtml\n    description\n    options {\n      name\n      optionValues {\n        name\n      }\n    }\n    selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions, ignoreUnknownOptions: true, caseInsensitiveMatch: true) {\n      ...ProductVariant\n    }\n    variants(first: 1) {\n      nodes {\n        ...ProductVariant\n      }\n    }\n    seo {\n      description\n      title\n    }\n  }\n  #graphql\n  fragment ProductVariant on ProductVariant {\n    availableForSale\n    compareAtPrice {\n      amount\n      currencyCode\n    }\n    id\n    image {\n      __typename\n      id\n      url\n      altText\n      width\n      height\n    }\n    price {\n      amount\n      currencyCode\n    }\n    product {\n      title\n      handle\n    }\n    selectedOptions {\n      name\n      value\n    }\n    quantityRule {\n      maximum\n      minimum\n      increment\n    }\n    quantityPriceBreaks(first: 5) {\n      nodes {\n        minimumQuantity\n        price {\n          amount\n          currencyCode\n        }\n      }\n    }\n    sku\n    title\n    unitPrice {\n      amount\n      currencyCode\n    }\n  }\n\n\n': {
     return: ProductQuery;
     variables: ProductQueryVariables;
   };

examples/express/package.json

@@ -14,7 +14,7 @@
     "@remix-run/node": "^2.10.1",
     "@remix-run/react": "^2.10.1",
     "@remix-run/server-runtime": "^2.10.1",
-    "@shopify/hydrogen": "2024.7.8",
+    "@shopify/hydrogen": "2024.10.0",
     "compression": "^1.7.4",
     "cross-env": "^7.0.3",
     "express": "^4.19.2",

packages/hydrogen-react/codegen.ts

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

packages/hydrogen-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/hydrogen-react",
-  "version": "2024.7.5",
+  "version": "2024.10.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",

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-07',
+  storefrontApiVersion: '2024-10',
   countryIsoCode: 'CA',
   languageIsoCode: 'EN',
 };

packages/hydrogen-react/src/ShopPayButton2.example.jsx

@@ -5,7 +5,7 @@ export default function App() {
     <ShopifyProvider
       storeDomain="my-store"
       storefrontToken="abc123"
-      storefrontApiVersion="2024-07"
+      storefrontApiVersion="2024-10"
       countryIsoCode="CA"
       languageIsoCode="EN"
     >

packages/hydrogen-react/src/ShopPayButton2.example.tsx

@@ -5,7 +5,7 @@ export default function App() {
     <ShopifyProvider
       storeDomain="my-store"
       storefrontToken="abc123"
-      storefrontApiVersion="2024-07"
+      storefrontApiVersion="2024-10"
       countryIsoCode="CA"
       languageIsoCode="EN"
     >

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-07',
+  version: '2024-10',
 };

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-07',
+  storefrontApiVersion: '2024-10',
   countryIsoCode: 'CA',
   languageIsoCode: 'EN',
 };
@@ -41,7 +41,7 @@ describe('<ShopifyProvider/>', () => {
       });
 
       expect(result.current.getStorefrontApiUrl()).toBe(
-        'https://notashop.myshopify.com/api/2024-07/graphql.json',
+        'https://notashop.myshopify.com/api/2024-10/graphql.json',
       );
     });
 
@@ -84,7 +84,7 @@ describe('<ShopifyProvider/>', () => {
       ).toEqual({
         'X-SDK-Variant': 'hydrogen-react',
         'X-SDK-Variant-Source': 'react',
-        'X-SDK-Version': '2024-07',
+        'X-SDK-Version': '2024-10',
         '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-07',
+        'X-SDK-Version': '2024-10',
         '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-07/graphql.json',
+        'https://notashop.myshopify.com/api/2024-10/graphql.json',
       );
     });
 
@@ -203,7 +203,7 @@ describe('<ShopifyProvider/>', () => {
         result.current.getStorefrontApiUrl({
           storeDomain: 'https://test.myshopify.com',
         }),
-      ).toBe('https://test.myshopify.com/api/2024-07/graphql.json');
+      ).toBe('https://test.myshopify.com/api/2024-10/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-07/graphql.json',
+        'https://notashop.myshopify.com/api/2024-10/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-07',
+    storefrontApiVersion: config.storefrontApiVersion ?? '2024-10',
   };
 }