@W-17917528 Upgrade to @tanstack/react-query v5

packages/commerce-sdk-react/CHANGELOG.md

@@ -1,3 +1,6 @@
+## v4.0.0-dev (Mar 07, 2025)
+- Upgrade `@tanstack/react-query` to v5 [#2303](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2303)
+
 ## v3.2.0-extensibility-preview.4 (Feb 12, 2025)
 - Add `ServerContext` type for `useServerContext` hook [#2239](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2239)
 

packages/commerce-sdk-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/commerce-sdk-react",
-  "version": "3.2.0-extensibility-preview.4",
+  "version": "4.0.0-extensibility-preview.1",
   "description": "A library that provides react hooks for fetching data from Commerce Cloud",
   "homepage": "https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/ecom-react-hooks#readme",
   "bugs": {
@@ -46,7 +46,7 @@
   },
   "devDependencies": {
     "@salesforce/pwa-kit-dev": "4.0.0-extensibility-preview.4",
-    "@tanstack/react-query": "^4.28.0",
+    "@tanstack/react-query": "^5.67.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
@@ -75,7 +75,7 @@
     "typescript": "4.9.5"
   },
   "peerDependencies": {
-    "@tanstack/react-query": "^4.28.0",
+    "@tanstack/react-query": "^5.67.1",
     "react": "^18.2.0",
     "react-helmet": "^6.1.0"
   },

packages/commerce-sdk-react/src/hooks/ShopperBaskets/query.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import {UseQueryResult} from '@tanstack/react-query'
 import {ApiClients, ApiQueryOptions, Argument, DataType, NullableParameters} from '../types'
 import useCommerceApi from '../useCommerceApi'
@@ -28,7 +29,7 @@ type Client = ApiClients['shopperBaskets']
 export const useBasket = (
     apiOptions: NullableParameters<Argument<Client['getBasket']>>,
     queryOptions: ApiQueryOptions<Client['getBasket']> = {}
-): UseQueryResult<DataType<Client['getBasket']>> => {
+): UseQueryResult<DataType<Client['getBasket']>, Error> => {
     type Options = Argument<Client['getBasket']>
     type Data = DataType<Client['getBasket']>
     const {shopperBaskets: client} = useCommerceApi()
@@ -50,6 +51,7 @@ export const useBasket = (
 
     // For some reason, if we don't explicitly set these generic parameters, the inferred type for
     // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
+    // @ts-ignore Fix
     return useQuery<Client, Options, Data>({...netOptions, parameters}, queryOptions, {
         method,
         queryKey,
@@ -70,7 +72,7 @@ export const useBasket = (
 export const usePaymentMethodsForBasket = (
     apiOptions: NullableParameters<Argument<Client['getPaymentMethodsForBasket']>>,
     queryOptions: ApiQueryOptions<Client['getPaymentMethodsForBasket']> = {}
-): UseQueryResult<DataType<Client['getPaymentMethodsForBasket']>> => {
+): UseQueryResult<DataType<Client['getPaymentMethodsForBasket']>, Error> => {
     type Options = Argument<Client['getPaymentMethodsForBasket']>
     type Data = DataType<Client['getPaymentMethodsForBasket']>
     const {shopperBaskets: client} = useCommerceApi()
@@ -92,6 +94,7 @@ export const usePaymentMethodsForBasket = (
 
     // For some reason, if we don't explicitly set these generic parameters, the inferred type for
     // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
+    // @ts-ignore TODO: Fix react query result error generics
     return useQuery<Client, Options, Data>({...netOptions, parameters}, queryOptions, {
         method,
         queryKey,
@@ -112,7 +115,7 @@ export const usePaymentMethodsForBasket = (
 export const usePriceBooksForBasket = (
     apiOptions: NullableParameters<Argument<Client['getPriceBooksForBasket']>>,
     queryOptions: ApiQueryOptions<Client['getPriceBooksForBasket']> = {}
-): UseQueryResult<DataType<Client['getPriceBooksForBasket']>> => {
+): UseQueryResult<DataType<Client['getPriceBooksForBasket']>, Error> => {
     type Options = Argument<Client['getPriceBooksForBasket']>
     type Data = DataType<Client['getPriceBooksForBasket']>
     const {shopperBaskets: client} = useCommerceApi()
@@ -134,6 +137,7 @@ export const usePriceBooksForBasket = (
 
     // For some reason, if we don't explicitly set these generic parameters, the inferred type for
     // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
+    // @ts-ignore TODO: Fix react query result error generics
     return useQuery<Client, Options, Data>({...netOptions, parameters}, queryOptions, {
         method,
         queryKey,
@@ -154,7 +158,7 @@ export const usePriceBooksForBasket = (
 export const useShippingMethodsForShipment = (
     apiOptions: NullableParameters<Argument<Client['getShippingMethodsForShipment']>>,
     queryOptions: ApiQueryOptions<Client['getShippingMethodsForShipment']> = {}
-): UseQueryResult<DataType<Client['getShippingMethodsForShipment']>> => {
+): UseQueryResult<DataType<Client['getShippingMethodsForShipment']>, Error> => {
     type Options = Argument<Client['getShippingMethodsForShipment']>
     type Data = DataType<Client['getShippingMethodsForShipment']>
     const {shopperBaskets: client} = useCommerceApi()
@@ -176,6 +180,7 @@ export const useShippingMethodsForShipment = (
 
     // For some reason, if we don't explicitly set these generic parameters, the inferred type for
     // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
+    // @ts-ignore TODO: Fix react query result error generics
     return useQuery<Client, Options, Data>({...netOptions, parameters}, queryOptions, {
         method,
         queryKey,
@@ -196,7 +201,7 @@ export const useShippingMethodsForShipment = (
 export const useTaxesFromBasket = (
     apiOptions: NullableParameters<Argument<Client['getTaxesFromBasket']>>,
     queryOptions: ApiQueryOptions<Client['getTaxesFromBasket']> = {}
-): UseQueryResult<DataType<Client['getTaxesFromBasket']>> => {
+): UseQueryResult<DataType<Client['getTaxesFromBasket']>, Error> => {
     type Options = Argument<Client['getTaxesFromBasket']>
     type Data = DataType<Client['getTaxesFromBasket']>
     const {shopperBaskets: client} = useCommerceApi()
@@ -218,6 +223,7 @@ export const useTaxesFromBasket = (
 
     // For some reason, if we don't explicitly set these generic parameters, the inferred type for
     // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
+    // @ts-ignore TODO: Fix react query result error generics
     return useQuery<Client, Options, Data>({...netOptions, parameters}, queryOptions, {
         method,
         queryKey,

packages/commerce-sdk-react/src/hooks/ShopperContexts/query.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import {UseQueryResult} from '@tanstack/react-query'
 import {ApiClients, ApiQueryOptions, Argument, DataType, NullableParameters} from '../types'
 import useCommerceApi from '../useCommerceApi'
@@ -28,7 +29,7 @@ type Client = ApiClients['shopperContexts']
 export const useShopperContext = (
     apiOptions: NullableParameters<Argument<Client['getShopperContext']>>,
     queryOptions: ApiQueryOptions<Client['getShopperContext']> = {}
-): UseQueryResult<DataType<Client['getShopperContext']>> => {
+): UseQueryResult<DataType<Client['getShopperContext']>, Error> => {
     type Options = Argument<Client['getShopperContext']>
     type Data = DataType<Client['getShopperContext']>
     const {shopperContexts: client} = useCommerceApi()
@@ -51,6 +52,7 @@ export const useShopperContext = (
 
     // For some reason, if we don't explicitly set these generic parameters, the inferred type for
     // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
+    // @ts-ignore TODO: Fix react query result error generics
     return useQuery<Client, Options, Data>({...netOptions, parameters}, queryOptions, {
         method,
         queryKey,

packages/commerce-sdk-react/src/hooks/ShopperCustomers/query.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import {UseQueryResult} from '@tanstack/react-query'
 import {ShopperCustomers} from 'commerce-sdk-isomorphic'
 import {ApiClients, ApiQueryOptions, Argument, DataType, NullableParameters} from '../types'
@@ -65,7 +66,7 @@ type Client = ApiClients['shopperCustomers']
 export const useCustomer = (
     apiOptions: NullableParameters<Argument<Client['getCustomer']>>,
     queryOptions: ApiQueryOptions<Client['getCustomer']> = {}
-): UseQueryResult<DataType<Client['getCustomer']>> => {
+): UseQueryResult<DataType<Client['getCustomer']>, Error> => {
     type Options = Argument<Client['getCustomer']>
     type Data = DataType<Client['getCustomer']>
     const {shopperCustomers: client} = useCommerceApi()
@@ -88,6 +89,7 @@ export const useCustomer = (
 
     // For some reason, if we don't explicitly set these generic parameters, the inferred type for
     // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
+    // @ts-ignore TODO: Fix react query result error generics
     return useQuery<Client, Options, Data>({...netOptions, parameters}, queryOptions, {
         method,
         queryKey,
@@ -108,7 +110,7 @@ export const useCustomer = (
 export const useCustomerAddress = (
     apiOptions: NullableParameters<Argument<Client['getCustomerAddress']>>,
     queryOptions: ApiQueryOptions<Client['getCustomerAddress']> = {}
-): UseQueryResult<DataType<Client['getCustomerAddress']>> => {
+): UseQueryResult<DataType<Client['getCustomerAddress']>, Error> => {
     type Options = Argument<Client['getCustomerAddress']>
     type Data = DataType<Client['getCustomerAddress']>
     const {shopperCustomers: client} = useCommerceApi()
@@ -133,6 +135,7 @@ export const useCustomerAddress = (
 
     // For some reason, if we don't explicitly set these generic parameters, the inferred type for
     // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
+    // @ts-ignore TODO: Fix react query result error generics
     return useQuery<Client, Options, Data>({...netOptions, parameters}, queryOptions, {
         method,
         queryKey,
@@ -153,7 +156,7 @@ export const useCustomerAddress = (
 export const useCustomerBaskets = (
     apiOptions: NullableParameters<Argument<Client['getCustomerBaskets']>>,
     queryOptions: ApiQueryOptions<Client['getCustomerBaskets']> = {}
-): UseQueryResult<DataType<Client['getCustomerBaskets']>> => {
+): UseQueryResult<DataType<Client['getCustomerBaskets']>, Error> => {
     type Options = Argument<Client['getCustomerBaskets']>
     type Data = DataType<Client['getCustomerBaskets']>
     const {shopperCustomers: client} = useCommerceApi()
@@ -178,6 +181,7 @@ export const useCustomerBaskets = (
 
     // For some reason, if we don't explicitly set these generic parameters, the inferred type for
     // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
+    // @ts-ignore TODO: Fix react query result error generics
     return useQuery<Client, Options, Data>({...netOptions, parameters}, queryOptions, {
         method,
         queryKey,
@@ -200,7 +204,7 @@ export const useCustomerBaskets = (
 export const useCustomerOrders = (
     apiOptions: NullableParameters<Argument<Client['getCustomerOrders']>>,
     queryOptions: ApiQueryOptions<Client['getCustomerOrders']> = {}
-): UseQueryResult<DataType<Client['getCustomerOrders']>> => {
+): UseQueryResult<DataType<Client['getCustomerOrders']>, Error> => {
     type Options = Argument<Client['getCustomerOrders']>
     type Data = DataType<Client['getCustomerOrders']>
     const {shopperCustomers: client} = useCommerceApi()
@@ -225,6 +229,7 @@ export const useCustomerOrders = (
 
     // For some reason, if we don't explicitly set these generic parameters, the inferred type for
     // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
+    // @ts-ignore TODO: Fix react query result error generics
     return useQuery<Client, Options, Data>({...netOptions, parameters}, queryOptions, {
         method,
         queryKey,
@@ -245,7 +250,7 @@ export const useCustomerOrders = (
 export const useCustomerPaymentInstrument = (
     apiOptions: NullableParameters<Argument<Client['getCustomerPaymentInstrument']>>,
     queryOptions: ApiQueryOptions<Client['getCustomerPaymentInstrument']> = {}
-): UseQueryResult<DataType<Client['getCustomerPaymentInstrument']>> => {
+): UseQueryResult<DataType<Client['getCustomerPaymentInstrument']>, Error> => {
     type Options = Argument<Client['getCustomerPaymentInstrument']>
     type Data = DataType<Client['getCustomerPaymentInstrument']>
     const {shopperCustomers: client} = useCommerceApi()
@@ -270,6 +275,7 @@ export const useCustomerPaymentInstrument = (
 
     // For some reason, if we don't explicitly set these generic parameters, the inferred type for
     // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
+    // @ts-ignore TODO: Fix react query result error generics
     return useQuery<Client, Options, Data>({...netOptions, parameters}, queryOptions, {
         method,
         queryKey,
@@ -290,7 +296,7 @@ export const useCustomerPaymentInstrument = (
 export const useCustomerProductLists = (
     apiOptions: NullableParameters<Argument<Client['getCustomerProductLists']>>,
     queryOptions: ApiQueryOptions<Client['getCustomerProductLists']> = {}
-): UseQueryResult<DataType<Client['getCustomerProductLists']>> => {
+): UseQueryResult<DataType<Client['getCustomerProductLists']>, Error> => {
     type Options = Argument<Client['getCustomerProductLists']>
     type Data = DataType<Client['getCustomerProductLists']>
     const {shopperCustomers: client} = useCommerceApi()
@@ -315,6 +321,7 @@ export const useCustomerProductLists = (
 
     // For some reason, if we don't explicitly set these generic parameters, the inferred type for
     // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
+    // @ts-ignore TODO: Fix react query result error generics
     return useQuery<Client, Options, Data>({...netOptions, parameters}, queryOptions, {
         method,
         queryKey,
@@ -335,7 +342,7 @@ export const useCustomerProductLists = (
 export const useCustomerProductList = (
     apiOptions: NullableParameters<Argument<Client['getCustomerProductList']>>,
     queryOptions: ApiQueryOptions<Client['getCustomerProductList']> = {}
-): UseQueryResult<DataType<Client['getCustomerProductList']>> => {
+): UseQueryResult<DataType<Client['getCustomerProductList']>, Error> => {
     type Options = Argument<Client['getCustomerProductList']>
     type Data = DataType<Client['getCustomerProductList']>
     const {shopperCustomers: client} = useCommerceApi()
@@ -360,6 +367,7 @@ export const useCustomerProductList = (
 
     // For some reason, if we don't explicitly set these generic parameters, the inferred type for
     // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
+    // @ts-ignore TODO: Fix react query result error generics
     return useQuery<Client, Options, Data>({...netOptions, parameters}, queryOptions, {
         method,
         queryKey,
@@ -380,7 +388,7 @@ export const useCustomerProductList = (
 export const useCustomerProductListItem = (
     apiOptions: NullableParameters<Argument<Client['getCustomerProductListItem']>>,
     queryOptions: ApiQueryOptions<Client['getCustomerProductListItem']> = {}
-): UseQueryResult<DataType<Client['getCustomerProductListItem']>> => {
+): UseQueryResult<DataType<Client['getCustomerProductListItem']>, Error> => {
     type Options = Argument<Client['getCustomerProductListItem']>
     type Data = DataType<Client['getCustomerProductListItem']>
     const {shopperCustomers: client} = useCommerceApi()
@@ -405,6 +413,7 @@ export const useCustomerProductListItem = (
 
     // For some reason, if we don't explicitly set these generic parameters, the inferred type for
     // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
+    // @ts-ignore TODO: Fix react query result error generics
     return useQuery<Client, Options, Data>({...netOptions, parameters}, queryOptions, {
         method,
         queryKey,
@@ -425,7 +434,7 @@ export const useCustomerProductListItem = (
 export const usePublicProductListsBySearchTerm = (
     apiOptions: NullableParameters<Argument<Client['getPublicProductListsBySearchTerm']>>,
     queryOptions: ApiQueryOptions<Client['getPublicProductListsBySearchTerm']> = {}
-): UseQueryResult<DataType<Client['getPublicProductListsBySearchTerm']>> => {
+): UseQueryResult<DataType<Client['getPublicProductListsBySearchTerm']>, Error> => {
     type Options = Argument<Client['getPublicProductListsBySearchTerm']>
     type Data = DataType<Client['getPublicProductListsBySearchTerm']>
     const {shopperCustomers: client} = useCommerceApi()
@@ -450,6 +459,7 @@ export const usePublicProductListsBySearchTerm = (
 
     // For some reason, if we don't explicitly set these generic parameters, the inferred type for
     // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
+    // @ts-ignore TODO: Fix react query result error generics
     return useQuery<Client, Options, Data>({...netOptions, parameters}, queryOptions, {
         method,
         queryKey,
@@ -470,7 +480,7 @@ export const usePublicProductListsBySearchTerm = (
 export const usePublicProductList = (
     apiOptions: NullableParameters<Argument<Client['getPublicProductList']>>,
     queryOptions: ApiQueryOptions<Client['getPublicProductList']> = {}
-): UseQueryResult<DataType<Client['getPublicProductList']>> => {
+): UseQueryResult<DataType<Client['getPublicProductList']>, Error> => {
     type Options = Argument<Client['getPublicProductList']>
     type Data = DataType<Client['getPublicProductList']>
     const {shopperCustomers: client} = useCommerceApi()
@@ -495,6 +505,7 @@ export const usePublicProductList = (
 
     // For some reason, if we don't explicitly set these generic parameters, the inferred type for
     // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
+    // @ts-ignore TODO: Fix react query result error generics
     return useQuery<Client, Options, Data>({...netOptions, parameters}, queryOptions, {
         method,
         queryKey,
@@ -515,7 +526,7 @@ export const usePublicProductList = (
 export const useProductListItem = (
     apiOptions: NullableParameters<Argument<Client['getProductListItem']>>,
     queryOptions: ApiQueryOptions<Client['getProductListItem']> = {}
-): UseQueryResult<DataType<Client['getProductListItem']>> => {
+): UseQueryResult<DataType<Client['getProductListItem']>, Error> => {
     type Options = Argument<Client['getProductListItem']>
     type Data = DataType<Client['getProductListItem']>
     const {shopperCustomers: client} = useCommerceApi()
@@ -540,6 +551,7 @@ export const useProductListItem = (
 
     // For some reason, if we don't explicitly set these generic parameters, the inferred type for
     // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
+    // @ts-ignore TODO: Fix react query result error generics
     return useQuery<Client, Options, Data>({...netOptions, parameters}, queryOptions, {
         method,
         queryKey,