}
*/
static async shouldGetProps(args) {
+ if (!getPropsEnabled) {
+ return false
+ }
const defaultImpl = () => {
const {previousLocation, location} = args
return !previousLocation || previousLocation.pathname !== location.pathname
@@ -153,6 +161,9 @@ export const routeComponent = (Wrapped, isPage, locals) => {
*/
// eslint-disable-next-line
static getProps(args) {
+ if (!getPropsEnabled) {
+ return Promise.resolve({})
+ }
RouteComponent._latestPropsPromise = RouteComponent.getComponent().then((component) =>
component.getProps ? component.getProps({...args, ...extraArgs}) : Promise.resolve()
)
diff --git a/packages/pwa-kit-react-sdk/src/ssr/universal/components/with-legacy-get-props/index.js b/packages/pwa-kit-react-sdk/src/ssr/universal/components/with-legacy-get-props/index.js
new file mode 100644
index 0000000000..5666a6e772
--- /dev/null
+++ b/packages/pwa-kit-react-sdk/src/ssr/universal/components/with-legacy-get-props/index.js
@@ -0,0 +1,74 @@
+/*
+ * 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 hoistNonReactStatic from 'hoist-non-react-statics'
+import {FetchStrategy} from '../fetch-strategy'
+import React from 'react'
+
+export const withLegacyGetProps = (Wrapped) => {
+ /* istanbul ignore next */
+ const wrappedComponentName = Wrapped.displayName || Wrapped.name
+
+ /**
+ * @private
+ */
+ class WithLegacyGetProps extends FetchStrategy {
+ render() {
+ return
+ }
+
+ /**
+ * @private
+ */
+ static async doInitAppState({App, match, route, req, res, location}) {
+ const {params} = match
+
+ const components = [App, route.component]
+ const promises = components.map((c) =>
+ c.getProps
+ ? c.getProps({
+ req,
+ res,
+ params,
+ location
+ })
+ : Promise.resolve({})
+ )
+
+ const [appProps, pageProps] = await Promise.all(promises)
+ return {
+ appProps,
+ pageProps
+ }
+ }
+
+ /**
+ * @private
+ */
+ static getInitializers() {
+ return [WithLegacyGetProps.doInitAppState, ...(Wrapped.getInitializers?.() ?? [])]
+ }
+
+ /**
+ * @private
+ */
+ static getHOCsInUse() {
+ return [withLegacyGetProps, ...(Wrapped.getHOCsInUse?.() ?? [])]
+ }
+ }
+
+ WithLegacyGetProps.displayName = `withLegacyGetProps(${wrappedComponentName})`
+
+ const exclude = {
+ doInitAppState: true,
+ getInitializers: true,
+ initAppState: true,
+ getHOCsInUse: true
+ }
+ hoistNonReactStatic(WithLegacyGetProps, Wrapped, exclude)
+
+ return WithLegacyGetProps
+}
diff --git a/packages/pwa-kit-react-sdk/src/ssr/universal/components/with-legacy-get-props/index.test.js b/packages/pwa-kit-react-sdk/src/ssr/universal/components/with-legacy-get-props/index.test.js
new file mode 100644
index 0000000000..91fe5e640a
--- /dev/null
+++ b/packages/pwa-kit-react-sdk/src/ssr/universal/components/with-legacy-get-props/index.test.js
@@ -0,0 +1,30 @@
+/*
+ * 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 {withLegacyGetProps} from './index'
+import {shallow} from 'enzyme'
+import React from 'react'
+
+describe('withLegacyGetProps', function() {
+ test('Renders correctly', () => {
+ const Wrapped = () => Hello world
+ const Component = withLegacyGetProps(Wrapped)
+ const wrapper = shallow()
+ expect(wrapper.html()).toContain('Hello world')
+ })
+
+ test(`Has working getInitializers method`, () => {
+ expect(withLegacyGetProps({}).getInitializers().length).toBe(1)
+ expect(withLegacyGetProps({getInitializers: () => ['xyz']}).getInitializers().length).toBe(
+ 2
+ )
+ })
+
+ test(`Has working getHOCsInUse method`, () => {
+ expect(withLegacyGetProps({}).getHOCsInUse().length).toBe(1)
+ expect(withLegacyGetProps({getHOCsInUse: () => ['xyz']}).getHOCsInUse().length).toBe(2)
+ })
+})
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
new file mode 100644
index 0000000000..8d992d13a5
--- /dev/null
+++ b/packages/pwa-kit-react-sdk/src/ssr/universal/components/with-react-query/index.js
@@ -0,0 +1,77 @@
+/*
+ * 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 hoistNonReactStatic from 'hoist-non-react-statics'
+import {FetchStrategy} from '../fetch-strategy'
+import React from 'react'
+import {dehydrate, Hydrate, QueryClient, QueryClientProvider} from '@tanstack/react-query'
+import ssrPrepass from 'react-ssr-prepass'
+
+const isServerSide = typeof window === 'undefined'
+const STATE_KEY = '__reactQuery'
+
+export const withReactQuery = (Wrapped) => {
+ /* istanbul ignore next */
+ const wrappedComponentName = Wrapped.displayName || Wrapped.name
+
+ /**
+ * @private
+ */
+ class WithReactQuery extends FetchStrategy {
+ render() {
+ this.props.locals.__queryClient = this.props.locals.__queryClient || new QueryClient()
+ return (
+
+
+
+
+
+ )
+ }
+
+ /**
+ * @private
+ */
+ static async doInitAppState({res, appJSX}) {
+ const queryClient = (res.locals.__queryClient =
+ res.locals.__queryClient || new QueryClient())
+
+ await ssrPrepass(appJSX)
+
+ const queryCache = queryClient.getQueryCache()
+ const queries = queryCache.getAll().filter((q) => q.options.enabled !== false)
+ await Promise.all(queries.map((q) => q.fetch()))
+
+ return {[STATE_KEY]: dehydrate(queryClient)}
+ }
+
+ /**
+ * @private
+ */
+ static getInitializers() {
+ return [WithReactQuery.doInitAppState, ...(Wrapped.getInitializers?.() ?? [])]
+ }
+
+ /**
+ * @private
+ */
+ static getHOCsInUse() {
+ return [withReactQuery, ...(Wrapped.getHOCsInUse?.() ?? [])]
+ }
+ }
+
+ WithReactQuery.displayName = `withReactQuery(${wrappedComponentName})`
+
+ const exclude = {
+ doInitAppState: true,
+ getInitializers: true,
+ initAppState: true,
+ getHOCsInUse: true
+ }
+ hoistNonReactStatic(WithReactQuery, Wrapped, exclude)
+
+ return WithReactQuery
+}
diff --git a/packages/pwa-kit-react-sdk/src/ssr/universal/components/with-react-query/index.test.js b/packages/pwa-kit-react-sdk/src/ssr/universal/components/with-react-query/index.test.js
new file mode 100644
index 0000000000..d278d661eb
--- /dev/null
+++ b/packages/pwa-kit-react-sdk/src/ssr/universal/components/with-react-query/index.test.js
@@ -0,0 +1,28 @@
+/*
+ * 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 {withReactQuery} from './index'
+import {shallow} from 'enzyme'
+import React from 'react'
+
+describe('withReactQuery', function() {
+ test('Renders correctly', () => {
+ const Wrapped = () => Hello world
+ const Component = withReactQuery(Wrapped)
+ const wrapper = shallow()
+ expect(wrapper.html()).toContain('Hello world')
+ })
+
+ test(`Has working getInitializers method`, () => {
+ expect(withReactQuery({}).getInitializers().length).toBe(1)
+ expect(withReactQuery({getInitializers: () => ['xyz']}).getInitializers().length).toBe(2)
+ })
+
+ test(`Has working getHOCsInUse method`, () => {
+ expect(withReactQuery({}).getHOCsInUse().length).toBe(1)
+ expect(withReactQuery({getHOCsInUse: () => ['xyz']}).getHOCsInUse().length).toBe(2)
+ })
+})
diff --git a/packages/template-typescript-minimal/app/components/_app-config/index.js b/packages/template-typescript-minimal/app/components/_app-config/index.js
new file mode 100644
index 0000000000..ab9a4b4797
--- /dev/null
+++ b/packages/template-typescript-minimal/app/components/_app-config/index.js
@@ -0,0 +1,11 @@
+/*
+ * 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 {withLegacyGetProps} from 'pwa-kit-react-sdk/ssr/universal/components/with-legacy-get-props'
+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))
diff --git a/packages/template-typescript-minimal/app/pages/home.tsx b/packages/template-typescript-minimal/app/pages/home.tsx
index 767814add6..cbdeffdba7 100644
--- a/packages/template-typescript-minimal/app/pages/home.tsx
+++ b/packages/template-typescript-minimal/app/pages/home.tsx
@@ -5,6 +5,7 @@
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
*/
import React, {useEffect, useState} from 'react'
+import {useQuery} from '@tanstack/react-query'
import HelloTS from '../components/hello-typescript'
import HelloJS from '../components/hello-javascript'
@@ -90,6 +91,16 @@ const Home = ({value}: Props) => {
return () => clearInterval(interval)
}, [counter, setCounter])
+ const query = useQuery(
+ ['example-data'],
+ () =>
+ new Promise((resolve) => {
+ setTimeout(() => {
+ resolve('This came from react-query')
+ }, 1000)
+ })
+ )
+
return (
@@ -109,6 +120,9 @@ const Home = ({value}: Props) => {
This page is written in Typescript
+ React query works if this is not empty: "{query.data}"
+
+
Server-side getProps works if this is a valid expression: "5 times 7 is{' '}
{value}
"
@@ -138,7 +152,7 @@ Home.getProps = async () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(a * b)
- }, 50)
+ }, 1000)
})
}
const value = await getData(5, 7)
diff --git a/packages/template-typescript-minimal/package-lock.json b/packages/template-typescript-minimal/package-lock.json
index 0cba3fecbf..ad04e31db4 100644
--- a/packages/template-typescript-minimal/package-lock.json
+++ b/packages/template-typescript-minimal/package-lock.json
@@ -24,6 +24,22 @@
"react-is": "^16.12.0"
}
},
+ "@tanstack/query-core": {
+ "version": "4.3.4",
+ "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.3.4.tgz",
+ "integrity": "sha512-NLAe3j5Vk1yYEtoPP5fPGPjRzkZPx67KUM3f14L3InziJZJ0wVecCh7uKfgYkbRKJSeq6PlbND7iuCGdTplN6Q==",
+ "dev": true
+ },
+ "@tanstack/react-query": {
+ "version": "4.3.4",
+ "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.3.4.tgz",
+ "integrity": "sha512-IiAo+B8bxphEpO7xwLQaCptd2rY4Ef3pW1q9J3pT66G+J/st4QpGQ+cSm9iESp9ccRy1YNUk3klk/hQtWewl6g==",
+ "dev": true,
+ "requires": {
+ "@tanstack/query-core": "4.3.4",
+ "use-sync-external-store": "^1.2.0"
+ }
+ },
"@types/prop-types": {
"version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -338,6 +354,12 @@
"integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=",
"dev": true
},
+ "use-sync-external-store": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+ "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+ "dev": true
+ },
"value-equal": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
diff --git a/packages/template-typescript-minimal/package.json b/packages/template-typescript-minimal/package.json
index 4220a4bab0..7576262648 100644
--- a/packages/template-typescript-minimal/package.json
+++ b/packages/template-typescript-minimal/package.json
@@ -8,6 +8,7 @@
"private": true,
"devDependencies": {
"@loadable/component": "^5.15.0",
+ "@tanstack/react-query": "^4.0.10",
"@types/react": "^17.0.2",
"@types/react-dom": "^17.0.2",
"cross-env": "^5.2.0",