Revert "Remove custom options for react query hoc (#755)"

This reverts commit 9e0f596.
SalesforceCommerceCloud · Oct 18, 2022 · 21e804d · 21e804d
1 parent 4e197d1
commit 21e804d
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 9 deletions.
diff --git a/packages/commerce-sdk-react/README.md b/packages/commerce-sdk-react/README.md
@@ -6,6 +6,7 @@ A library of React hooks for fetching data from Salesforce B2C Commerce.
 
 The full documentation for PWA Kit and Managed Runtime is hosted on the [Salesforce Developers](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/overview) portal.
 
+
 ## PWA-Kit Integration
 
 > To integration this library with your PWA-Kit application you can use the `CommerceApiProvider` directly given that you use the `withReactQuery` higher order component to wrap your `AppConfig` component. Below is a snippet of how this is accomplished.
@@ -21,9 +22,24 @@ const AppConfig = ({children}) => {
             {children}
         </CommerceApiProvider>
     )
+} 
+
+// Set configuration options for react query.
+// NOTE: This configuration will be used both on the server-side and client-side.
+const options = {
+    queryClientConfig: {
+        defaultOptions: {
+            queries: {
+                retry: false
+            },
+            mutations: {
+                retry: false
+            }
+        }
+    }
 }
 
-export default withReactQuery(AppConfig)
+export default withReactQuery(AppConfig, options)
 ```
 
 ## Generic Integration
@@ -44,11 +60,10 @@ const App = ({children}) => {
             </CommerceApiProvider>
         </QueryClientProvider>
     )
-}
+} 
 
 export default App
 ```
-
 ### Useful Links:
 
 -   [Get Started](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/getting-started.html)

diff --git a/packages/pwa-kit-react-sdk/src/ssr/universal/components/with-react-query/index.js b/packages/pwa-kit-react-sdk/src/ssr/universal/components/with-react-query/index.js
@@ -30,15 +30,17 @@ const SAFE_QUERY_CLIENT_CONFIG = {
  * A HoC for adding React Query support to your application.
  *
  * @param {React.ReactElement} Wrapped The component to be wrapped
+ * @param {Object} options
+ * @param {Object} options.queryClientConfig The react query client configuration object to be used. By
+ * default the `retry` option will be set to false to ensure performant server rendering.
+ *
  * @returns {React.ReactElement}
  */
-export const withReactQuery = (Wrapped) => {
+export const withReactQuery = (Wrapped, options = {}) => {
     const isServerSide = typeof window === 'undefined'
     /* istanbul ignore next */
     const wrappedComponentName = Wrapped.displayName || Wrapped.name
-
-    // @TODO: allow user to configure react query
-    const queryClientConfig = SAFE_QUERY_CLIENT_CONFIG
+    const queryClientConfig = options.queryClientConfig || SAFE_QUERY_CLIENT_CONFIG
 
     /**
      * @private

diff --git a/packages/template-typescript-minimal/app/components/_app-config/index.js b/packages/template-typescript-minimal/app/components/_app-config/index.js
@@ -8,4 +8,18 @@ import {withLegacyGetProps} from 'pwa-kit-react-sdk/ssr/universal/components/wit
 import {withReactQuery} from 'pwa-kit-react-sdk/ssr/universal/components/with-react-query'
 import AppConfig from 'pwa-kit-react-sdk/ssr/universal/components/_app-config'
 
-export default withReactQuery(withLegacyGetProps(AppConfig))
+// Recommended settings for PWA-Kit usages.
+const options = {
+    queryClientConfig: {
+        defaultOptions: {
+            queries: {
+                retry: false
+            },
+            mutations: {
+                retry: false
+            }
+        }
+    }
+}
+
+export default withReactQuery(withLegacyGetProps(AppConfig), options)
diff --git a/packages/test-commerce-sdk-react/app/components/_app-config/index.tsx b/packages/test-commerce-sdk-react/app/components/_app-config/index.tsx
@@ -42,4 +42,18 @@ AppConfig.restore = () => {}
 AppConfig.extraGetPropsArgs = () => {}
 AppConfig.freeze = () => {}
 
-export default withReactQuery(AppConfig)
+// Recommended settings for PWA-Kit usage.
+const options = {
+    queryClientConfig: {
+        defaultOptions: {
+            queries: {
+                retry: false
+            },
+            mutations: {
+                retry: false
+            }
+        }
+    }
+}
+
+export default withReactQuery(AppConfig, options)