From c01809e82c5a2520189c10e96386faedda06576b Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Sun, 1 Sep 2024 15:24:46 +0200 Subject: [PATCH] chore(rsc): Refactor: Rename RscFetcher -> RscRoutes (#11409) --- packages/router/src/rsc/ClientRouter.tsx | 14 +++--- .../src/rsc/{RscFetcher.tsx => RscRoutes.tsx} | 43 +++++++++---------- 2 files changed, 28 insertions(+), 29 deletions(-) rename packages/router/src/rsc/{RscFetcher.tsx => RscRoutes.tsx} (78%) diff --git a/packages/router/src/rsc/ClientRouter.tsx b/packages/router/src/rsc/ClientRouter.tsx index 483a4674815d..8210e8db9d45 100644 --- a/packages/router/src/rsc/ClientRouter.tsx +++ b/packages/router/src/rsc/ClientRouter.tsx @@ -7,7 +7,7 @@ import { namedRoutes } from '../namedRoutes.js' import { RouterContextProvider } from '../router-context.js' import type { RouterProps } from '../router.js' -import { RscFetcher } from './RscFetcher.js' +import { RscRoutes } from './RscRoutes.js' export const Router = ({ useAuth, paramTypes, children }: RouterProps) => { return ( @@ -48,8 +48,8 @@ const LocationAwareRouter = ({ // 'No route found for the current URL. Make sure you have a route ' + // 'defined for the root of your React app.', // ) - const rscProps = { location: { pathname, search } } - return + const routesProps = { location: { pathname, search } } + return } const requestedRoute = pathRouteMap[activeRoutePath] @@ -70,7 +70,7 @@ const LocationAwareRouter = ({ ) } - const rscProps = { location: { pathname, search } } + const routesProps = { location: { pathname, search } } return ( - + ) } - const rscProps = { location: { pathname, search } } + const routesProps = { location: { pathname, search } } // TODO (RSC): I think that moving between private and public routes // re-initializes RscFetcher. I wonder if there's an optimization to be made // here. Maybe we can lift RscFetcher up so we can keep the same instance // around and reuse it everywhere - return + return } export interface RscFetchProps extends Record { diff --git a/packages/router/src/rsc/RscFetcher.tsx b/packages/router/src/rsc/RscRoutes.tsx similarity index 78% rename from packages/router/src/rsc/RscFetcher.tsx rename to packages/router/src/rsc/RscRoutes.tsx index 573d071ce68b..90309e618c2f 100644 --- a/packages/router/src/rsc/RscFetcher.tsx +++ b/packages/router/src/rsc/RscRoutes.tsx @@ -53,9 +53,11 @@ function rscFetchRoutes(serializedProps: string) { const searchParams = new URLSearchParams() searchParams.set('props', serializedProps) + const rscId = '__rwjs__Routes' + // TODO (RSC): During SSR we should not fetch (Is this function really // called during SSR?) - const responsePromise = fetch(BASE_PATH + '__rwjs__Routes?' + searchParams, { + const responsePromise = fetch(BASE_PATH + rscId + '?' + searchParams, { headers: { 'rw-rsc': '1', }, @@ -70,21 +72,18 @@ function rscFetchRoutes(serializedProps: string) { callServer: async function (rsaId: string, args: unknown[]) { // `args` is often going to be an array with just a single element, // and that element will be FormData - console.log('RscFetcher :: callServer rsaId', rsaId, 'args', args) - - // Including rsaId here to make sure the page rerenders when calling RSAs - // Calling a RSA doesn't change the url (i.e. `serializedProps`), and it - // also doesn't change the rscId, so React would not detect a state change - // that would trigger a rerender. So we include the rsaId here to make - // a new cache key that will trigger a rerender. - // TODO (RSC): What happens if you call the same RSA twice in a row? - // Like `increment()` + console.log('RscRoutes :: callServer rsaId', rsaId, 'args', args) + + // Including rsaId here for debugging reasons only, what's important is + // `new Date()`, to make sure the cache key is unique so we trigger a + // rerender. It's needed to handle calling RSAs multiple times with the + // same arguments const rscCacheKey = `${serializedProps}::${rsaId}::${new Date()}` const searchParams = new URLSearchParams() searchParams.set('action_id', rsaId) searchParams.set('props', serializedProps) - const id = '_' + const rscId = '_' let body: Awaited> = '' @@ -94,7 +93,7 @@ function rscFetchRoutes(serializedProps: string) { console.error('Error encoding Server Action arguments', e) } - const responsePromise = fetch(BASE_PATH + id + '?' + searchParams, { + const responsePromise = fetch(BASE_PATH + rscId + '?' + searchParams, { method: 'POST', body, headers: { @@ -118,7 +117,7 @@ function rscFetchRoutes(serializedProps: string) { // rscCache.set(rscCacheKey, dataPromise) const dataValue = await dataPromise - console.log('RscFetcher :: callServer dataValue', dataValue) + console.log('RscRoutes :: callServer dataValue', dataValue) // TODO (RSC): Fix the types for `createFromFetch` // @ts-expect-error The type is wrong for createFromFetch const Routes = dataValue.Routes?.[0] @@ -147,36 +146,36 @@ function rscFetchRoutes(serializedProps: string) { } interface Props { - rscProps: RscProps + routesProps: RscProps } -export const RscFetcher = ({ rscProps }: Props) => { - const serializedProps = JSON.stringify(rscProps) +export const RscRoutes = ({ routesProps }: Props) => { + const serializedProps = JSON.stringify(routesProps) const [currentRscCacheKey, setCurrentRscCacheKey] = useState(() => { - console.log('RscFetcher :: useState initial value') + console.log('RscRoutes :: useState initial value') // Calling rscFetchRoutes here to prime the cache rscFetchRoutes(serializedProps) return serializedProps }) useEffect(() => { - console.log('RscFetcher :: useEffect set updateCurrentRscCacheKey') + console.log('RscRoutes :: useEffect set updateCurrentRscCacheKey') updateCurrentRscCacheKey = (key: string) => { - console.log('RscFetcher inside updateCurrentRscCacheKey', key) + console.log('RscRoutes inside updateCurrentRscCacheKey', key) setCurrentRscCacheKey(key) } }, []) useEffect(() => { - console.log('RscFetcher :: useEffect about to call rscFetchRoutes') + console.log('RscRoutes :: useEffect about to call rscFetchRoutes') // rscFetchRoutes will update rscCache with the fetched component rscFetchRoutes(serializedProps) setCurrentRscCacheKey(serializedProps) }, [serializedProps]) - console.log('RscFetcher :: current props\n rscProps: ' + serializedProps) - console.log('RscFetcher :: rendering cache entry for\n' + currentRscCacheKey) + console.log('RscRoutes :: current props\n routesProps: ' + serializedProps) + console.log('RscRoutes :: rendering cache entry for\n' + currentRscCacheKey) const component = rscCache.get(currentRscCacheKey)