fix: stabilize frontend query cache contracts

src/features/tbank-connection/ui/TbankConnectionSection.test.tsx

@@ -0,0 +1,99 @@
+import { MantineProvider } from "@mantine/core";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+	cleanup,
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+} from "@testing-library/react";
+import { HttpResponse, http } from "msw";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { apiQueryClient } from "@/shared/api";
+import { server } from "@/test/server";
+import { TbankConnectionSection } from "./TbankConnectionSection";
+
+vi.mock("@/features/auth", () => ({
+	useAuth: () => ({ accessToken: "test-token" }),
+}));
+
+afterEach(cleanup);
+
+const brokerageAccountsQueryKey = apiQueryClient.queryOptions(
+	"get",
+	"/api/v1/brokerage-accounts",
+).queryKey;
+
+function renderSection(client: QueryClient) {
+	return render(
+		<MantineProvider>
+			<QueryClientProvider client={client}>
+				<TbankConnectionSection />
+			</QueryClientProvider>
+		</MantineProvider>,
+	);
+}
+
+function seededClient() {
+	const client = new QueryClient({
+		defaultOptions: { queries: { retry: false } },
+	});
+	client.setQueryData(brokerageAccountsQueryKey, [
+		{
+			id: "account-1",
+			name: "Основной счет",
+			type: "BROKERAGE",
+			openedOn: null,
+		},
+	]);
+	return client;
+}
+
+describe("TbankConnectionSection", () => {
+	it("updates the generated status cache and invalidates accounts after connecting", async () => {
+		const client = seededClient();
+		renderSection(client);
+
+		await screen.findByText("Не подключено");
+		fireEvent.change(screen.getByLabelText("Token T-Bank"), {
+			target: { value: "replacement-token" },
+		});
+		fireEvent.click(screen.getByRole("button", { name: "Подключить" }));
+
+		await waitFor(() =>
+			expect(
+				screen.getByRole("button", { name: "Заменить token" }),
+			).toBeInTheDocument(),
+		);
+		expect(client.getQueryState(brokerageAccountsQueryKey)?.isInvalidated).toBe(
+			true,
+		);
+	});
+
+	it("updates the generated status cache and invalidates accounts after deleting", async () => {
+		server.use(
+			http.get("*/api/v1/tbank-connection", () =>
+				HttpResponse.json({
+					connected: true,
+					connectedAt: "2026-08-14T00:00:00Z",
+				}),
+			),
+		);
+		const client = seededClient();
+		renderSection(client);
+
+		fireEvent.click(
+			await screen.findByRole("button", { name: "Удалить подключение" }),
+		);
+		fireEvent.click(await screen.findByRole("button", { name: /^Удалить$/ }));
+
+		await waitFor(() =>
+			expect(
+				screen.getByRole("button", { name: "Подключить" }),
+			).toBeInTheDocument(),
+		);
+		expect(client.getQueryState(brokerageAccountsQueryKey)?.isInvalidated).toBe(
+			true,
+		);
+	});
+});

src/features/tbank-connection/ui/TbankConnectionSection.tsx

@@ -17,7 +17,10 @@ import {
 	TbankConnectionError,
 	TbankConnectionLoading,
 } from "./TbankConnectionSection.view";
-import { useTbankConnectionViewModel } from "./TbankConnectionSection.vm";
+import {
+	tbankConnectionQueryKey,
+	useTbankConnectionViewModel,
+} from "./TbankConnectionSection.vm";
 
 type Status =
 	paths["/api/v1/tbank-connection"]["get"]["responses"][200]["content"]["application/json"];
@@ -49,18 +52,18 @@ function TbankConnectionSectionLoaded({ status }: { status: Status }) {
 	} = useForm<{ token: string }>();
 	const update = apiQueryClient.useMutation("put", "/api/v1/tbank-connection", {
 		onSuccess: (data) => {
-			queryClient.setQueryData(["tbank-connection"], data);
+			queryClient.setQueryData(tbankConnectionQueryKey, data);
 			queryClient.invalidateQueries({ queryKey: brokerageAccountsQueryKey });
 			reset();
 		},
-		onError: (error) => setRequestError(errorCode(error)),
+		onError: (error) => setRequestError(errorCode(error) ?? "REQUEST_ERROR"),
 	});
 	const remove = apiQueryClient.useMutation(
 		"delete",
 		"/api/v1/tbank-connection",
 		{
 			onSuccess: () => {
-				queryClient.setQueryData<Status>(["tbank-connection"], {
+				queryClient.setQueryData<Status>(tbankConnectionQueryKey, {
 					connected: false,
 					connectedAt: null,
 				});

src/features/tbank-connection/ui/TbankConnectionSection.vm.ts

@@ -2,12 +2,16 @@ import { useQuery } from "@tanstack/react-query";
 import { useAuth } from "@/features/auth";
 import { apiQueryClient } from "@/shared/api";
 
+const tbankConnectionQueryOptions = () =>
+	apiQueryClient.queryOptions("get", "/api/v1/tbank-connection");
+
+export const tbankConnectionQueryKey = tbankConnectionQueryOptions().queryKey;
+
 export function useTbankConnectionViewModel() {
 	const { accessToken } = useAuth();
 	const status = useQuery({
-		queryKey: ["tbank-connection"],
+		...tbankConnectionQueryOptions(),
 		enabled: Boolean(accessToken),
-		...apiQueryClient.queryOptions("get", "/api/v1/tbank-connection"),
 	});
 	if (status.isPending) return { state: "loading" as const };
 	if (status.isError)