Skip to content

perf: Eliminate N+1 API requests on Admin Products page #13

@yortch

Description

@yortch

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)
  • fetchProducts and fetchSuppliers are coordinated (e.g. via Promise.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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions