Implemented LRU Cache - Removing the least recently used resource (#87)

Author: prithveeshgoel

docs/resources/creation.md

@@ -20,4 +20,5 @@ export const userProfileResource = createResource({
 | `getKey`        | `(routerContext, customContext) => string`               | The return value of this function is used to identify this resource within the `type` namespace. The function itself is supplied with `routerContext` and `customContext` so that the composition of keys can use this data if required                                                                                              |
 | `getData`       | `(routerExtendedContext, customContext) => Promise<any>` | This function is used to load the data for the resource. The function should return a promise and resolve with the resource data object. NOTE: You may not use `getData` and `getDataLoader` on the same resource                                                                                                                    |
 | `maxAge`        | `number`                                                 | How long (in milliseconds) the resource should be kept in the router before a fresh resource is retrieved. Note: resources are only refreshed on route _change_. The router does not poll or update resources in the background. Navigation within the same route, e.g. query param change, will not trigger a refresh of resources. |
-| `getDataLoader` | `() => Promise<{default: getData}>`                      | Optional property that enables neater code splitting. See more below. NOTE: You may not use `getData` and `getDataLoader` on the same resource                                                                                                                                                                                       |
+| `maxCache` | `number`                      | How many resources can be kept in the router for a particular `type`. Once the threshold limit is reached, a **Least Recently** used resource gets deleted, making space for the new requested resource of the same type.                                                                                                                                         |
+| `getDataLoader` | `() => Promise<{default: getData}>`                      | Optional property that enables neater code splitting. See more below. NOTE: You may not use `getData` and `getDataLoader` on the same resource                                                                                                                                                                                       |

examples/routing-with-resources/about.tsx

@@ -1,34 +1,39 @@
 import React from 'react';
-import { Link, createResource, useResource } from 'react-resource-router';
+import {
+  Link,
+  createResource,
+  useResource,
+  useQueryParam,
+} from 'react-resource-router';
 import { homeRoute } from './routes';
 
 export const aboutResource = createResource({
   type: 'about',
-  getKey: () => 'data',
-  maxAge: 0,
-  getData: async () => {
+  getKey: ({ query }) => `${query.name}`,
+  maxAge: 30000,
+  getData: async ({ query }) => {
+    const { name } = query;
     const response = await fetch(
-      'https://dog.ceo/api/breed/schnauzer/images/random'
+      `https://dog.ceo/api/breed/${name}/images/random`
     );
     const result: { message: string } = await response.json();
 
     return result;
   },
+  maxCache: 5,
 });
 
 export const About = () => {
   // eslint-disable-next-line
   const { data, loading, error } = useResource(aboutResource);
+  const [breedName] = useQueryParam('name');
 
   return (
     <div>
-      <h1>About</h1>
+      <h1>{breedName}</h1>
       <Link to={homeRoute}>Go to home</Link>
       <section>
-        <p>A picture of a schnauzer</p>
-        <section>
-          {!loading && <img src={data?.message} alt="A cute dog!" />}
-        </section>
+        {!loading && <img src={data?.message} alt="A cute dog!" />}
       </section>
     </div>
   );

examples/routing-with-resources/home.tsx

@@ -4,10 +4,10 @@ import { aboutRoute } from './routes';
 
 export const homeResource = createResource({
   type: 'home',
-  getKey: () => 'data',
-  maxAge: 0,
+  getKey: () => 'breedList',
+  maxAge: 10000,
   getData: async () => {
-    const response = await fetch('https://dog.ceo/api/breeds/image/random');
+    const response = await fetch('https://dog.ceo/api/breeds/list/all');
     const result: { message: string } = await response.json();
 
     return result;
@@ -17,18 +17,21 @@ export const homeResource = createResource({
 export const Home = () => {
   // eslint-disable-next-line
   const { data, loading, error } = useResource(homeResource);
+  const breeds = data?.message ? Object.keys(data.message) : [];
 
   return (
     <div>
-      <h1>Home</h1>
-      <Link to={aboutRoute} prefetch="hover">
-        Go to about
-      </Link>
+      <h1>Dog Breeds</h1>
       <section>
-        <p>A random picture of a cute dog</p>
-        <section>
-          {!loading && <img src={data?.message} alt="A cute dog!" />}
-        </section>
+        <ul>
+          {breeds.slice(0, 25).map(breed => (
+            <li key={breed}>
+              <Link to={aboutRoute} query={{ name: breed }}>
+                {breed}
+              </Link>
+            </li>
+          ))}
+        </ul>
       </section>
     </div>
   );

package.json

@@ -36,6 +36,10 @@
     {
       "name": "Dinesh Pandiyan",
       "email": "[email protected]"
+    },
+    {
+      "name": "Prithveesh Goel",
+      "email": "[email protected]"
     }
   ],
   "main": "build/cjs/index.js",
@@ -52,9 +56,9 @@
     "build:types-cjs": "tsc --emitDeclarationOnly --project tsconfig.build.json --outDir build/cjs && cp src/*.flow build/cjs",
     "build:types-esm": "tsc --emitDeclarationOnly --project tsconfig.build.json --outDir build/esm && cp src/*.flow build/esm",
     "docs": "npx docsify-cli serve docs",
-    "lint": "eslint --ext .ts,.tsx,.js src/",
+    "lint": "eslint --ext .ts,.tsx,.js src/ examples/",
     "lint:deps": "madge -c --extensions ts,tsx src",
-    "lint:fix": "eslint --ext .ts,.tsx,.js src/ --fix",
+    "lint:fix": "eslint --ext .ts,.tsx,.js src/ examples/ --fix",
     "lint:types": "tsc --noEmit && flow --max-warnings=0",
     "lint:types-watch": "tsc --noEmit --watch",
     "prepack": "npm run preversion -s && npm run build -s",

src/__tests__/integration/test.tsx

@@ -37,6 +37,7 @@ const mockResource = {
   getKey: () => 'entry',
   getData: () => Promise.resolve('mock-data'),
   maxAge: 0,
+  maxCache: Infinity,
 };
 
 const historyBuildOptions = {
@@ -158,6 +159,7 @@ describe('<Router /> integration tests', () => {
           key: undefined,
           loading: true,
           promise: null,
+          accessedAt: null,
         },
       },
       HI: {
@@ -168,6 +170,7 @@ describe('<Router /> integration tests', () => {
           key: undefined,
           loading: false,
           promise: null,
+          accessedAt: null,
         },
       },
     });
@@ -205,6 +208,7 @@ describe('<Router /> integration tests', () => {
             key: undefined,
             loading: false,
             promise: expect.any(Promise),
+            accessedAt: expect.any(Number),
           },
         },
         HI: {
@@ -215,6 +219,7 @@ describe('<Router /> integration tests', () => {
             key: undefined,
             loading: false,
             promise: expect.any(Promise),
+            accessedAt: expect.any(Number),
           },
         },
       },

src/__tests__/unit/controllers/hooks/resource-store/test.tsx

@@ -137,6 +137,7 @@ describe('useResource hook', () => {
         ...mockSlice,
         expiresAt: 100,
         data: newData,
+        accessedAt: 0,
       });
     });
 
@@ -162,6 +163,7 @@ describe('useResource hook', () => {
         ...mockSlice,
         expiresAt: 100,
         data: newData,
+        accessedAt: 0,
       });
     });