fix(dataloader): Fix dataloader implementation (#21)

* Add failing case

* Add fix for failing case

dataloader/app/loaders/userLoader.ts

@@ -3,12 +3,14 @@ import DataLoader from "dataloader";
 import { db } from "~/data.server";
 
 export const createUsersByIdLoader = () =>
-  new DataLoader(async (keys: Readonly<string[]>) =>
-    db.user.findMany({
+  new DataLoader(async (ids: Readonly<string[]>) => {
+    const users = await db.user.findMany({
       where: {
         id: {
-          in: keys,
+          in: ids,
         },
       },
-    })
-  );
+    });
+    const userMap = new Map(users.map((user) => [user.id, user]));
+    return ids.map((id) => userMap.get(id) ?? null);
+  });

dataloader/app/routes/users/index.tsx

@@ -24,9 +24,12 @@ export const loader: LoaderFunction = async ({ context }) => {
     "2cbad877-2da6-422d-baa6-c6a96a9e085f"
   );
   const user3 = context.loaders.usersById.load(
+    "does_not_exist"
+  );
+  const user4 = context.loaders.usersById.load(
     "1dd9e502-343d-4acb-9391-2bc52d5ea904"
   );
-  const users = await Promise.all([user1, user2, user3]);
+  const users = await Promise.all([user1, user2, user3, user4]);
 
   return json({ users });
 };
@@ -38,8 +41,8 @@ export default function UserEmails() {
     <section>
       <h2>Emails</h2>
       <ul>
-        {users.map((user) => (
-          <li key={user.email}>{user.email}</li>
+        {users.map((user, i) => (
+          <li key={i}>{user ? user.email : 'Not found'}</li>
         ))}
       </ul>
     </section>