add react-query demo to create app demo

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"
     }
   }

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: {

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");

packages/xarc-create-app/template/src/demo2/index.tsx

@@ -41,7 +41,6 @@ const Demo2 = props => {
          {value} 
         <button onClick={() => dispatch(incNumber())}>&#8811;</button>
       </div>
-      <p style={{ textAlign: "center" }}>© {new Date().getFullYear()} Your (Company) name here</p>
     </div>
   );
 };

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 (
+    <div>
+      <div
+        style={{
+          padding: "5px",
+          marginTop: "15px",
+          border: "solid",
+          marginLeft: "15%",
+          marginRight: "15%"
+        }}
+      >
+        <h2>subapp demo3 with react-query</h2>
+        data: <pre>{JSON.stringify(data)}</pre>
+      </div>
+      <p style={{ textAlign: "center" }}>© {new Date().getFullYear()} Your (Company) name here</p>
+    </div>
+  );
+};
+
+export const subapp: ReactSubApp = {
+  Component: Demo3,
+  wantFeatures: [
+    reactQueryFeature({
+      React,
+      serverModule: require.resolve("./react-query-fetch.ts")
+    })
+  ]
+};

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)
+  };
+};

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"

samples/create-app-demo/package.json

@@ -26,26 +26,28 @@
   },
   "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"
   },
   "fyn": {
     "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": {

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");

samples/create-app-demo/src/demo2/index.tsx

@@ -41,7 +41,6 @@ const Demo2 = props => {
          {value} 
         <button onClick={() => dispatch(incNumber())}>&#8811;</button>
       </div>
-      <p style={{ textAlign: "center" }}>© {new Date().getFullYear()} Your (Company) name here</p>
     </div>
   );
 };

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 (
+    <div>
+      <div
+        style={{
+          padding: "5px",
+          marginTop: "15px",
+          border: "solid",
+          marginLeft: "15%",
+          marginRight: "15%"
+        }}
+      >
+        <h2>subapp demo3 with react-query</h2>
+        data: <pre>{JSON.stringify(data)}</pre>
+      </div>
+      <p style={{ textAlign: "center" }}>© {new Date().getFullYear()} Your (Company) name here</p>
+    </div>
+  );
+};
+
+export const subapp: ReactSubApp = {
+  Component: Demo3,
+  wantFeatures: [
+    reactQueryFeature({
+      React,
+      serverModule: require.resolve("./react-query-fetch.ts")
+    })
+  ]
+};

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)
+  };
+};

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"