From 3a836b49e7a989983d6ea1f18297f09e832b801e Mon Sep 17 00:00:00 2001 From: Joel Chen Date: Thu, 4 Feb 2021 09:42:48 -0800 Subject: [PATCH] add react-query demo to create app demo --- packages/xarc-create-app/package.json | 2 + packages/xarc-create-app/template/_package.js | 1 + packages/xarc-create-app/template/src/app.tsx | 5 +++ .../template/src/demo2/index.tsx | 1 - .../template/src/demo3/index.tsx | 43 +++++++++++++++++++ .../template/src/demo3/react-query-fetch.ts | 22 ++++++++++ .../template/src/server/routes.ts | 5 ++- samples/create-app-demo/package.json | 12 +++--- samples/create-app-demo/src/app.tsx | 5 +++ samples/create-app-demo/src/demo2/index.tsx | 1 - samples/create-app-demo/src/demo3/index.tsx | 43 +++++++++++++++++++ .../src/demo3/react-query-fetch.ts | 22 ++++++++++ samples/create-app-demo/src/server/routes.ts | 5 ++- 13 files changed, 156 insertions(+), 11 deletions(-) create mode 100644 packages/xarc-create-app/template/src/demo3/index.tsx create mode 100644 packages/xarc-create-app/template/src/demo3/react-query-fetch.ts create mode 100644 samples/create-app-demo/src/demo3/index.tsx create mode 100644 samples/create-app-demo/src/demo3/react-query-fetch.ts diff --git a/packages/xarc-create-app/package.json b/packages/xarc-create-app/package.json index 12c136cd2..848d799f2 100644 --- a/packages/xarc-create-app/package.json +++ b/packages/xarc-create-app/package.json @@ -43,6 +43,7 @@ "@xarc/app-dev": "^9.0.0", "@xarc/module-dev": "^2.2.4", "@xarc/react": "^0.1.5", + "@xarc/react-query": "^0.1.1", "@xarc/react-redux": "^0.1.4", "babel-loader": "^8.0.6", "chai": "^4.2.0", @@ -108,6 +109,7 @@ "@xarc/app": "../xarc-app", "@xarc/app-dev": "../xarc-app-dev", "@xarc/react": "../xarc-react", + "@xarc/react-query": "../xarc-react-query", "@xarc/react-redux": "../xarc-react-redux" } } diff --git a/packages/xarc-create-app/template/_package.js b/packages/xarc-create-app/template/_package.js index 60cae4487..a151b71c2 100644 --- a/packages/xarc-create-app/template/_package.js +++ b/packages/xarc-create-app/template/_package.js @@ -36,6 +36,7 @@ module.exports = (base, merge) => { "@xarc/app": "^8.2.0", // version will come from ../package.json "@xarc/fastify-server": "^2.0.0", "@xarc/react": "^0.1.0", // version will come from ../package.json + "@xarc/react-query": "^0.1.1", // version will come from ../package.json "@xarc/react-redux": "^0.1.0" // version will come from ../package.json }, devDependencies: { diff --git a/packages/xarc-create-app/template/src/app.tsx b/packages/xarc-create-app/template/src/app.tsx index b20594a61..e47936ca7 100644 --- a/packages/xarc-create-app/template/src/app.tsx +++ b/packages/xarc-create-app/template/src/app.tsx @@ -10,4 +10,9 @@ export const Demo2 = declareSubApp({ getModule: () => import("./demo2") }); +export const Demo3 = declareSubApp({ + name: "demo3", + getModule: () => import("./demo3") +}); + xarcV2.debug("app.tsx"); diff --git a/packages/xarc-create-app/template/src/demo2/index.tsx b/packages/xarc-create-app/template/src/demo2/index.tsx index 72af6a81e..8f7ddc70c 100644 --- a/packages/xarc-create-app/template/src/demo2/index.tsx +++ b/packages/xarc-create-app/template/src/demo2/index.tsx @@ -41,7 +41,6 @@ const Demo2 = props => {  {value}  -

© {new Date().getFullYear()} Your (Company) name here

); }; diff --git a/packages/xarc-create-app/template/src/demo3/index.tsx b/packages/xarc-create-app/template/src/demo3/index.tsx new file mode 100644 index 000000000..96d48ec0c --- /dev/null +++ b/packages/xarc-create-app/template/src/demo3/index.tsx @@ -0,0 +1,43 @@ +// +// A more complicate demo subapp using Redux +// +// Note: using redux requires top level Redux store initialization so if another +// subapp tries to use this as a dynamic component, then it must also uses redux and +// provides the redux top level store facility. +// + +import { React, ReactSubApp } from "@xarc/react"; +import { reactQueryFeature, useQuery } from "@xarc/react-query"; +import { demo3QueryFn } from "./react-query-fetch"; + +const Demo3 = () => { + const { data } = useQuery("demo3", demo3QueryFn, { staleTime: 2000 }); + + return ( +
+
+

