fix: preserve cached data during refresh failures

This commit is contained in:
2026-08-24 00:50:39 +03:00
parent 7a3048c347
commit 6d892da9ce
12 changed files with 511 additions and 61 deletions
+54
View File
@@ -34,4 +34,58 @@ describe("AuthProvider", () => {
expect(authorization).toBe("Bearer restored-token");
});
it("settles unauthenticated and clears cached data when cold-start refresh has a transport error", async () => {
server.use(http.post("*/api/v1/auth/refresh", () => HttpResponse.error()));
const queryClient = new QueryClient();
queryClient.setQueryData(["cached-query"], { value: "stale" });
const wrapper = ({ children }: { children: ReactNode }) => (
<QueryClientProvider client={queryClient}>
<AuthProvider>{children}</AuthProvider>
</QueryClientProvider>
);
const { result } = renderHook(() => useAuth(), { wrapper });
await waitFor(() => expect(result.current.ready).toBe(true));
expect(result.current.user).toBeNull();
expect(result.current.accessToken).toBeNull();
expect(queryClient.getQueryData(["cached-query"])).toBeUndefined();
});
it("keeps the original protected 401 when serialized refresh has a transport error", async () => {
let refreshCalls = 0;
server.use(
http.post("*/api/v1/auth/refresh", () => {
refreshCalls += 1;
return refreshCalls === 1
? HttpResponse.json({
accessToken: "restored-token",
user: { id: "user-1", email: "user@example.com" },
})
: HttpResponse.error();
}),
http.get("*/api/v1/brokerage-accounts", () =>
HttpResponse.json({ code: "UNAUTHORIZED" }, { status: 401 }),
),
);
const queryClient = new QueryClient();
queryClient.setQueryData(["cached-query"], { value: "stale" });
const wrapper = ({ children }: { children: ReactNode }) => (
<QueryClientProvider client={queryClient}>
<AuthProvider>{children}</AuthProvider>
</QueryClientProvider>
);
const { result } = renderHook(() => useAuth(), { wrapper });
await waitFor(() =>
expect(result.current.accessToken).toBe("restored-token"),
);
const response = await apiClient.GET("/api/v1/brokerage-accounts");
expect(response.response.status).toBe(401);
await waitFor(() => expect(result.current.user).toBeNull());
expect(result.current.accessToken).toBeNull();
expect(queryClient.getQueryData(["cached-query"])).toBeUndefined();
});
});
+46 -37
View File
@@ -1,5 +1,12 @@
import { useQueryClient } from "@tanstack/react-query";
import { createContext, useContext, useEffect, useRef, useState } from "react";
import {
createContext,
useCallback,
useContext,
useEffect,
useRef,
useState,
} from "react";
import { apiClient, configureAuthClient } from "@/shared/api";
import type { paths } from "@/shared/api/generated/schema";
@@ -41,40 +48,52 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
const [ready, setReady] = useState(false);
const refreshPromise = useRef<Promise<boolean> | null>(null);
const applyAuthentication = useCallback((authentication: Authentication) => {
setUser(authentication.user);
setAccessToken(authentication.accessToken);
accessTokenRef.current = authentication.accessToken;
}, []);
const clearSession = useCallback(() => {
setUser(null);
setAccessToken(null);
accessTokenRef.current = null;
queryClient.clear();
}, [queryClient]);
async function refresh(): Promise<boolean> {
const refresh = useCallback(async (): Promise<boolean> => {
if (refreshPromise.current) return refreshPromise.current;
refreshPromise.current = (async () => {
const run = async () => {
const { data } = await apiClient.POST("/api/v1/auth/refresh");
if (!data) return false;
const authentication = data as Authentication;
setUser(authentication.user);
setAccessToken(authentication.accessToken);
accessTokenRef.current = authentication.accessToken;
return true;
try {
const { data } = await apiClient.POST("/api/v1/auth/refresh");
if (!data) {
clearSession();
return false;
}
applyAuthentication(data as Authentication);
return true;
} catch {
clearSession();
return false;
}
};
return "locks" in navigator
? navigator.locks.request("wealth-ledger-refresh", run)
: run();
try {
return "locks" in navigator
? navigator.locks.request("wealth-ledger-refresh", run)
: run();
} catch {
clearSession();
return false;
}
})().finally(() => {
refreshPromise.current = null;
});
return refreshPromise.current;
}
}, [applyAuthentication, clearSession]);
useEffect(() => {
void apiClient
.POST("/api/v1/auth/refresh")
.then(({ data }) => {
if (!data) return;
const authentication = data as Authentication;
setUser(authentication.user);
setAccessToken(authentication.accessToken);
accessTokenRef.current = authentication.accessToken;
})
.finally(() => setReady(true));
}, []);
void refresh().finally(() => setReady(true));
}, [refresh]);
async function authenticate(
path: "/api/v1/auth/login" | "/api/v1/auth/register",
@@ -82,19 +101,14 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
password: string,
) {
const authentication = await request(path, email, password);
setUser(authentication.user);
setAccessToken(authentication.accessToken);
accessTokenRef.current = authentication.accessToken;
applyAuthentication(authentication);
}
async function logout() {
try {
await apiClient.POST("/api/v1/auth/logout");
} finally {
setUser(null);
setAccessToken(null);
accessTokenRef.current = null;
queryClient.clear();
clearSession();
}
}
@@ -102,12 +116,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
configureAuthClient({
accessToken: () => accessTokenRef.current,
refresh,
clear: () => {
setUser(null);
setAccessToken(null);
accessTokenRef.current = null;
queryClient.clear();
},
clear: clearSession,
});
return () => configureAuthClient(null);
});
+84 -1
View File
@@ -2,17 +2,22 @@ import { MantineProvider } from "@mantine/core";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { cleanup, render, screen, waitFor } from "@testing-library/react";
import { HttpResponse, http } from "msw";
import { MemoryRouter } from "react-router";
import { MemoryRouter, Route, Routes } from "react-router";
import { afterEach, describe, expect, it, vi } from "vitest";
import type { Portfolio } from "@/entities/portfolio";
import { server } from "@/test/server";
import {
AccountPage,
AccountPageEmpty,
AccountPageError,
AccountPageLoaded,
AccountPageLoading,
} from "./AccountPage";
vi.mock("@/features/auth", () => ({
useAuth: () => ({ accessToken: "test-token" }),
}));
function renderPage(ui: React.ReactNode) {
return render(
<QueryClientProvider client={new QueryClient()}>
@@ -23,6 +28,20 @@ function renderPage(ui: React.ReactNode) {
);
}
function renderAccountRoute(queryClient: QueryClient) {
return render(
<QueryClientProvider client={queryClient}>
<MantineProvider>
<MemoryRouter initialEntries={["/accounts/account-1"]}>
<Routes>
<Route path="/accounts/:accountId" element={<AccountPage />} />
</Routes>
</MemoryRouter>
</MantineProvider>
</QueryClientProvider>,
);
}
const portfolio: Portfolio = {
lastSuccessfulAt: "2026-08-13T10:00:00Z",
isStale: true,
@@ -169,4 +188,68 @@ describe("AccountPage states", () => {
);
expect(screen.getByText("Вторая")).toBeInTheDocument();
});
it("keeps the cached portfolio visible with distinct server and refresh warnings", async () => {
let requestCount = 0;
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () => {
requestCount += 1;
if (requestCount === 1) return HttpResponse.json(portfolio);
return HttpResponse.json(
{ code: "TBANK_UNAVAILABLE" },
{ status: 503 },
);
}),
);
const queryClient = new QueryClient();
renderAccountRoute(queryClient);
await screen.findByText("Вторая");
void queryClient.invalidateQueries({
queryKey: ["get", "/api/v1/brokerage-accounts/{accountId}/portfolio"],
});
expect(
await screen.findByText(
"Не удалось обновить портфель. Показан последний полученный снимок.",
),
).toBeInTheDocument();
expect(
screen.getByText(
"T-Bank временно недоступен. Показан последний успешный снимок.",
),
).toBeInTheDocument();
expect(screen.getByText("Вторая")).toBeInTheDocument();
screen.getByRole("button", { name: "Повторить" }).click();
await waitFor(() => expect(requestCount).toBe(3));
});
it("keeps the cached portfolio visible during a background refresh", async () => {
let requestCount = 0;
let resolveRefresh: ((response: Response) => void) | undefined;
server.use(
http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () => {
requestCount += 1;
if (requestCount === 1) return HttpResponse.json(portfolio);
return new Promise<Response>((resolve) => {
resolveRefresh = resolve;
});
}),
);
const queryClient = new QueryClient();
renderAccountRoute(queryClient);
await screen.findByText("Вторая");
void queryClient.invalidateQueries({
queryKey: ["get", "/api/v1/brokerage-accounts/{accountId}/portfolio"],
});
await waitFor(() => expect(requestCount).toBe(2));
expect(screen.getByText("Вторая")).toBeInTheDocument();
expect(
screen.getByRole("status", { name: "Обновляем портфель" }),
).toBeInTheDocument();
resolveRefresh?.(HttpResponse.json(portfolio));
});
});
+6
View File
@@ -16,6 +16,9 @@ export function AccountPage() {
account={viewModel.account}
accountId={viewModel.accountId}
accessToken={viewModel.accessToken}
refreshing={viewModel.refreshing}
refreshError={viewModel.refreshError}
retry={viewModel.retry}
/>
);
return (
@@ -24,6 +27,9 @@ export function AccountPage() {
accountId={viewModel.accountId}
accessToken={viewModel.accessToken}
portfolio={viewModel.portfolio}
refreshing={viewModel.refreshing}
refreshError={viewModel.refreshError}
retry={viewModel.retry}
/>
);
}
+57
View File
@@ -3,6 +3,7 @@ import {
Button,
Card,
Group,
Loader,
Paper,
SimpleGrid,
Stack,
@@ -93,15 +94,26 @@ export function AccountPageEmpty({
account,
accountId,
accessToken = null,
refreshing = false,
refreshError = false,
retry,
}: {
account?: BrokerageAccount;
accountId?: string;
accessToken?: string | null;
refreshing?: boolean;
refreshError?: boolean;
retry?: () => void;
}) {
const { t } = useTranslation();
return (
<Stack>
<AccountHeading account={account} />
<PortfolioRefreshState
refreshing={refreshing}
refreshError={refreshError}
retry={retry}
/>
<StateView
title={t("portfolio.emptyTitle")}
text={t("portfolio.emptyText")}
@@ -116,11 +128,17 @@ export function AccountPageLoaded({
accountId,
accessToken,
portfolio,
refreshing = false,
refreshError = false,
retry,
}: {
account?: BrokerageAccount;
accountId?: string;
accessToken?: string | null;
portfolio: Portfolio;
refreshing?: boolean;
refreshError?: boolean;
retry?: () => void;
}) {
const { t } = useTranslation();
const stocks = portfolio.positions.filter((p) => p.type === "STOCK");
@@ -140,6 +158,11 @@ export function AccountPageLoaded({
return (
<Stack className={classes.page} gap="lg">
<AccountHeading account={account} />
<PortfolioRefreshState
refreshing={refreshing}
refreshError={refreshError}
retry={retry}
/>
{portfolio.isStale ? (
<Alert color="blue">{t("portfolio.staleWarning")}</Alert>
) : null}
@@ -197,6 +220,40 @@ export function AccountPageLoaded({
</Stack>
);
}
function PortfolioRefreshState({
refreshing,
refreshError,
retry,
}: {
refreshing: boolean;
refreshError: boolean;
retry?: () => void;
}) {
const { t } = useTranslation();
if (!refreshing && !refreshError) return null;
return (
<>
{refreshing ? (
<Group gap="xs" role="status" aria-label={t("portfolio.refreshing")}>
<Loader size="sm" />
<Text c="dimmed" size="sm">
{t("portfolio.refreshing")}
</Text>
</Group>
) : null}
{refreshError ? (
<Alert color="orange">
<Stack gap="sm">
<Text>{t("portfolio.refreshError")}</Text>
<Button onClick={retry} variant="light">
{t("accounts.retry")}
</Button>
</Stack>
</Alert>
) : null}
</>
);
}
function RecentOperations({
accountId,
accessToken,
+21 -8
View File
@@ -14,21 +14,34 @@ export function useAccountPageViewModel() {
const account = useQueryClient()
.getQueryData<BrokerageAccount[]>(brokerageAccountsQueryKey)
?.find((item) => item.id === accountId);
if (portfolio.isError)
return {
state: "error" as const,
code: portfolioErrorCode(portfolio.error),
retry: () => portfolio.refetch(),
};
if (portfolio.isFetching || !portfolio.data)
if (!portfolio.data) {
if (portfolio.isError)
return {
state: "error" as const,
code: portfolioErrorCode(portfolio.error),
retry: () => portfolio.refetch(),
};
return { state: "loading" as const };
}
const refresh = {
refreshing: portfolio.isFetching,
refreshError: portfolio.isError,
retry: () => portfolio.refetch(),
};
if (!portfolio.data.positions.length && !portfolio.data.cashBalances.length)
return { state: "empty" as const, account, accountId, accessToken };
return {
state: "empty" as const,
account,
accountId,
accessToken,
...refresh,
};
return {
state: "loaded" as const,
account,
accountId,
accessToken,
portfolio: portfolio.data,
...refresh,
};
}
+125
View File
@@ -0,0 +1,125 @@
import { MantineProvider } from "@mantine/core";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { cleanup, render, screen, waitFor } from "@testing-library/react";
import { HttpResponse, http } from "msw";
import { MemoryRouter } from "react-router";
import { afterEach, describe, expect, it, vi } from "vitest";
import { brokerageAccountsQueryKey } from "@/entities/brokerage-account";
import { server } from "@/test/server";
import { AccountsPage } from "./AccountsPage";
vi.mock("@/features/auth", () => ({
useAuth: () => ({ accessToken: "test-token" }),
}));
const account = {
id: "account-1",
name: "Основной",
type: "BROKERAGE",
openedOn: "2026-01-01",
} as const;
function renderPage(queryClient: QueryClient) {
return render(
<QueryClientProvider client={queryClient}>
<MantineProvider>
<MemoryRouter>
<AccountsPage />
</MemoryRouter>
</MantineProvider>
</QueryClientProvider>,
);
}
describe("AccountsPage", () => {
afterEach(cleanup);
it("keeps the cached account list visible during a background refresh", async () => {
let requestCount = 0;
let resolveRefresh: ((response: Response) => void) | undefined;
server.use(
http.get("*/api/v1/brokerage-accounts", () => {
requestCount += 1;
if (requestCount === 1) return HttpResponse.json([account]);
return new Promise<Response>((resolve) => {
resolveRefresh = resolve;
});
}),
);
const queryClient = new QueryClient();
renderPage(queryClient);
await screen.findByText(account.name);
void queryClient.invalidateQueries({
queryKey: brokerageAccountsQueryKey,
});
await waitFor(() => expect(requestCount).toBe(2));
expect(screen.getByText(account.name)).toBeInTheDocument();
expect(
screen.getByRole("status", { name: "Обновляем данные" }),
).toBeInTheDocument();
resolveRefresh?.(HttpResponse.json([account]));
});
it("keeps the cached account list and offers retry after a refresh error", async () => {
let requestCount = 0;
server.use(
http.get("*/api/v1/brokerage-accounts", () => {
requestCount += 1;
if (requestCount === 1) return HttpResponse.json([account]);
if (requestCount === 2)
return HttpResponse.json(
{ code: "TBANK_UNAVAILABLE" },
{ status: 503 },
);
return HttpResponse.json([account]);
}),
);
const queryClient = new QueryClient();
renderPage(queryClient);
await screen.findByText(account.name);
void queryClient.invalidateQueries({
queryKey: brokerageAccountsQueryKey,
});
const warning = await screen.findByText(
"Не удалось обновить данные. Показаны последние полученные.",
);
expect(warning).toBeInTheDocument();
expect(screen.getByText(account.name)).toBeInTheDocument();
screen.getByRole("button", { name: "Повторить" }).click();
await waitFor(() => expect(requestCount).toBe(3));
});
it("keeps a cached empty account list visible after a refresh error", async () => {
let requestCount = 0;
server.use(
http.get("*/api/v1/brokerage-accounts", () => {
requestCount += 1;
if (requestCount === 1) return HttpResponse.json([]);
return HttpResponse.json(
{ code: "TBANK_UNAVAILABLE" },
{ status: 503 },
);
}),
);
const queryClient = new QueryClient();
renderPage(queryClient);
await screen.findByText("Нет инвестиционных счетов");
void queryClient.invalidateQueries({
queryKey: brokerageAccountsQueryKey,
});
expect(
await screen.findByText(
"Не удалось обновить данные. Показаны последние полученные.",
),
).toBeInTheDocument();
expect(screen.getByText("Нет инвестиционных счетов")).toBeInTheDocument();
});
});
+16 -2
View File
@@ -10,8 +10,22 @@ export function AccountsPage() {
const viewModel = useAccountsPageViewModel();
if (viewModel.state === "loading") return <AccountsPageLoading />;
if (viewModel.state === "error") return <AccountsPageError {...viewModel} />;
if (viewModel.state === "empty") return <AccountsPageEmpty />;
return <AccountsPageLoaded accounts={viewModel.accounts} />;
if (viewModel.state === "empty")
return (
<AccountsPageEmpty
refreshing={viewModel.refreshing}
refreshError={viewModel.refreshError}
retry={viewModel.retry}
/>
);
return (
<AccountsPageLoaded
accounts={viewModel.accounts}
refreshing={viewModel.refreshing}
refreshError={viewModel.refreshError}
retry={viewModel.retry}
/>
);
}
export {
+75 -6
View File
@@ -1,4 +1,12 @@
import { Button, Stack, Title } from "@mantine/core";
import {
Alert,
Button,
Group,
Loader,
Stack,
Text,
Title,
} from "@mantine/core";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";
import type { BrokerageAccount } from "@/entities/brokerage-account";
@@ -71,26 +79,87 @@ export function AccountsPageError({
);
}
export function AccountsPageEmpty() {
export function AccountsPageEmpty({
refreshing = false,
refreshError = false,
retry,
}: {
refreshing?: boolean;
refreshError?: boolean;
retry?: () => void;
}) {
const { t } = useTranslation();
return (
<StateView
title={t("accounts.emptyTitle")}
text={t("accounts.emptyText")}
/>
<Stack>
<AccountsRefreshState
refreshing={refreshing}
refreshError={refreshError}
retry={retry}
/>
<StateView
title={t("accounts.emptyTitle")}
text={t("accounts.emptyText")}
/>
</Stack>
);
}
export function AccountsPageLoaded({
accounts,
refreshing = false,
refreshError = false,
retry,
}: {
accounts: BrokerageAccount[];
refreshing?: boolean;
refreshError?: boolean;
retry?: () => void;
}) {
const { t } = useTranslation();
return (
<Stack>
<Title order={1}>{t("accounts.title")}</Title>
<AccountsRefreshState
refreshing={refreshing}
refreshError={refreshError}
retry={retry}
/>
<BrokerageAccountList accounts={accounts} />
</Stack>
);
}
function AccountsRefreshState({
refreshing,
refreshError,
retry,
}: {
refreshing: boolean;
refreshError: boolean;
retry?: () => void;
}) {
const { t } = useTranslation();
if (!refreshing && !refreshError) return null;
return (
<>
{refreshing ? (
<Group gap="xs" role="status" aria-label={t("accounts.refreshing")}>
<Loader size="sm" />
<Text c="dimmed" size="sm">
{t("accounts.refreshing")}
</Text>
</Group>
) : null}
{refreshError ? (
<Alert color="orange">
<Stack gap="sm">
<Text>{t("accounts.refreshError")}</Text>
<Button onClick={retry} variant="light">
{t("accounts.retry")}
</Button>
</Stack>
</Alert>
) : null}
</>
);
}
+20 -6
View File
@@ -4,13 +4,27 @@ import { useAuth } from "@/features/auth";
export function useAccountsPageViewModel() {
const { accessToken } = useAuth();
const accounts = useBrokerageAccounts(accessToken);
if (accounts.isFetching) return { state: "loading" as const };
if (accounts.isError)
if (!accounts.data) {
if (accounts.isFetching) return { state: "loading" as const };
if (accounts.isError)
return {
state: "error" as const,
code: errorCode(accounts.error),
retry: () => accounts.refetch(),
};
}
if (!accounts.data?.length)
return {
state: "error" as const,
code: errorCode(accounts.error),
state: "empty" as const,
refreshing: accounts.isFetching,
refreshError: accounts.isError,
retry: () => accounts.refetch(),
};
if (!accounts.data?.length) return { state: "empty" as const };
return { state: "loaded" as const, accounts: accounts.data };
return {
state: "loaded" as const,
accounts: accounts.data,
refreshing: accounts.isFetching,
refreshError: accounts.isError,
retry: () => accounts.refetch(),
};
}
+6
View File
@@ -41,6 +41,9 @@ export const ru = {
unavailableTitle: "T-Bank временно недоступен",
unavailableText:
"Попробуйте загрузить счета еще раз или проверьте подключение.",
refreshing: "Обновляем данные",
refreshError:
"Не удалось обновить данные. Показаны последние полученные.",
retry: "Повторить",
types: {
BROKERAGE: "Брокерский счет",
@@ -61,6 +64,9 @@ export const ru = {
back: "К счетам",
staleWarning:
"T-Bank временно недоступен. Показан последний успешный снимок.",
refreshing: "Обновляем портфель",
refreshError:
"Не удалось обновить портфель. Показан последний полученный снимок.",
updatedAt: "Данные получены {{date}}",
positions: "Позиции",
stocks: "Акции",