fix: stabilize frontend query cache contracts

src/pages/account-events/ui/AccountEventsPage.tsx

@@ -16,6 +16,7 @@ export function AccountEventsPage() {
 	if (events.isLoading) return <AccountEventsPageLoading />;
 	if (events.isError)
 		return <AccountEventsPageError retry={() => events.refetch()} />;
+	if (!events.data) return <AccountEventsPageLoading />;
 	if (!events.data.events.length) return <AccountEventsPageEmpty />;
 	return <AccountEventsPageLoaded events={events.data.events} />;
 }

src/pages/account-operations/ui/AccountOperationsPage.tsx

@@ -68,6 +68,16 @@ export function AccountOperationsPage() {
 				}
 			/>
 		);
+	if (!operations.data)
+		return (
+			<StateView
+				loading
+				title={t("states.loadingTitle")}
+				text={t("states.loadingText")}
+			/>
+		);
+	const { data } = operations;
+	const nextCursor = data.nextCursor;
 	return (
 		<Stack maw={960} gap="lg">
 			<Title order={1}>{t("ledger.title")}</Title>
@@ -109,8 +119,8 @@ export function AccountOperationsPage() {
 					))}
 				</Group>
 			</Checkbox.Group>
-			{operations.data.items.length ? (
-				operations.data.items.map((operation) => (
+			{data.items.length ? (
+				data.items.map((operation) => (
 					<OperationRow key={operation.id} operation={operation} />
 				))
 			) : (
@@ -119,7 +129,7 @@ export function AccountOperationsPage() {
 					text={t("ledger.emptyText")}
 				/>
 			)}
-			{operations.data.hasNext || cursors.length ? (
+			{data.hasNext || cursors.length ? (
 				<Group justify="space-between">
 					<Button
 						disabled={!cursors.length}
@@ -128,11 +138,10 @@ export function AccountOperationsPage() {
 						{t("ledger.previous")}
 					</Button>
 					<Button
-						disabled={!operations.data.hasNext || !operations.data.nextCursor}
-						onClick={() =>
-							operations.data.nextCursor &&
-							setCursors((value) => [...value, operations.data.nextCursor])
-						}
+						disabled={!data.hasNext || !nextCursor}
+						onClick={() => {
+							if (nextCursor) setCursors((value) => [...value, nextCursor]);
+						}}
 					>
 						{t("ledger.next")}
 					</Button>

src/pages/account/ui/AccountPage.vm.ts

@@ -1,17 +1,18 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { useParams } from "react-router";
-import type { BrokerageAccount } from "@/entities/brokerage-account";
+import {
+	type BrokerageAccount,
+	brokerageAccountsQueryKey,
+} from "@/entities/brokerage-account";
 import { portfolioErrorCode, usePortfolio } from "@/entities/portfolio";
 import { useAuth } from "@/features/auth";
 
-const accountsQueryKey = ["brokerage-accounts"] as const;
-
 export function useAccountPageViewModel() {
 	const { accountId } = useParams();
 	const { accessToken } = useAuth();
 	const portfolio = usePortfolio(accountId, accessToken);
 	const account = useQueryClient()
-		.getQueryData<BrokerageAccount[]>(accountsQueryKey)
+		.getQueryData<BrokerageAccount[]>(brokerageAccountsQueryKey)
 		?.find((item) => item.id === accountId);
 	if (portfolio.isError)
 		return {