Merge pull request #878 from grahammendick/manual-refetch

Author: grahammendick

NavigationReact/src/AsyncStateNavigator.ts

@@ -18,42 +18,6 @@ class AsyncStateNavigator extends StateNavigator {
         this.offNavigate = stateNavigator.offNavigate.bind(stateNavigator);
     }
 
-    refresh(navigationData?: any, historyAction?: 'add' | 'replace' | 'none') {
-        const refreshData = { ...this.stateContext.state.defaults, ...navigationData };
-        const refreshKeys = Object.keys(refreshData);
-        let equal = refreshKeys.length === Object.keys(this.stateContext.data).length;
-        for (let i = 0; i < refreshKeys.length && equal; i++) {
-            const key = refreshKeys[i];
-            equal = equal && AsyncStateNavigator.areEqual(refreshData[key], this.stateContext.data[key]);
-        }
-        if (!equal)
-            super.refresh(navigationData, historyAction);
-        else {
-            const { oldState, state, data, asyncData } = this.stateContext;
-            const startTransition = React.startTransition || ((transition) => transition());
-            startTransition(() => {
-                this.navigationHandler.setState({ context: { ignoreCache: true, oldState, state, data, asyncData, stateNavigator: this } });
-            });
-        }
-    }
-
-    private static areEqual(val: any, currentVal: any): boolean {
-        if (currentVal == null)
-            return val == null || val === '';
-        const valType = Object.prototype.toString.call(val);
-        if (valType !== Object.prototype.toString.call(currentVal))
-            return false;
-        if (valType === '[object Array]') {
-            let active = val.length === currentVal.length;
-            for(let i = 0; active && i < val.length; i++) {
-                active = this.areEqual(val[i], currentVal[i]);
-            }
-            return active;
-        } else {
-            return isNaN(val) ? val === currentVal : +val === +currentVal;
-        }
-    }
-
     navigateLink(url: string, historyAction: 'add' | 'replace' | 'none' = 'add', history = false,
         suspendNavigation?: (stateContext: StateContext, resumeNavigation: () => void) => void,
         currentContext = this.stateContext) {

NavigationReact/src/NavigationHandler.tsx

@@ -1,8 +1,9 @@
 'use client'
-import React, { Component } from 'react';
+import React, { Component, startTransition } from 'react';
 import { StateNavigator, State } from 'navigation';
 import AsyncStateNavigator from './AsyncStateNavigator.js';
 import NavigationContext from './NavigationContext.js';
+import SceneRSCContext from './SceneRSCContext.js';
 type NavigationHandlerState = { context: { ignoreCache?: boolean, oldState: State, state: State, data: any, asyncData: any, stateNavigator: AsyncStateNavigator } };
 
 class NavigationHandler extends Component<{ stateNavigator: StateNavigator, children: any }, NavigationHandlerState> {
@@ -13,6 +14,7 @@ class NavigationHandler extends Component<{ stateNavigator: StateNavigator, chil
         const asyncNavigator = new AsyncStateNavigator(this, stateNavigator, stateNavigator.stateContext);
         this.state = { context: { oldState, state, data, asyncData, stateNavigator: asyncNavigator } };
         this.onNavigate = this.onNavigate.bind(this);
+        this.refetch = this.refetch.bind(this);
     }
 
     componentDidMount() {
@@ -33,10 +35,18 @@ class NavigationHandler extends Component<{ stateNavigator: StateNavigator, chil
         }
     }
 
+    refetch() {
+        startTransition(() => {
+            this.setState({ context: { ...this.state.context, ignoreCache: true } });
+        });
+    }
+
     render() {
         return (
             <NavigationContext.Provider value={this.state.context}>
-                {this.props.children}
+                <SceneRSCContext.Provider value={this.refetch}>
+                    {this.props.children}
+                </SceneRSCContext.Provider>
             </NavigationContext.Provider>
         );
     }

NavigationReact/src/RSCContext.ts

@@ -1,4 +1,4 @@
 import { createContext } from 'react';
 import { StateContext } from 'navigation';
 
-export default createContext<{fetching: boolean, setRefetch: (refetch?: string[] | ((stateContext: StateContext) => boolean)) => void}>({fetching: false, setRefetch: null});
+export default createContext<{fetching: boolean, setRefetch: (refetch?: string[] | ((stateContext: StateContext) => boolean)) => void, refetcher: (scene?: boolean) => void}>({fetching: false, setRefetch: null, refetcher: null});

NavigationReact/src/SceneRSCContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export default createContext<() => void>(null);

NavigationReact/src/SceneRSCView.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { use, useContext, useEffect, useRef, useMemo } from 'react';
+import React, { use, useContext, useEffect, useRef, useMemo, useOptimistic, startTransition } from 'react';
 import { SceneViewProps } from './Props.js';
 import useNavigationEvent from './useNavigationEvent.js';
 import BundlerContext from './BundlerContext.js';
@@ -17,15 +17,16 @@ const SceneRSCView = ({active, name, refetch: serverRefetch, errorFallback, chil
     const {state, oldState, data, stateNavigator: {stateContext, historyManager}} = navigationEvent;
     const {crumbs, nextCrumb: {crumblessUrl: url}, oldUrl, oldData, history, historyAction} = stateContext;
     const {deserialize} = useContext(BundlerContext);
-    const {fetching: ancestorFetching} = useContext(RSCContext);
+    const rscContext = useContext(RSCContext);
     const sceneViewKey = name || (typeof active === 'string' ? active : active[0]);
     const getShow = (stateKey: string) => (
         active != null && state && (
             typeof active === 'string' ? stateKey === active : active.indexOf(stateKey) !== -1
         )
     );
     const show = getShow(state.key);
-    const ignoreCache = !!navigationEvent['ignoreCache'];
+    const refetcherState = {ancestorFetching: rscContext.fetching, ignoreCache: !!navigationEvent['ignoreCache']};
+    const [{ancestorFetching, ignoreCache}, refetcher] = useOptimistic<any, void>(refetcherState, () => ({ancestorFetching: false, ignoreCache: true}));
     const cachedHistory = !ignoreCache && history && !!historyCache[url]?.[sceneViewKey];
     if (!rscCache.get(navigationEvent)) rscCache.set(navigationEvent, {});
     const cachedSceneViews = rscCache.get(navigationEvent);
@@ -59,8 +60,8 @@ const SceneRSCView = ({active, name, refetch: serverRefetch, errorFallback, chil
     const sceneView = (() => {
         if (!show) return null;
         if (cachedHistory) return historyCache[url][sceneViewKey];
+        if (cachedSceneViews[sceneViewKey]) return cachedSceneViews[sceneViewKey];
         if (firstScene || ancestorFetching) return children;
-        if (fetching) return cachedSceneViews[sceneViewKey];
         return renderedSceneView.current.sceneView;
     })();
     useEffect(() => {
@@ -94,8 +95,14 @@ const SceneRSCView = ({active, name, refetch: serverRefetch, errorFallback, chil
     });
     const rscContextVal = useMemo(() => ({
         fetching: ancestorFetching || fetching,
-        setRefetch: (refetch: any) => refetchRef.current = refetch !== undefined ? refetch : serverRefetch
-    }), [ancestorFetching || fetching]);
+        setRefetch: (refetch: any) => refetchRef.current = refetch !== undefined ? refetch : serverRefetch,
+        refetcher: () => {
+            startTransition(() => {
+                delete cachedSceneViews[sceneViewKey];
+                refetcher();
+            })
+        }
+    }), [ancestorFetching || fetching, cachedSceneViews, refetcher]);
     return (
         <ErrorBoundary errorFallback={errorFallback}>
             <RSCContext.Provider value={rscContextVal}>

NavigationReact/src/useRefetch.ts

@@ -1,9 +1,12 @@
 import { useContext } from 'react';
 import { StateContext } from 'navigation';
 import RSCContext from './RSCContext.js';
+import SceneRSCContext from './SceneRSCContext.js';
 
 const useRefetch = (refetch?: string[] | ((stateContext: StateContext) => boolean) | null) => {
-    const {setRefetch} = useContext(RSCContext);
+    const {setRefetch, refetcher} = useContext(RSCContext);
+    const sceneRefetcher = useContext(SceneRSCContext);
     setRefetch(refetch);
+    return (scene = false) => !scene ? refetcher() : sceneRefetcher();
 }
 export default useRefetch;