subapp demo3 with react-query

+ data: 
{JSON.stringify(data)}
+
+

© {new Date().getFullYear()} Your (Company) name here

+
+ ); +}; + +export const subapp: ReactSubApp = { + Component: Demo3, + wantFeatures: [ + reactQueryFeature({ + React, + serverModule: require.resolve("./react-query-fetch.ts") + }) + ] +}; diff --git a/packages/xarc-create-app/template/src/demo3/react-query-fetch.ts b/packages/xarc-create-app/template/src/demo3/react-query-fetch.ts new file mode 100644 index 000000000..dfa87d808 --- /dev/null +++ b/packages/xarc-create-app/template/src/demo3/react-query-fetch.ts @@ -0,0 +1,22 @@ +import { dehydrate } from "@xarc/react-query"; + +const maxDelay = 50; + +export const demo3QueryFn = async ({ queryKey }) => { + const delay = Math.floor(Math.random() * maxDelay); + + return new Promise(resolve => { + setTimeout(resolve, delay); + }).then(() => { + return { msg: "react-query", queryKey, delay }; + }); +}; + +export const prefetchQuery = async ({ queryClient, ssrData }) => { + await queryClient.prefetchQuery("demo3", demo3QueryFn); + + return { + queryClient, + dehydratedState: dehydrate(queryClient) + }; +}; diff --git a/packages/xarc-create-app/template/src/server/routes.ts b/packages/xarc-create-app/template/src/server/routes.ts index 2aaa06b14..c340a9427 100644 --- a/packages/xarc-create-app/template/src/server/routes.ts +++ b/packages/xarc-create-app/template/src/server/routes.ts @@ -1,4 +1,4 @@ -import { Demo2, home } from "../app"; +import { Demo2, Demo3, home } from "../app"; import { PageRenderer } from "@xarc/react"; /** @@ -19,7 +19,8 @@ export function setupRoutes(server) { pageTitle: "xarc React App demo", subApps: [ { name: home.name, ssr: true }, - { name: Demo2.name, ssr: true } + { name: Demo2.name, ssr: true }, + { name: Demo3.name, ssr: true } ], prodAssetData: { cdnMap: "config/assets.json" diff --git a/samples/create-app-demo/package.json b/samples/create-app-demo/package.json index c83e47111..ac6597337 100644 --- a/samples/create-app-demo/package.json +++ b/samples/create-app-demo/package.json @@ -26,19 +26,20 @@ }, "license": "UNLICENSED", "engines": { - "node": ">= 10", + "node": ">= 12", "npm": ">= 6" }, "dependencies": { "@babel/runtime": "^7.12.5", - "@xarc/app": "^8.2.2", + "@xarc/app": "^9.0.0", "@xarc/fastify-server": "^2.0.0", - "@xarc/react": "^0.1.3", - "@xarc/react-redux": "^0.1.2" + "@xarc/react": "^0.1.5", + "@xarc/react-query": "^0.1.1", + "@xarc/react-redux": "^0.1.4" }, "devDependencies": { "@types/node": "^14.14.6", - "@xarc/app-dev": "^8.2.2", + "@xarc/app-dev": "^9.0.0", "ts-node": "^9.0.0", "typescript": "^4.0.3" }, @@ -46,6 +47,7 @@ "dependencies": { "@xarc/app": "../../packages/xarc-app", "@xarc/react": "../../packages/xarc-react", + "@xarc/react-query": "../../packages/xarc-react-query", "@xarc/react-redux": "../../packages/xarc-react-redux" }, "devDependencies": { diff --git a/samples/create-app-demo/src/app.tsx b/samples/create-app-demo/src/app.tsx index b20594a61..e47936ca7 100644 --- a/samples/create-app-demo/src/app.tsx +++ b/samples/create-app-demo/src/app.tsx @@ -10,4 +10,9 @@ export const Demo2 = declareSubApp({ getModule: () => import("./demo2") }); +export const Demo3 = declareSubApp({ + name: "demo3", + getModule: () => import("./demo3") +}); + xarcV2.debug("app.tsx"); diff --git a/samples/create-app-demo/src/demo2/index.tsx b/samples/create-app-demo/src/demo2/index.tsx index 72af6a81e..8f7ddc70c 100644 --- a/samples/create-app-demo/src/demo2/index.tsx +++ b/samples/create-app-demo/src/demo2/index.tsx @@ -41,7 +41,6 @@ const Demo2 = props => {  {value}  -

© {new Date().getFullYear()} Your (Company) name here

); }; diff --git a/samples/create-app-demo/src/demo3/index.tsx b/samples/create-app-demo/src/demo3/index.tsx new file mode 100644 index 000000000..96d48ec0c --- /dev/null +++ b/samples/create-app-demo/src/demo3/index.tsx @@ -0,0 +1,43 @@ +// +// A more complicate demo subapp using Redux +// +// Note: using redux requires top level Redux store initialization so if another +// subapp tries to use this as a dynamic component, then it must also uses redux and +// provides the redux top level store facility. +// + +import { React, ReactSubApp } from "@xarc/react"; +import { reactQueryFeature, useQuery } from "@xarc/react-query"; +import { demo3QueryFn } from "./react-query-fetch"; + +const Demo3 = () => { + const { data } = useQuery("demo3", demo3QueryFn, { staleTime: 2000 }); + + return ( +
+
+

subapp demo3 with react-query

+ data: 
{JSON.stringify(data)}
+
+

© {new Date().getFullYear()} Your (Company) name here

+
+ ); +}; + +export const subapp: ReactSubApp = { + Component: Demo3, + wantFeatures: [ + reactQueryFeature({ + React, + serverModule: require.resolve("./react-query-fetch.ts") + }) + ] +}; diff --git a/samples/create-app-demo/src/demo3/react-query-fetch.ts b/samples/create-app-demo/src/demo3/react-query-fetch.ts new file mode 100644 index 000000000..dfa87d808 --- /dev/null +++ b/samples/create-app-demo/src/demo3/react-query-fetch.ts @@ -0,0 +1,22 @@ +import { dehydrate } from "@xarc/react-query"; + +const maxDelay = 50; + +export const demo3QueryFn = async ({ queryKey }) => { + const delay = Math.floor(Math.random() * maxDelay); + + return new Promise(resolve => { + setTimeout(resolve, delay); + }).then(() => { + return { msg: "react-query", queryKey, delay }; + }); +}; + +export const prefetchQuery = async ({ queryClient, ssrData }) => { + await queryClient.prefetchQuery("demo3", demo3QueryFn); + + return { + queryClient, + dehydratedState: dehydrate(queryClient) + }; +}; diff --git a/samples/create-app-demo/src/server/routes.ts b/samples/create-app-demo/src/server/routes.ts index 2aaa06b14..c340a9427 100644 --- a/samples/create-app-demo/src/server/routes.ts +++ b/samples/create-app-demo/src/server/routes.ts @@ -1,4 +1,4 @@ -import { Demo2, home } from "../app"; +import { Demo2, Demo3, home } from "../app"; import { PageRenderer } from "@xarc/react"; /** @@ -19,7 +19,8 @@ export function setupRoutes(server) { pageTitle: "xarc React App demo", subApps: [ { name: home.name, ssr: true }, - { name: Demo2.name, ssr: true } + { name: Demo2.name, ssr: true }, + { name: Demo3.name, ssr: true } ], prodAssetData: { cdnMap: "config/assets.json"