fetch config
This commit is contained in:
parent
63137a7726
commit
8b21aba029
@ -9,7 +9,13 @@ export default ()=>
|
||||
{
|
||||
return <div class="p-4 font-sans">
|
||||
<Iso.Metas title="Main Page!"/>
|
||||
<h1 class="my-2 font(bold serif) text(2xl)">Title!!</h1>
|
||||
<nav class="p-4">
|
||||
<a class="text-red-500" href="/">Home</a>
|
||||
<a href="/about">About</a>
|
||||
<a href="/lol">lol????</a>
|
||||
</nav>
|
||||
|
||||
<h1 class="my-2 font(bold serif) text(3xl)">Title!!</h1>
|
||||
<h2>suspended:</h2>
|
||||
<React.Suspense fallback={<div>Loading!</div>}>
|
||||
<Comp/>
|
||||
|
@ -7,7 +7,7 @@ export default ()=>
|
||||
const [routeGet, routeSet] = Iso.Router.Consumer();
|
||||
|
||||
type CatFact = {fact:string, length:number}|undefined;
|
||||
const [Data, Updating] = Iso.Fetch.Use(`https://catfact.ninja/fact`, undefined, 60, true, true, true);
|
||||
const [Data, Updating] = Iso.Fetch.Use(`https://catfact.ninja/fact`);
|
||||
|
||||
|
||||
console.log("render!!")
|
||||
@ -15,7 +15,7 @@ export default ()=>
|
||||
return <div class="p-4 text-red-500">
|
||||
<Iso.Metas title="Component!"/>
|
||||
Component Route is: {routeGet.Path.toString()}
|
||||
<button className="p-4 bg-red-500 text-white" onClick={e=>{countSet(countGet+1); routeSet(["lol", "idk"], {count:countGet+1});}}>{countGet}</button>
|
||||
<button className="p-4 bg-green-500 text-white" onClick={e=>{countSet(countGet+1); routeSet(["lol", "idk"], {count:countGet+1});}}>{countGet}</button>
|
||||
<a href="/page/about-us" className="p-2 text(lg blue-500) font-bold">a link</a>
|
||||
<p>Data:{Data && (Data as CatFact)?.fact}</p>
|
||||
<p>Status:{Updating?'loading':'done'}</p>
|
||||
|
16
lib/iso.tsx
16
lib/iso.tsx
@ -160,7 +160,8 @@ export const Switch =({children}:{children:Children})=>
|
||||
export const Case =({children, value}:{children:Children, value?:string, default?:true})=>null;
|
||||
export const useRouteVars =()=> React.useContext(SwitchContext).keys;
|
||||
|
||||
export type FetchRecord = {URL:string, CacheFor:number, CachedAt:number, CacheOnServer:boolean, Promise?:Promise<FetchRecord>, DelaySSR:boolean, Seed:boolean, Error?:string, JSON?:object};
|
||||
export type FetchCachOptions = {CacheFor:number, CacheOnServer:boolean, DelaySSR:boolean, Seed:boolean};
|
||||
export type FetchRecord = {URL:string, Promise?:Promise<FetchRecord>, CachedAt:number, Error?:string, JSON?:object} & FetchCachOptions;
|
||||
type FetchGuide = [Record:FetchRecord, Init:boolean, Listen:boolean];
|
||||
export type FetchHookState = [Data:undefined|object, Updating:boolean];
|
||||
export const Fetch = {
|
||||
@ -175,7 +176,8 @@ export const Fetch = {
|
||||
Fetch.Cache.set(r.URL, r)
|
||||
});
|
||||
},
|
||||
Request(URL:string, Init?:RequestInit, CacheFor:number = 60, CacheOnServer:boolean = true, DelaySSR:boolean = true, Seed:boolean = true):FetchGuide
|
||||
DefaultOptions:{CacheFor:60, CacheOnServer:true, DelaySSR:true, Seed:true} as FetchCachOptions,
|
||||
Request(URL:string, Init?:RequestInit|null, CacheFor:number = 60, CacheOnServer:boolean = true, DelaySSR:boolean = true, Seed:boolean = true):FetchGuide
|
||||
{
|
||||
let check = Fetch.Cache.get(URL);
|
||||
|
||||
@ -183,7 +185,7 @@ export const Fetch = {
|
||||
{
|
||||
Fetch.Cache.set(URL, inCheck);
|
||||
inCheck.CachedAt = 0;
|
||||
inCheck.Promise = fetch(URL, Init).then(resp=>resp.json()).then((json)=>{
|
||||
inCheck.Promise = fetch(URL, Init?Init:undefined).then(resp=>resp.json()).then((json)=>{
|
||||
inCheck.JSON = json;
|
||||
inCheck.CachedAt = new Date().getTime();
|
||||
console.log(`...cached!`);
|
||||
@ -231,13 +233,15 @@ export const Fetch = {
|
||||
|
||||
}
|
||||
},
|
||||
Use(URL:string, Init?:RequestInit, CacheFor:number = 60, CacheOnServer:boolean = true, DelaySSR:boolean = true, Seed:boolean = true)
|
||||
|
||||
Use(URL:string, Init?:RequestInit|null, Options?:FetchCachOptions)
|
||||
{
|
||||
const [receipt, init, listen] = Fetch.Request(URL, Init, CacheFor, CacheOnServer, DelaySSR, Seed);
|
||||
const config = {...Fetch.DefaultOptions, ...Options};
|
||||
const [receipt, init, listen] = Fetch.Request(URL, Init, config.CacheFor, config.CacheOnServer, config.DelaySSR, config.Seed);
|
||||
const initialState:FetchHookState = init ? [receipt.JSON, listen] : [undefined, true];
|
||||
const [cacheGet, cacheSet] = React.useState(initialState);
|
||||
|
||||
if(Fetch.ServerBlocking && Fetch.ServerTouched && DelaySSR) // if server-side rendering
|
||||
if(Fetch.ServerBlocking && Fetch.ServerTouched && config.DelaySSR) // if server-side rendering
|
||||
{
|
||||
if(listen) // if the request is pending
|
||||
{
|
||||
|
Loading…
Reference in New Issue
Block a user