diff --git a/packages/commerce-sdk-react/src/hooks/ShopperProducts/query.test.tsx b/packages/commerce-sdk-react/src/hooks/ShopperProducts/query.test.tsx
index 5f1f795fb2..eb419be4ff 100644
--- a/packages/commerce-sdk-react/src/hooks/ShopperProducts/query.test.tsx
+++ b/packages/commerce-sdk-react/src/hooks/ShopperProducts/query.test.tsx
@@ -83,6 +83,19 @@ const CategoryComponent = ({id}: {id: string}): ReactElement => {
)
}
+
+const IncorrectArguments = (): ReactElement => {
+ // @ts-ignore
+ const {isLoading, error} = useProducts({FOO: ''})
+
+ return (
+
+ {isLoading && Loading...}
+ {error && error}
+
+ )
+}
+
const tests = [
{
hook: 'useProducts',
@@ -117,6 +130,15 @@ const tests = [
expect(screen.getByText('error')).toBeInTheDocument()
expect(screen.queryByText('Loading...')).toBeNull()
})
+ },
+ {
+ name: 'returns validation error',
+ assertions: async () => {
+ renderWithProviders()
+ await waitFor(() => screen.getByText('error'))
+ expect(screen.getByText('error')).toBeInTheDocument()
+ expect(screen.queryByText('Loading...')).toBeNull()
+ }
}
]
},
diff --git a/packages/commerce-sdk-react/src/hooks/ShopperProducts/query.ts b/packages/commerce-sdk-react/src/hooks/ShopperProducts/query.ts
index a16a4a8392..0f39c51256 100644
--- a/packages/commerce-sdk-react/src/hooks/ShopperProducts/query.ts
+++ b/packages/commerce-sdk-react/src/hooks/ShopperProducts/query.ts
@@ -32,9 +32,6 @@ function useProducts(
arg: UseProductsArg,
options?: UseQueryOptions | Response, Error>
) {
- if (!arg.ids) {
- throw new Error('ids is required for useProducts')
- }
const {headers, rawResponse, ...parameters} = arg
return useAsync(
['products', arg],
@@ -67,9 +64,6 @@ function useProduct(
arg: UseProductArg,
options?: UseQueryOptions | Response, Error>
): UseQueryResult | Response, Error> {
- if (!arg.id) {
- throw new Error('id is required for useProduct.')
- }
const {headers, rawResponse, ...parameters} = arg
return useAsync(
['product', arg],
@@ -105,9 +99,6 @@ function useCategories(
arg: UseCategoriesArg,
options?: UseQueryOptions | Response, Error>
): UseQueryResult | Response, Error> {
- if (!arg.ids) {
- throw new Error('ids is required for useCategories')
- }
const {headers, rawResponse, ...parameters} = arg
return useAsync(
['categories', arg],
diff --git a/packages/commerce-sdk-react/src/test-utils.tsx b/packages/commerce-sdk-react/src/test-utils.tsx
index b2ce91ca52..10e68f3d25 100644
--- a/packages/commerce-sdk-react/src/test-utils.tsx
+++ b/packages/commerce-sdk-react/src/test-utils.tsx
@@ -23,7 +23,10 @@ export const TEST_CONFIG = {
currency: 'USD'
}
const TestProviders = (props: {children: React.ReactNode}) => {
- const queryClient = new QueryClient()
+ const queryClient = new QueryClient({
+ // During testing, we want things to fail immediately
+ defaultOptions: {queries: {retry: false}, mutations: {retry: false}}
+ })
return (
diff --git a/packages/test-commerce-sdk-react/app/pages/home.tsx b/packages/test-commerce-sdk-react/app/pages/home.tsx
index a33e5c5c4c..316090c7eb 100644
--- a/packages/test-commerce-sdk-react/app/pages/home.tsx
+++ b/packages/test-commerce-sdk-react/app/pages/home.tsx
@@ -18,6 +18,7 @@ const Home = () => {
demostrate the feature.
Happy coding.
+
Hooks
-
@@ -36,6 +37,13 @@ const Home = () => {
useShopperLoginHelper
+
+ Miscellaneous
+
>
)
}
diff --git a/packages/test-commerce-sdk-react/app/pages/query-errors.tsx b/packages/test-commerce-sdk-react/app/pages/query-errors.tsx
new file mode 100644
index 0000000000..578408caa7
--- /dev/null
+++ b/packages/test-commerce-sdk-react/app/pages/query-errors.tsx
@@ -0,0 +1,71 @@
+/*
+ * Copyright (c) 2022, Salesforce, Inc.
+ * All rights reserved.
+ * 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
+ */
+
+import React from 'react'
+import {useProducts, useProduct} from 'commerce-sdk-react'
+import Json from '../components/Json'
+
+const QueryErrors = () => {
+ // @ts-ignore
+ const products = useProducts({FOO: ''})
+ const product = useProduct({id: '25502228Mxxx'})
+
+ return (
+ <>
+ Query Errors
+
+
+ Two common errors you'll find when using the{' '}
+ commerce-sdk-isomorphic
library are:
+
+
+ -
+ Validation error (e.g. when you pass in the wrong arguments to
+ the function call)
+
+ -
+ Response error (e.g. 4xx and 5xx http errors from the
+ underlying Commerce API)
+
+
+
+ Validation Error
+ {products.isLoading && Loading...
}
+ {products.error && Something is wrong
}
+
+
+
+ Response Error
+ {product.isLoading && Loading...
}
+ {product.error && Something is wrong
}
+
+
+ >
+ )
+}
+
+QueryErrors.getTemplateName = () => 'QueryErrors'
+
+export default QueryErrors
diff --git a/packages/test-commerce-sdk-react/app/routes.tsx b/packages/test-commerce-sdk-react/app/routes.tsx
index c8c4d557e2..28bc1dbc51 100644
--- a/packages/test-commerce-sdk-react/app/routes.tsx
+++ b/packages/test-commerce-sdk-react/app/routes.tsx
@@ -14,6 +14,7 @@ const UseCategories = loadable(() => import('./pages/use-shopper-categories'))
const UseCategory = loadable(() => import('./pages/use-shopper-category'))
const UseProductSearch = loadable(() => import('./pages/use-product-search'))
const UseShopperLoginHelper = loadable(() => import('./pages/use-shopper-login-helper'))
+const QueryErrors = loadable(() => import('./pages/query-errors'))
const routes = [
{
@@ -48,6 +49,10 @@ const routes = [
{
path: '/slas-helpers',
component: UseShopperLoginHelper
+ },
+ {
+ path: '/query-errors',
+ component: QueryErrors
}
]