[Feature] Integrate react-query with PWA-Kit SDK

packages/pwa-kit-dev/package.json

@@ -111,6 +111,7 @@
   },
   "devDependencies": {
     "@loadable/component": "^5.15.0",
+    "@tanstack/react-query": "^4.0.10",
     "internal-lib-build": "^2.2.0-dev",
     "nock": "^13.1.1",
     "superagent": "^6.1.0",

packages/pwa-kit-dev/src/configs/webpack/config.js

@@ -120,6 +120,7 @@ const baseConfig = (target) => {
                         '@loadable/webpack-plugin': findInProjectThenSDK(
                             '@loadable/webpack-plugin'
                         ),
+                        '@tanstack/react-query': findInProjectThenSDK('@tanstack/react-query'),
                         'svg-sprite-loader': findInProjectThenSDK('svg-sprite-loader'),
                         react: findInProjectThenSDK('react'),
                         'react-router-dom': findInProjectThenSDK('react-router-dom'),

packages/pwa-kit-react-sdk/CHANGELOG.md

@@ -1,3 +1,5 @@
+## To be released
+-   Integrate `react-query`. [#693](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/693)
 ## v2.1.0 (Jul 05, 2022)
 -   Remove console logs from route component. [#651](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/651)
 

packages/pwa-kit-react-sdk/package.json

@@ -47,6 +47,7 @@
     "@loadable/babel-plugin": "^5.13.2",
     "@loadable/server": "^5.15.0",
     "@loadable/webpack-plugin": "^5.15.0",
+    "@tanstack/react-query": "^4.0.10",
     "cross-env": "^5.2.0",
     "event-emitter": "^0.3.5",
     "glob": "7.1.1",
@@ -55,6 +56,7 @@
     "mkdirp": "^1.0.4",
     "prop-types": "^15.6.0",
     "pwa-kit-runtime": "^2.2.0-dev",
+    "react-ssr-prepass": "^1.5.0",
     "react-uid": "^2.2.0",
     "serialize-javascript": "^6.0.0",
     "svg-sprite-loader": "^6.0.11",

packages/pwa-kit-react-sdk/setup-jest.js

@@ -31,6 +31,7 @@ jest.mock('pwa-kit-runtime/utils/ssr-config', () => {
                 '**/*.json'
             ],
             ssrParameters: {
+                ssrPrepassEnabled: true,
                 ssrFunctionNodeVersion: '14.x',
                 proxyConfigs: [
                     {
@@ -50,3 +51,4 @@ jest.mock('pwa-kit-runtime/utils/ssr-config', () => {
         })
     }
 })
+

packages/pwa-kit-react-sdk/src/ssr/browser/main.jsx

@@ -8,12 +8,28 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import {BrowserRouter as Router} from 'react-router-dom'
-import DeviceContext from '../universal/device-context'
+import {DeviceContext, ExpressContext} from '../universal/contexts'
 import App from '../universal/components/_app'
 import AppConfig from '../universal/components/_app-config'
 import Switch from '../universal/components/switch'
-import {getRoutes, routeComponent} from '../universal/components/route-component'
 import {loadableReady} from '@loadable/component'
+import {withLegacyGetProps, withLoadableResolver} from '../universal/hocs'
+import routes from '../universal/routes'
+import Throw404 from '../universal/components/throw-404'
+
+const getRoutes = (locals) => {
+    let _routes = routes
+    if (typeof routes === 'function') {
+        _routes = routes()
+    }
+    const allRoutes = [..._routes, {path: '*', component: Throw404}]
+    return allRoutes.map(({component, ...rest}) => {
+        return {
+            component: component ? withLoadableResolver(component) : component,
+            ...rest
+        }
+    })
+}
 
 /* istanbul ignore next */
 export const registerServiceWorker = (url) => {
@@ -54,7 +70,6 @@ export const start = () => {
 
     // AppConfig.restore *must* come before getRoutes()
     AppConfig.restore(locals, window.__PRELOADED_STATE__.__STATE_MANAGEMENT_LIBRARY)
-    const routes = getRoutes(locals)
 
     // We need to tell the routeComponent HOC when the app is hydrating in order to
     // prevent pages from re-fetching data on the first client-side render. The
@@ -66,25 +81,37 @@ export const start = () => {
     // been warned.
     window.__HYDRATING__ = true
 
-    const WrappedApp = routeComponent(App, false, locals)
+    // const WrappedApp = routeComponent(App, false, locals)
+    const WrappedApp = withLegacyGetProps(App)
+
+    // NOTE: It's kinda weird how frozn state is loaded in the JSX here. Would be nice if it was
+    // "added" via or in, the hoc.
+    let routes = getRoutes(locals)
+
+    if (WrappedApp.enhanceRoutes) {
+        routes = WrappedApp.enhanceRoutes(routes)
+    }
+
     const error = window.__ERROR__
 
     return Promise.resolve()
         .then(() => new Promise((resolve) => loadableReady(resolve)))
         .then(() => {
             ReactDOM.hydrate(
-                <Router>
-                    <DeviceContext.Provider value={{type: window.__DEVICE_TYPE__}}>
-                        <AppConfig locals={locals}>
-                            <Switch
-                                error={error}
-                                appState={window.__PRELOADED_STATE__}
-                                routes={routes}
-                                App={WrappedApp}
-                            />
-                        </AppConfig>
-                    </DeviceContext.Provider>
-                </Router>,
+                <ExpressContext.Provider value={{}}>
+                    <Router>
+                        <DeviceContext.Provider value={{type: window.__DEVICE_TYPE__}}>
+                            <AppConfig locals={locals}>
+                                <Switch
+                                    error={error}
+                                    appState={window.__PRELOADED_STATE__}
+                                    routes={routes}
+                                    App={WrappedApp}
+                                />
+                            </AppConfig>
+                        </DeviceContext.Provider>
+                    </Router>
+                </ExpressContext.Provider>,
                 rootEl,
                 () => {
                     window.__HYDRATING__ = false