Using list api response as cache for each individual entity

src/libs/hooks/test/libs/Wrapper.tsx

@@ -1,4 +1,19 @@
 import { SWRConfig } from "swr";
+export const createWrapper = (
+  cache: Map
+): React.FC<{ children: React.ReactNode }> => {
+  return (props) => (
+    <SWRConfig
+      value={{
+        // Clearing cache between cases
+        provider: () => cache,
+      }}
+    >
+      {props.children};
+    </SWRConfig>
+  );
+};
+
 export const Wrapper: React.FC<{ children: React.ReactNode }> = (props) => {
   return (
     <SWRConfig

src/libs/hooks/test/users.test.tsx

@@ -5,7 +5,7 @@ import { useUser, useUsers } from "../users";
 import { sleep } from "../../sleep";
 import { getUserHandler } from "./libs/getUserHandler";
 import { getMockUser } from "./libs/getMockUser";
-import { Wrapper } from "./libs/Wrapper";
+import { createWrapper, Wrapper } from "./libs/Wrapper";
 import { getUsersHandler } from "./libs/getUsersHandler";
 
 const mockServer = setupServer(getUserHandler(), getUsersHandler());
@@ -19,7 +19,7 @@ describe("libs/hooks/users", () => {
   });
 
   it("fetch a user", async () => {
-    const { result } = renderHook(() => useUser("100"), {
+    const { result } = renderHook(() => useUser(100), {
       wrapper: Wrapper,
     });
 
@@ -51,4 +51,24 @@ describe("libs/hooks/users", () => {
     expect(result.current.data?.list).toHaveLength(10);
     expect(result.current.isLoading).toBeFalsy();
   });
+
+  it("cache", async () => {
+    const cache = new Map();
+    const wrapper = createWrapper(cache);
+    const { result: list } = renderHook(() => useUsers(), {
+      wrapper,
+    });
+
+    expect(list.current.isLoading).toBeTruthy();
+
+    await act(sleep);
+
+    expect(list.current.isLoading).toBeFalsy();
+
+    const { result: user } = renderHook(() => useUser(3), {
+      wrapper,
+    });
+
+    expect(user.current.data).toBeDefined();
+  });
 });

src/libs/hooks/users.tsx

@@ -1,13 +1,25 @@
 import React from "react";
-import useSWR from "swr";
+import useSWR, { useSWRConfig } from "swr";
 import useSWRInfinite from "swr/infinite";
 import type { User } from "../../model/User";
 
 const fetchUser = async (userId: string): Promise<User> => {
   const response = await fetch(`https://some.api.provider/api/user/${userId}`);
   return response.json() as Promise<User>;
 };
-export const useUser = (userId: string): ReturnType<typeof useSWR<User>> => {
+const useMutateUser = () => {
+  const { mutate } = useSWRConfig();
+
+  return React.useCallback(
+    (user: User) => {
+      mutate(["/api/user/:userId", user.id], user, { revalidate: false });
+    },
+    [mutate]
+  );
+};
+export const useUser = (
+  userId: User["id"]
+): ReturnType<typeof useSWR<User>> => {
   return useSWR<User>(
     ["/api/user/:userId", userId],
     async ([, userId]) => fetchUser(userId),
@@ -38,6 +50,7 @@ export const useUsers = (
   isLoading: boolean;
   fetchNext(): Promise<void>;
 } => {
+  const mutateUser = useMutateUser();
   const keyLoader: SWRInfiniteKeyLoader<{
     key: string;
     offset: number;
@@ -62,8 +75,11 @@ export const useUsers = (
 
   const { isLoading, data, setSize } = useSWRInfinite<UserListResponse>(
     keyLoader,
-    async ({ limit, offset }: Exclude<ReturnType<typeof keyLoader>, null>) =>
-      fetchUsers(offset, limit),
+    async ({ limit, offset }: Exclude<ReturnType<typeof keyLoader>, null>) => {
+      const response = await fetchUsers(offset, limit);
+      response.list.forEach(mutateUser);
+      return response;
+    },
     {
       suspense: false,
     }