Skip to content

⚡ Bolt: Optimize project list fetching #190

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aicoder2009 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

⚡ Bolt: Optimize project list fetching #190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .jules/bolt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,7 @@
## 2024-05-18 - Concurrent Fetching with Owner IDs in Share Links
**Learning:** In the share system, endpoints processing a share code typically suffer from waterfall latency by first loading target entity details (like a project) and then querying its associated elements (like project lists) using the entity's owner ID (`userId`). However, the `shareLink` object already contains the `userId` field (representing the owner's ID).
**Action:** Always leverage the existing owner's ID within `shareLink` to bypass sequential dependencies and fetch parent entities (like projects) concurrently with their child elements (like user lists) using `Promise.all`.

## 2024-11-20 - Frontend In-Memory Filtering for DynamoDB Subsets
**Learning:** The DynamoDB implementation lacks a Global Secondary Index (GSI) for `projectId` on lists. Thus, the `/api/projects/[id]/lists` backend route just fetches all user lists via `getUserLists` and filters them anyway. On pages that need both "all lists" and "project lists" (like `src/app/projects/[id]/page.tsx`), fetching both via API results in duplicate full-table scans.
**Action:** When fetching a global collection (e.g., all lists) and a subset of that collection (e.g., project lists) simultaneously on the frontend, derive the subset in-memory using array filtering instead of making a redundant API request to avoid duplicate backend database queries.
14 changes: 6 additions & 8 deletions src/app/projects/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,15 +60,16 @@ export default function ProjectDetailPage({ params }: { params: Promise<{ id: st
// OPTIMIZATION: Execute independent network requests and JSON parsing concurrently
// using Promise.all. This prevents a 3-step waterfall, reducing Time to First Byte
// (TTFB) and overall load time significantly on this detail page.
const [projectRes, listsRes, allListsRes] = await Promise.all([
// Additionally, we derive the project's lists in-memory by filtering `allListsResult`
// instead of making a redundant API request to `/api/projects/${projectId}/lists`,
// which avoids a duplicate backend database query.
const [projectRes, allListsRes] = await Promise.all([
fetch(`/api/projects/${projectId}`),
fetch(`/api/projects/${projectId}/lists`),
fetch("/api/lists"),
]);

const [projectResult, listsResult, allListsResult] = await Promise.all([
const [projectResult, allListsResult] = await Promise.all([
projectRes.json(),
listsRes.json(),
allListsRes.json(),
]);

Expand All @@ -81,12 +82,9 @@ export default function ProjectDetailPage({ params }: { params: Promise<{ id: st
setEditName(projectResult.data.name);
setEditDescription(projectResult.data.description || "");

if (listsResult.success) {
setLists(listsResult.data);
}

if (allListsResult.success) {
setAllLists(allListsResult.data);
setLists(allListsResult.data.filter((list: List) => list.projectId === projectId));
}
Comment on lines 85 to 88

@coderabbitai coderabbitai Bot Jun 26, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🩺 Stability & Availability | 🟡 Minor | ⚡ Quick win

Handle the allListsResult failure case.

The in-memory filter correctly mirrors the removed getProjectLists (fetch-all-then-filter) backend path, so the derivation itself is sound. However, when allListsResult.success is false (e.g. /api/lists returns 401/500), neither lists/allLists nor error is set, so the project silently renders the empty "This project has no lists yet" state. Surface the failure so users can distinguish a genuinely empty project from a failed list fetch.

🛡️ Proposed fix 
       if (allListsResult.success) {
         setAllLists(allListsResult.data);
         setLists(allListsResult.data.filter((list: List) => list.projectId === projectId));
+      } else {
+        setError(allListsResult.error || "Failed to load lists");
       }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
if (allListsResult.success) {
setAllLists(allListsResult.data);
setLists(allListsResult.data.filter((list: List) => list.projectId === projectId));
}
if (allListsResult.success) {
setAllLists(allListsResult.data);
setLists(allListsResult.data.filter((list: List) => list.projectId === projectId));
} else {
setError(allListsResult.error || "Failed to load lists");
}
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/projects/`[id]/page.tsx around lines 85 - 88, The project page in the
`Page` component only updates `allLists` and `lists` when
`allListsResult.success` is true, so the failure path is currently swallowed.
Add handling in the `allListsResult` branch to set the existing `error` state
(and avoid leaving stale/empty list state ambiguous) when the `/api/lists` fetch
fails, using the same `fetchAllLists`/project-load logic that currently derives
`lists` from `allListsResult.data`. Ensure the `projectId`-filtered rendering
can distinguish an actual empty project from a failed list load.

} catch (err) {
console.error("Error fetching project:", err);
Expand Down
Loading