From eb0c06c303eef47d7591dfa88deb945e521d4415 Mon Sep 17 00:00:00 2001 From: Vincent Marta Date: Mon, 3 Oct 2022 17:23:36 -0700 Subject: [PATCH] Handle validation error from commerce-sdk-isomorphic (#718) * 1st attempt at disabling retry when seeing validation error * Make sure the retries would stop * Add todos * Add comment * Some refactoring and typing * Remove some guards * Add comments * Remove comments * Demonstrate user error * React Query's retries are now done only for 5xx server errors * For easier debugging * Revert change Since we plan to remove the QueryClientProvider in our commerce hooks. See PR #734 * Disable retries And set the option at the individual query level. * Revert adding query options on individual queries * Remove todo We can't use ResponseError yet, since it's not exported by the isomorphic sdk. * Create a new page to see the errors * Test validation error --- .../src/hooks/ShopperProducts/query.test.tsx | 22 ++++++ .../src/hooks/ShopperProducts/query.ts | 9 --- .../commerce-sdk-react/src/test-utils.tsx | 5 +- .../app/pages/home.tsx | 8 +++ .../app/pages/query-errors.tsx | 71 +++++++++++++++++++ .../test-commerce-sdk-react/app/routes.tsx | 5 ++ 6 files changed, 110 insertions(+), 10 deletions(-) create mode 100644 packages/test-commerce-sdk-react/app/pages/query-errors.tsx 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

+
    +
  • + Query errors +
    • +
) } 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

} + +
+
Returning data
+ +
+ +

Response Error

+ {product.isLoading &&

Loading...

} + {product.error &&

Something is wrong

} + +
+
Returning data
+ +
+ + ) +} + +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 } ]