-
Notifications
You must be signed in to change notification settings - Fork 17
perf: Eliminate N+1 API requests on Admin Products page #13
Copy link
Copy link
Open
Description
User Story
As an admin user,
I want the Product Management page to load all products and their supplier names in a minimal number of API calls,
so that the page loads quickly even as the product catalog grows.
Problem
In AdminProducts.tsx, fetchProducts() fires one separate GET /api/suppliers/:id request per product after fetching the product list. This is a classic N+1 query pattern — if there are 50 products, the page makes 51 API calls on load.
// Current — N+1 pattern
const productsWithSuppliers = await Promise.all(
productsData.map(async (product: Product) => {
const supplierResponse = await axios.get(`${api.baseURL}${api.endpoints.suppliers}/${product.supplierId}`);
return { ...product, supplier: supplierResponse.data };
})
);fetchSuppliers() is already called on mount and fetches all suppliers in a single request — supplier data should be joined client-side instead.
Acceptance Criteria
- The admin products page fetches products and suppliers using at most 2 API calls (one for products, one for all suppliers)
-
fetchProductsandfetchSuppliersare coordinated (e.g. viaPromise.all) so supplier join works correctly - Supplier names are joined to products client-side using the already-fetched suppliers list
- Each product row still displays the correct supplier name
- If a supplier is not found, the row still shows
"Unknown"gracefully - No change to visible behavior for the user
Files
frontend/src/components/admin/AdminProducts.tsx
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels