add a bility to refetch and retry fetching of server components

Author: AbanoubGhadban

node_package/src/RSCProvider.tsx

@@ -7,6 +7,8 @@ type RSCContextType = {
   getCachedComponent: (componentName: string, componentProps: unknown) => React.ReactNode;
 
   getComponent: (componentName: string, componentProps: unknown) => Promise<React.ReactNode>;
+
+  refetchComponent: (componentName: string, componentProps: unknown) => Promise<React.ReactNode>;
 };
 
 const RSCContext = React.createContext<RSCContextType | undefined>(undefined);
@@ -59,7 +61,20 @@ export const createRSCProvider = ({
     return promise;
   };
 
-  const contextValue = { getCachedComponent, getComponent };
+  const refetchComponent = (componentName: string, componentProps: unknown) => {
+    const key = createRSCPayloadKey(componentName, componentProps, railsContext);
+    cachedComponents[key] = undefined;
+    const promise = getServerComponent({
+      componentName,
+      componentProps,
+      railsContext,
+      enforceRefetch: true,
+    });
+    fetchRSCPromises[key] = promise;
+    return promise;
+  };
+
+  const contextValue = { getCachedComponent, getComponent, refetchComponent };
 
   return ({ children }: { children: React.ReactNode }) => {
     return <RSCContext.Provider value={contextValue}>{children}</RSCContext.Provider>;

node_package/src/RSCRoute.ts renamed to node_package/src/RSCRoute.tsx

@@ -1,5 +1,34 @@
 import * as React from 'react';
 import { useRSC } from './RSCProvider.tsx';
+import { ServerComponentFetchError } from './ServerComponentFetchError.ts';
+
+/**
+ * Error boundary component for RSCRoute that adds server component name and props to the error
+ * So, the parent ErrorBoundary can refetch the server component
+ */
+class RSCRouteErrorBoundary extends React.Component<
+  { children: React.ReactNode; componentName: string; componentProps: unknown },
+  { error: Error | null }
+> {
+  constructor(props: { children: React.ReactNode; componentName: string; componentProps: unknown }) {
+    super(props);
+    this.state = { error: null };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  render() {
+    const { error } = this.state;
+    const { componentName, componentProps, children } = this.props;
+    if (error) {
+      throw new ServerComponentFetchError(error.message, componentName, componentProps, error);
+    }
+
+    return children;
+  }
+}
 
 /**
  * Renders a React Server Component inside a React Client Component.
@@ -28,15 +57,23 @@ export type RSCRouteProps = {
   componentProps: unknown;
 };
 
-const RSCRoute = ({ componentName, componentProps }: RSCRouteProps) => {
+const PromiseWrapper = ({ promise }: { promise: Promise<React.ReactNode> }) => {
+  return React.use(promise);
+};
+
+const RSCRoute = ({ componentName, componentProps }: RSCRouteProps): React.ReactNode => {
   const { getComponent, getCachedComponent } = useRSC();
   const cachedComponent = getCachedComponent(componentName, componentProps);
   if (cachedComponent) {
     return cachedComponent;
   }
 
   const componentPromise = getComponent(componentName, componentProps);
-  return React.use(componentPromise);
+  return (
+    <RSCRouteErrorBoundary componentName={componentName} componentProps={componentProps}>
+      <PromiseWrapper promise={componentPromise} />
+    </RSCRouteErrorBoundary>
+  );
 };
 
 export default RSCRoute;

node_package/src/RSCRouteError.ts

@@ -0,0 +1,26 @@
+/**
+ * Custom error type for when there's an issue fetching or rendering a server component.
+ * This error includes information about the server component and the original error that occurred.
+ */
+export class ServerComponentFetchError extends Error {
+  serverComponentName: string;
+
+  serverComponentProps: unknown;
+
+  originalError: Error;
+
+  constructor(message: string, componentName: string, componentProps: unknown, originalError: Error) {
+    super(message);
+    this.name = 'ServerComponentFetchError';
+    this.serverComponentName = componentName;
+    this.serverComponentProps = componentProps;
+    this.originalError = originalError;
+  }
+}
+
+/**
+ * Type guard to check if an error is a ServerComponentFetchError
+ */
+export function isServerComponentFetchError(error: unknown): error is ServerComponentFetchError {
+  return error instanceof ServerComponentFetchError;
+}

node_package/src/ServerComponentFetchError.ts

@@ -0,0 +1,26 @@
+/**
+ * Custom error type for when there's an issue fetching or rendering a server component.
+ * This error includes information about the server component and the original error that occurred.
+ */
+export class ServerComponentFetchError extends Error {
+  serverComponentName: string;
+
+  serverComponentProps: unknown;
+
+  originalError: Error;
+
+  constructor(message: string, componentName: string, componentProps: unknown, originalError: Error) {
+    super(message);
+    this.name = 'ServerComponentFetchError';
+    this.serverComponentName = componentName;
+    this.serverComponentProps = componentProps;
+    this.originalError = originalError;
+  }
+}
+
+/**
+ * Type guard to check if an error is a ServerComponentFetchError
+ */
+export function isServerComponentFetchError(error: unknown): error is ServerComponentFetchError {
+  return error instanceof ServerComponentFetchError;
+}

node_package/src/getReactServerComponent.client.ts

@@ -14,6 +14,7 @@ type ClientGetReactServerComponentProps = {
   componentName: string;
   componentProps: unknown;
   railsContext: RailsContext;
+  enforceRefetch?: boolean;
 };
 
 const createFromFetch = async (fetchPromise: Promise<Response>) => {
@@ -116,6 +117,7 @@ const createFromPreloadedPayloads = (payloads: string[]) => {
  * @param componentName - Name of the server component to render
  * @param componentProps - Props to pass to the server component
  * @param railsContext - Context for the current request
+ * @param enforceRefetch - Whether to enforce a refetch of the component
  * @returns A Promise resolving to the rendered React element
  *
  * @important This is an internal function. End users should not use this directly.
@@ -127,11 +129,12 @@ const getReactServerComponent = ({
   componentName,
   componentProps,
   railsContext,
+  enforceRefetch = false,
 }: ClientGetReactServerComponentProps) => {
   assertRailsContextWithComponentSpecificMetadata(railsContext);
   const componentKey = createRSCPayloadKey(componentName, componentProps, railsContext);
   const payloads = window.REACT_ON_RAILS_RSC_PAYLOADS?.[componentKey];
-  if (payloads) {
+  if (!enforceRefetch && payloads) {
     return createFromPreloadedPayloads(payloads);
   }
   return fetchRSC({ componentName, componentProps, railsContext });

node_package/src/getReactServerComponent.server.ts

@@ -4,7 +4,7 @@ import transformRSCStream from './transformRSCNodeStream.ts';
 import loadJsonFile from './loadJsonFile.ts';
 import { assertRailsContextWithServerComponentCapabilities, RailsContext } from './types/index.ts';
 
-type RSCServerRootProps = {
+type GetReactServerComponentOnServerProps = {
   componentName: string;
   componentProps: unknown;
   railsContext: RailsContext;
@@ -46,6 +46,7 @@ const createFromReactOnRailsNodeStream = async (
  * @param componentName - Name of the server component to render
  * @param componentProps - Props to pass to the server component
  * @param railsContext - Context for the current request
+ * @param enforceRefetch - Whether to enforce a refetch of the component
  * @returns A Promise resolving to the rendered React element
  *
  * @important This is an internal function. End users should not use this directly.
@@ -57,7 +58,7 @@ const getReactServerComponent = async ({
   componentName,
   componentProps,
   railsContext,
-}: RSCServerRootProps) => {
+}: GetReactServerComponentOnServerProps) => {
   assertRailsContextWithServerComponentCapabilities(railsContext);
 
   if (typeof ReactOnRails.getRSCPayloadStream !== 'function') {

package.json

@@ -21,7 +21,9 @@
       "react-server": "./node_package/lib/wrapServerComponentRenderer/server.rsc.js",
       "default": "./node_package/lib/wrapServerComponentRenderer/server.js"
     },
-    "./RSCRoute": "./node_package/lib/RSCRoute.js"
+    "./RSCRoute": "./node_package/lib/RSCRoute.js",
+    "./RSCProvider": "./node_package/lib/RSCProvider.js",
+    "./ServerComponentFetchError": "./node_package/lib/ServerComponentFetchError.js"
   },
   "directories": {
     "doc": "docs"