Merge pull request #10 from forge42dev/5-cacheclientloader-fails-to-follow-redirect-from-loader-with-populated-cache

Follow redirects when swr cache gets a redirect

Author: AlemTuzlak

src/index.tsx

@@ -4,6 +4,7 @@ import {
   ClientActionFunctionArgs,
   ClientLoaderFunctionArgs,
   useLoaderData,
+  useNavigate,
 } from "@remix-run/react";
 import { useEffect, useState } from "react";
 import React from "react";
@@ -122,6 +123,7 @@ export function useCachedLoaderData<T extends any>(
   { adapter = cache }: { adapter?: CacheAdapter } = { adapter: cache },
 ) {
   const loaderData = useLoaderData<any>();
+  const navigate = useNavigate();
   const [freshData, setFreshData] = useState<any>({
     ...("serverData" in loaderData ? loaderData.serverData : loaderData),
   });
@@ -130,12 +132,22 @@ export function useCachedLoaderData<T extends any>(
   useEffect(() => {
     let isMounted = true;
     if (loaderData.deferredServerData) {
-      loaderData.deferredServerData.then((newData: any) => {
-        if (isMounted) {
-          adapter.setItem(loaderData.key, newData);
-          setFreshData(newData);
-        }
-      });
+      loaderData.deferredServerData
+        .then((newData: any) => {
+          if (isMounted) {
+            adapter.setItem(loaderData.key, newData);
+            setFreshData(newData);
+          }
+        })
+        .catch((e: any) => {
+          const res = e instanceof Response ? e : undefined;
+          if (res && res.status === 302) {
+            const to = res.headers.get("Location");
+            to && navigate(to);
+          } else {
+            throw e;
+          }
+        });
     }
     return () => {
       isMounted = false;

src/testing-app/app/root.tsx

@@ -24,7 +24,6 @@ export default function App() {
         <Outlet />
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );

src/testing-app/app/routes/_index.tsx

@@ -1,10 +1,16 @@
 import type { MetaFunction } from "@remix-run/node";
-import { ClientLoaderFunctionArgs, json, useNavigate } from "@remix-run/react";
 import {
+  ClientLoaderFunctionArgs,
+  json,
+  redirect,
+  useNavigate,
+} from "@remix-run/react";
+
+import {
+  decacheClientLoader,
   cacheClientLoader,
   useCachedLoaderData,
-} from "~/hook/useCachedLoaderData";
-import { decacheClientLoader } from "remix-client-cache";
+} from "remix-client-cache";
 
 export const meta: MetaFunction = () => {
   return [
@@ -16,11 +22,11 @@ export const meta: MetaFunction = () => {
 export const loader = async () => {
   const response = await fetch("https://jsonplaceholder.typicode.com/users/2");
   const user = await response.json();
+  // return redirect("/user/2");
   return json({ user: { ...user, description: Math.random() } });
 };
 
-export const clientLoader = async (args: ClientLoaderFunctionArgs) =>
-  cacheClientLoader(args, "swr");
+export const clientLoader = cacheClientLoader;
 clientLoader.hydrate = true;
 
 export const clientAction = decacheClientLoader;

src/testing-app/app/routes/user.$user.tsx

@@ -1,6 +1,7 @@
 import { json, type LoaderFunctionArgs } from "@remix-run/node";
 import {
   ClientLoaderFunctionArgs,
+  Link,
   useLoaderData,
   useNavigate,
 } from "@remix-run/react";
@@ -42,6 +43,7 @@ export default function Index() {
 
   return (
     <div>
+      <Link to="/">Home</Link>
       <SWR>
         {(data) => {
           return (