check

src/providers/ReactQueryProvider.tsx

@@ -1,18 +1,59 @@
-"use client";
-
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import React, { ReactNode } from "react";
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-    },
-  },
-});
-
-export function ReactQueryProvider({ children }: { children: ReactNode }) {
-  return (
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-  );
-}
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
+import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
+import React, { ReactNode, useState } from "react";
+
+const ONE_DAY_MS = 24 * 60 * 60 * 1000;
+
+export function ReactQueryProvider({ children }: { children: ReactNode }) {
+  // یک instance واحد برای عمر کامپوننت — نه ماژول‌سطح، چون createSyncStoragePersister
+  // به window.localStorage نیاز داره که توی SSR وجود نداره (باید فقط سمت کلاینت ساخته بشه)
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            refetchOnWindowFocus: false,
+          },
+        },
+      })
+  );
+  const [persister] = useState(() =>
+    typeof window === "undefined"
+      ? null
+      : createSyncStoragePersister({
+          storage: window.localStorage,
+          key: "MODSTAGRAM_QUERY_CACHE",
+          throttleTime: 1000,
+        })
+  );
+
+  // مثل اندروید: کش برای همه‌ی صفحات فعاله (نه فقط یه بخش خاص) تا آفلاین‌شدن یا
+  // رفرش صفحه، محتوای قبلاً دیده‌شده رو خالی نکنه — این تابع پیش‌فرض کتابخونه رو
+  // کاملاً جایگزین می‌کنه (نه AND می‌کنه)، پس چک status رو خودمون انجام می‌دیم
+  // وگرنه کوئری‌های pending/error هم پرسیست می‌شن
+  // سمت سرور (SSR) و اولین رندر سمت کلاینت قبل از mount شدنِ persister — همون
+  // Provider ساده بدون پرسیست، وگرنه هیچ QueryClientProvider ای در دسترس نیست
+  if (!persister) {
+    return (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+  }
+
+  return (
+    <PersistQueryClientProvider
+      client={queryClient}
+      persistOptions={{
+        persister,
+        maxAge: ONE_DAY_MS,
+        dehydrateOptions: {
+          shouldDehydrateQuery: (query) => query.state.status === "success",
+        },
+      }}
+    >
+      {children}
+    </PersistQueryClientProvider>
+  );
+}