metaplate checks: looks like it works ,additional routes checks

src/App.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, Fragment } from 'react'
 import './App.css'
 import {createBrowserHistory} from 'history';
 import {Router, Link} from 'react-router-dom'
-import {createQueryPub, NamedRoute, NamedLink} from './lib';
+import {createQueryPub, NamedRoute, NamedLink, usePub} from './lib';
 import {MetaPlate} from './lib';
 
 
@@ -27,7 +27,7 @@ const gql = (query, variables={}) =>
 
 const {queryPub, createQuery, withQueryFunc} = createQueryPub({
     queryFunc: gql,
-    cacheTimeout: 500000,
+    cacheTimeout: 5000,
 })
 
 const {useCategoriesQuery} = createQuery({
@@ -71,7 +71,7 @@ const {useMainCategoriesQuery} = createQuery({
 })
 
 
-const {query: categoryQuery} = createQuery({
+const {query: categoryQuery, useCategoryQuery} = createQuery({
     promiseName: 'category',
     args: ({_id}) => [`query categoryById($query:String){
               CategoryFindOne(query: $query){
@@ -99,15 +99,21 @@ const {query: categoryQuery} = createQuery({
 
 const Image = ({src}) => <img src={`${shopUrl}${src}`} style={{maxWidth: '50%'}}/>
 
-const Good = ({good, children}) =>
-good ? 
-<div className='Good'>
-    <h2>{good.name}</h2>
-    <p>{good.description}</p>
-    <money>{good.price}</money>
-    {children}
-</div>
-: <h3>null</h3>
+const Good = ({good, children}) => {
+    useEffect(() => {
+        console.log('good mount', good.name)
+    },[])
+    return (
+        good ? 
+            <div className='Good'>
+                <h2>{good.name}</h2>
+                <p>{good.description}</p>
+                <money>{good.price}</money>
+                {children}
+            </div>
+        : <h3>null</h3>
+    )
+}
 
 const Category = ({category:{name, _id}, children}) =>
 <div className='Category'>
@@ -128,25 +134,32 @@ const Goods = ({children}) =>
     {children}
 </div>
 
-const PageCategory = ({data}) => 
-    <MetaPlate data={data.payload.data.CategoryFindOne}>
-        <Category prop="category" keyDataKey="_id">
-            <Goods sourceDataKey="goods"> 
-                <Good prop="good" keyDataKey="_id">
-                    <div sourceDataKey="images">
-                        <Image prop="src" sourceDataKey="url"/>
-                    </div>
-                </Good>
-            </Goods>
-            <Categories sourceDataKey="subCategories" prop='data'>
-                <Category prop="category" keyDataKey="_id" />
-            </Categories>
-        </Category>
-    </MetaPlate> 
+const PageCategory = ({data}) => {
+    usePub(queryPub)
+    console.log('page category update')
+    return (
+    <>
+        <MetaPlate data={data.payload.data.CategoryFindOne}>
+            <Category prop="category" keyDataKey="_id">
+                <Goods sourceDataKey="goods"> 
+                    <Good prop="good" keyDataKey="_id">
+                        <div sourceDataKey="images">
+                            <Image prop="src" sourceDataKey="url"/>
+                        </div>
+                    </Good>
+                </Goods>
+                <Categories sourceDataKey="subCategories" prop='data'>
+                    <LeftMenuItem prop="category" keyDataKey="_id" />
+                </Categories>
+            </Category>
+        </MetaPlate> 
+    </>
+    )
+}
 
 const LeftMenuItem = ({category:{_id,name}})=>
-//<li><NamedLink name='category' params={{_id}}>{name}</NamedLink></li>
-<li><Link  to={`/category/${_id}`}>{name}</Link></li>
+<li><NamedLink routeName='category' params={{_id}}>{name}</NamedLink></li>
+//<li><Link  to={`/category/${_id}`}>{name}</Link></li>
 
 const LeftMenu = () => {
     const {payload} = useMainCategoriesQuery()
@@ -154,9 +167,9 @@ const LeftMenu = () => {
         <ul>
             {payload && 
                 <MetaPlate data={payload.data.CategoryFind}>
-                    <Fragment>
+                    <>
                         <LeftMenuItem prop="category" keyDataKey="_id"/>
-                    </Fragment>
+                    </>
                 </MetaPlate>}
         </ul>
     )

src/lib/index.ts

@@ -8,4 +8,4 @@ export { usePub, createQueryPub } from  './pub'
 
 export {NamedRoute, NamedLink, HashRoute, createPrivateRoute} from './router'
 import MetaPlate from './metaplate';
-export {MetaPlate, }
+export {MetaPlate }

src/lib/router/index.tsx

@@ -52,6 +52,9 @@ export const NamedLink = ({routeName, params, to,...props}) => {
         const pattern = route.path
         to            = generatePath(pattern, params)
     }
+    else {
+        console.log('no route, hnyk', routes, to)
+    }
     return <Link to={to} {...props} />
 }
 

src/main.tsx

@@ -4,7 +4,5 @@ import App from './App.tsx'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  //<React.StrictMode>
     <App />
-  //</React.StrictMode>,
 )