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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions