Add RTK queries unsubscribe in loaders

pkirilin · Oct 14, 2024 · ba99e9a · ba99e9a
1 parent 47de86d
commit ba99e9a
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 33 deletions.
diff --git a/src/frontend/src/app/routing/AuthenticatedLayout.tsx b/src/frontend/src/app/routing/AuthenticatedLayout.tsx
@@ -18,17 +18,23 @@ import { ErrorPage } from './ErrorPage';
 import { useNavigationProgress } from './useNavigationProgress';
 
 export const loader: LoaderFunction = async ({ request }) => {
-  const authStatusQuery = await store.dispatch(
+  const authStatusQueryPromise = store.dispatch(
     authApi.endpoints.getStatus.initiate({}, { forceRefetch: true }),
   );
 
-  if (!authStatusQuery.data?.isAuthenticated) {
-    const returnUrl = new URL(request.url).searchParams.get('returnUrl') ?? '/';
-    const loginUrl = createUrl('/login', { returnUrl });
-    return redirect(loginUrl);
-  }
+  try {
+    const authStatusQuery = await authStatusQueryPromise;
+
+    if (!authStatusQuery.data?.isAuthenticated) {
+      const returnUrl = new URL(request.url).searchParams.get('returnUrl') ?? '/';
+      const loginUrl = createUrl('/login', { returnUrl });
+      return redirect(loginUrl);
+    }
 
-  return ok();
+    return ok();
+  } finally {
+    authStatusQueryPromise.unsubscribe();
+  }
 };
 
 export const shouldRevalidate: ShouldRevalidateFunction = () => true;

diff --git a/src/frontend/src/pages/ui/CategoriesPage.tsx b/src/frontend/src/pages/ui/CategoriesPage.tsx
@@ -6,8 +6,14 @@ import { Categories } from '@/features/categories';
 import { ok } from '../lib';
 
 export const loader: LoaderFunction = async () => {
-  await store.dispatch(categoryApi.endpoints.getCategories.initiate({}));
-  return ok();
+  const categoriesQueryPromise = store.dispatch(categoryApi.endpoints.getCategories.initiate({}));
+
+  try {
+    await categoriesQueryPromise;
+    return ok();
+  } finally {
+    categoriesQueryPromise.unsubscribe();
+  }
 };
 
 export const Component: FC = () => <Categories />;
diff --git a/src/frontend/src/pages/ui/HistoryPage.tsx b/src/frontend/src/pages/ui/HistoryPage.tsx
@@ -23,20 +23,26 @@ export const loader: LoaderFunction = async ({ request }) => {
   const year = url.searchParams.get('year') ?? getFallbackYear();
   const date = new Date(+year, +month - 1);
 
-  const notesHistoryQuery = await store.dispatch(
+  const notesHistoryQueryPromise = store.dispatch(
     noteApi.endpoints.notesHistory.initiate({
       from: dateLib.formatToISOStringWithoutTime(date),
       to: getEndOfMonth(date),
     }),
   );
 
-  return {
-    notes: notesHistoryQuery.data?.notesHistory ?? [],
-    navigation: {
-      title: 'History',
-      action: <FilterNotesHistory date={date} />,
-    },
-  } satisfies LoaderData;
+  try {
+    const notesHistoryQuery = await notesHistoryQueryPromise;
+
+    return {
+      notes: notesHistoryQuery.data?.notesHistory ?? [],
+      navigation: {
+        title: 'History',
+        action: <FilterNotesHistory date={date} />,
+      },
+    } satisfies LoaderData;
+  } finally {
+    notesHistoryQueryPromise.unsubscribe();
+  }
 };
 
 export const Component: FC = () => {

diff --git a/src/frontend/src/pages/ui/IndexPage.tsx b/src/frontend/src/pages/ui/IndexPage.tsx
@@ -18,15 +18,21 @@ const getFallbackDate = (): string =>
 export const loader: LoaderFunction = async ({ request }) => {
   const url = new URL(request.url);
   const date = url.searchParams.get('date') ?? getFallbackDate();
-  await store.dispatch(noteApi.endpoints.notes.initiate({ date }));
+  const notesQueryPromise = store.dispatch(noteApi.endpoints.notes.initiate({ date }));
 
-  return {
-    date,
-    navigation: {
-      title: <SelectDate currentDate={new Date(date)} />,
-      action: <MealsListTotalCalories date={date} />,
-    },
-  } satisfies LoaderData;
+  try {
+    await notesQueryPromise;
+
+    return {
+      date,
+      navigation: {
+        title: <SelectDate currentDate={new Date(date)} />,
+        action: <MealsListTotalCalories date={date} />,
+      },
+    } satisfies LoaderData;
+  } finally {
+    notesQueryPromise.unsubscribe();
+  }
 };
 
 export const Component: FC = () => {

diff --git a/src/frontend/src/pages/ui/LoginPage.tsx b/src/frontend/src/pages/ui/LoginPage.tsx
@@ -15,15 +15,21 @@ import { AppName, Center } from '@/shared/ui';
 import { ok } from '../lib';
 
 export const loader: LoaderFunction = async () => {
-  const getAuthStatusQuery = await store.dispatch(
+  const authStatusQueryPromise = store.dispatch(
     authApi.endpoints.getStatus.initiate({}, { forceRefetch: true }),
   );
 
-  if (getAuthStatusQuery.data?.isAuthenticated) {
-    return redirect('/');
-  }
+  try {
+    const authStatusQuery = await authStatusQueryPromise;
+
+    if (authStatusQuery.data?.isAuthenticated) {
+      return redirect('/');
+    }
 
-  return ok();
+    return ok();
+  } finally {
+    authStatusQueryPromise.unsubscribe();
+  }
 };
 
 export const action: ActionFunction = async ({ request }) => {

diff --git a/src/frontend/src/pages/ui/ProductsPage.tsx b/src/frontend/src/pages/ui/ProductsPage.tsx
@@ -6,9 +6,15 @@ import { Products } from '@/features/products';
 import { ok } from '../lib';
 
 export const loader: LoaderFunction = async () => {
-  const getProductsRequest = productLib.mapToGetProductsRequest(store.getState().products.filter);
-  await store.dispatch(productApi.endpoints.getProducts.initiate(getProductsRequest));
-  return ok();
+  const request = productLib.mapToGetProductsRequest(store.getState().products.filter);
+  const productsQueryPromise = store.dispatch(productApi.endpoints.getProducts.initiate(request));
+
+  try {
+    await productsQueryPromise;
+    return ok();
+  } finally {
+    productsQueryPromise.unsubscribe();
+  }
 };
 
 export const Component: FC = () => <Products />;