Merge pull request #9 from forge42dev/4-invalidate-normal-cache-on-action

4 invalidate normal cache on action

Author: AlemTuzlak

.gitignore

@@ -104,3 +104,4 @@ dist
 .tern-port
 
 /build
+.history

README.md

@@ -237,6 +237,36 @@ clientLoader.hydrate = true;
 
 ```
 
+### decacheClientLoader
+
+Used to remove the data that is piped from the loader to your component using the `clientLoader` export. 
+
+```tsx
+import { json, type LoaderFunctionArgs } from "@remix-run/node";
+import { ClientLoaderFunctionArgs } from "@remix-run/react"; 
+import { decacheClientLoader, useCachedLoaderData } from "remix-client-cache";
+
+export const loader = async ({ params }: LoaderFunctionArgs) => {
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/users/${params.user}`
+  );
+  const user = await response.json();
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return json({ user: { ...user, description: Math.random() } });
+};
+// The data is cached here
+export const clientLoader = (args: ClientLoaderFunctionArgs) => cacheClientLoader;
+clientLoader.hydrate = true;
+// It is de-cached after a successful action submission via the clientAction export
+export const clientAction = decacheClientLoader;
+
+```
+
+Accepts an optional object with the following properties:
+- `key` - key that is used to store the data in the cache.
+- `adapter` - the cache adapter that is used to store the data.
+
+
 
 ### useCachedLoaderData
 

src/index.tsx

@@ -1,6 +1,7 @@
 import type { SerializeFrom } from "@remix-run/server-runtime";
 import {
   Await,
+  ClientActionFunctionArgs,
   ClientLoaderFunctionArgs,
   useLoaderData,
 } from "@remix-run/react";
@@ -65,6 +66,18 @@ export const configureGlobalCache = (
   }
 };
 
+export const decacheClientLoader = async <T extends unknown>(
+  { request, serverAction }: ClientActionFunctionArgs,
+  {
+    key = constructKey(request),
+    adapter = cache,
+  }: { key?: string; adapter?: CacheAdapter },
+) => {
+  const data = await serverAction<T>();
+  await adapter.removeItem(key);
+  return data;
+};
+
 export const cacheClientLoader = async <T extends unknown>(
   { request, serverLoader }: ClientLoaderFunctionArgs,
   {

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

@@ -4,6 +4,7 @@ import {
   cacheClientLoader,
   useCachedLoaderData,
 } from "~/hook/useCachedLoaderData";
+import { decacheClientLoader } from "remix-client-cache";
 
 export const meta: MetaFunction = () => {
   return [
@@ -22,6 +23,8 @@ export const clientLoader = async (args: ClientLoaderFunctionArgs) =>
   cacheClientLoader(args, "swr");
 clientLoader.hydrate = true;
 
+export const clientAction = decacheClientLoader;
+
 export default function Index() {
   const { user } = useCachedLoaderData<typeof loader>();
   const navigate = useNavigate();