perf(logos): pré-resolver mapeamentos Logo.dev no servidor

Cada EstablishmentLogo dispara um GET para /api/logo/mapping por
nome único (deduplicado pelo React Query, mas ainda N requests por
página). Em /dashboard, /transactions e /payers/[payerId] agora
fazemos uma única query SQL em batch (fetchEstablishmentLogoMap) e
semeamos o cache do React Query antes do primeiro render via novo
LogoPrefetchProvider — eliminando os requests da rede.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-04-25 14:45:54 +00:00
parent 7f05d2a681
commit b453b432ed
8 changed files with 257 additions and 125 deletions

View File

@@ -17,8 +17,10 @@ import {
fetchTransactionFilterSources,
fetchTransactionsPage,
} from "@/features/transactions/queries";
import { LogoPrefetchProvider } from "@/shared/components/entity-avatar";
import MonthNavigation from "@/shared/components/month-picker/month-navigation";
import { getUserId } from "@/shared/lib/auth/server";
import { prefetchLogoMappings } from "@/shared/lib/logo/prefetch-server";
import { parsePeriodParam } from "@/shared/utils/period";
type PageSearchParams = Promise<ResolvedSearchParams>;
@@ -74,38 +76,45 @@ export default async function Page({ searchParams }: PageProps) {
payerRows: filterSources.payerRows,
});
const logoMappings = await prefetchLogoMappings(
userId,
transactionData.map((t) => t.name),
);
return (
<main className="flex flex-col gap-6">
<MonthNavigation />
<TransactionsPage
currentUserId={userId}
transactions={transactionData}
payerOptions={payerOptions}
splitPayerOptions={splitPayerOptions}
defaultPayerId={defaultPayerId}
accountOptions={accountOptions}
cardOptions={cardOptions}
categoryOptions={categoryOptions}
payerFilterOptions={payerFilterOptions}
categoryFilterOptions={categoryFilterOptions}
accountCardFilterOptions={accountCardFilterOptions}
selectedPeriod={selectedPeriod}
estabelecimentos={estabelecimentos}
pagination={{
page: transactionsPage.page,
pageSize: transactionsPage.pageSize,
totalItems: transactionsPage.totalItems,
totalPages: transactionsPage.totalPages,
}}
exportContext={{
source: "transactions",
period: selectedPeriod,
filters: searchFilters,
}}
noteAsColumn={userPreferences?.statementNoteAsColumn ?? false}
columnOrder={userPreferences?.transactionsColumnOrder ?? null}
attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50}
/>
<LogoPrefetchProvider mappings={logoMappings}>
<TransactionsPage
currentUserId={userId}
transactions={transactionData}
payerOptions={payerOptions}
splitPayerOptions={splitPayerOptions}
defaultPayerId={defaultPayerId}
accountOptions={accountOptions}
cardOptions={cardOptions}
categoryOptions={categoryOptions}
payerFilterOptions={payerFilterOptions}
categoryFilterOptions={categoryFilterOptions}
accountCardFilterOptions={accountCardFilterOptions}
selectedPeriod={selectedPeriod}
estabelecimentos={estabelecimentos}
pagination={{
page: transactionsPage.page,
pageSize: transactionsPage.pageSize,
totalItems: transactionsPage.totalItems,
totalPages: transactionsPage.totalPages,
}}
exportContext={{
source: "transactions",
period: selectedPeriod,
filters: searchFilters,
}}
noteAsColumn={userPreferences?.statementNoteAsColumn ?? false}
columnOrder={userPreferences?.transactionsColumnOrder ?? null}
attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50}
/>
</LogoPrefetchProvider>
</main>
);
}