Merge pull request #22 from forge42dev/19-feature-request-bypass-having-to-type-client-loader

Added createClientLoaderCache utility

Author: AlemTuzlak

README.md

@@ -244,6 +244,20 @@ clientLoader.hydrate = true;
 
 ```
 
+### createClientLoaderCache
+
+Creates everything needed to cache the data via clientLoader, behind the scenes creates the clientLoader object with the correct hydrate flag and the adapter.
+
+```tsx
+import { createClientLoaderCache, cacheClientLoader } from "remix-client-cache";
+
+export const clientLoader = createClientLoaderCache(); 
+
+// above is equivalent to:
+export const clientLoader = (args: ClientLoaderFunctionArgs) => cacheClientLoader(args);
+clientLoader.hydrate = true;
+```
+
 ### decacheClientLoader
 
 Used to remove the data that is piped from the loader to your component using the `clientLoader` export. 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-client-cache",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Utility library to cache your client data in React Router",
   "type": "module",
   "main": "./dist/index.cjs",

src/index.tsx

@@ -79,13 +79,19 @@ export const decacheClientLoader = async <T,>(
   return data;
 };
 
+type CacheClientLoaderArgs = {
+  type?: "swr" | "normal";
+  key?: string;
+  adapter?: CacheAdapter;
+};
+
 export const cacheClientLoader = async <T,>(
   { request, serverLoader }: ClientLoaderFunctionArgs,
   {
     type = "swr",
     key = constructKey(request),
     adapter = cache,
-  }: { type?: "swr" | "normal"; key?: string; adapter?: CacheAdapter } = {
+  }: CacheClientLoaderArgs = {
     type: "swr",
     key: constructKey(request),
     adapter: cache,
@@ -119,6 +125,13 @@ export const cacheClientLoader = async <T,>(
   };
 };
 
+export const createClientLoaderCache = (props?: CacheClientLoaderArgs) => {
+  const clientLoader = (args: ClientLoaderFunctionArgs) =>
+    cacheClientLoader(args, props);
+  clientLoader.hydrate = true;
+  return clientLoader;
+};
+
 export function useCachedLoaderData<T>(
   { adapter = cache }: { adapter?: CacheAdapter } = { adapter: cache },
 ) {

test-apps/testing-app/app/routes/_index.tsx

@@ -7,6 +7,7 @@ import {
 import type { MetaFunction } from "react-router";
 import {
   cacheClientLoader,
+  createClientLoaderCache,
   decacheClientLoader,
   useCachedLoaderData,
 } from "remix-client-cache";
@@ -25,7 +26,7 @@ export const loader = async () => {
   return { user: { description: Math.random() } };
 };
 
-export const clientLoader = cacheClientLoader;
+export const clientLoader = createClientLoaderCache();
 clientLoader.hydrate = true;
 
 export const clientAction = decacheClientLoader;