[Experiment] Chart fetching strategies

Author: MananTank

apps/dashboard/package.json

@@ -49,6 +49,7 @@
     "@sentry/nextjs": "8.45.1",
     "@shazow/whatsabi": "^0.18.0",
     "@tanstack/react-query": "5.62.16",
+    "@tanstack/react-query-persist-client": "^5.64.2",
     "@tanstack/react-table": "^8.20.6",
     "@thirdweb-dev/service-utils": "workspace:*",
     "@vercel/functions": "^1.5.2",
@@ -64,6 +65,7 @@
     "flat": "^6.0.1",
     "framer-motion": "11.15.0",
     "fuse.js": "7.0.0",
+    "idb-keyval": "^6.2.1",
     "input-otp": "^1.4.1",
     "ioredis": "^5.4.1",
     "ipaddr.js": "^2.2.0",

apps/dashboard/src/app/team/[team_slug]/(team)/layout.tsx

@@ -87,6 +87,10 @@ export default async function TeamLayout(props: {
               path: `/team/${params.team_slug}/~/settings`,
               name: "Settings",
             },
+            {
+              path: `/team/${params.team_slug}/~/test`,
+              name: "Test",
+            },
           ]}
         />
       </div>

apps/dashboard/src/app/team/[team_slug]/(team)/~/test/_common/ChartUI.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { ThirdwebBarChart } from "@/components/blocks/charts/bar-chart";
+
+export function ChartUI(props: {
+  data: Array<{ time: Date; count: number }>;
+  title: string;
+  isPending: boolean;
+}) {
+  return (
+    <ThirdwebBarChart
+      title={props.title}
+      data={props.data}
+      config={{
+        count: {
+          label: "Foo",
+          color: "hsl(var(--chart-1))",
+        },
+      }}
+      chartClassName="aspect-[1.5] lg:aspect-[4.5]"
+      isPending={props.isPending}
+    />
+  );
+}

apps/dashboard/src/app/team/[team_slug]/(team)/~/test/_common/date.ts

@@ -0,0 +1,5 @@
+export function ignoreTime(date: Date) {
+  const newDate = new Date(date);
+  newDate.setHours(0, 0, 0, 0);
+  return newDate;
+}

apps/dashboard/src/app/team/[team_slug]/(team)/~/test/_common/delays.ts

@@ -0,0 +1,9 @@
+// This adds a key difference from the client side version -
+// client side version can skip this entirely on subsequent date range changes
+export async function simulatePageProcessingDelay() {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+}
+
+export async function simulateChartFetchingDelay() {
+  await new Promise((resolve) => setTimeout(resolve, 2000));
+}

apps/dashboard/src/app/team/[team_slug]/(team)/~/test/_common/fetchTestData.ts

@@ -0,0 +1,21 @@
+import { addDays, differenceInCalendarDays } from "date-fns";
+import { simulateChartFetchingDelay } from "./delays";
+
+export async function fetchTestData(params: {
+  from: Date;
+  to: Date;
+}) {
+  await simulateChartFetchingDelay();
+
+  const days = differenceInCalendarDays(params.to, params.from);
+
+  const data: Array<{ time: Date; count: number }> = [];
+  for (let i = 0; i < days; i++) {
+    data.push({
+      time: addDays(params.from, i),
+      count: Math.floor(Math.random() * 1000),
+    });
+  }
+
+  return data;
+}

apps/dashboard/src/app/team/[team_slug]/(team)/~/test/_common/pageProcessing.ts

@@ -0,0 +1,29 @@
+import { getLastNDaysRange } from "../../../../../../../components/analytics/date-range-selector";
+import type { Range } from "../../../../../../../components/analytics/date-range-selector";
+import { ignoreTime } from "./date";
+import { simulatePageProcessingDelay } from "./delays";
+
+export async function pageProcessing(props: {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  const searchParams = await props.searchParams;
+  const fromStr = searchParams.from;
+  const toStr = searchParams.to;
+  await simulatePageProcessingDelay();
+
+  const defaultRange = getLastNDaysRange("last-120");
+  const range: Range =
+    fromStr && toStr && typeof fromStr === "string" && typeof toStr === "string"
+      ? {
+          from: ignoreTime(new Date(fromStr)),
+          to: ignoreTime(new Date(toStr)),
+          type: "custom",
+        }
+      : {
+          from: ignoreTime(defaultRange.from),
+          to: ignoreTime(defaultRange.to),
+          type: defaultRange.type,
+        };
+
+  return range;
+}

apps/dashboard/src/app/team/[team_slug]/(team)/~/test/client-persist/idb-persister.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { QueryClient } from "@tanstack/react-query";
+import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
+import type {
+  PersistedClient,
+  Persister,
+} from "@tanstack/react-query-persist-client";
+import { del, get, set } from "idb-keyval";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      // 1 hour
+      gcTime: 3600 * 1000,
+    },
+  },
+});
+
+/**
+ * Creates an Indexed DB persister
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
+ */
+export function createIDBPersister(idbValidKey: IDBValidKey = "reactQuery") {
+  return {
+    persistClient: async (client: PersistedClient) => {
+      await set(idbValidKey, client);
+    },
+    restoreClient: async () => {
+      return await get<PersistedClient>(idbValidKey);
+    },
+    removeClient: async () => {
+      await del(idbValidKey);
+    },
+  } satisfies Persister;
+}
+
+export const idbPersister = createIDBPersister();
+
+export function IdbPersistProvider(props: {
+  children?: React.ReactNode;
+}) {
+  return (
+    <PersistQueryClientProvider
+      client={queryClient}
+      persistOptions={{ persister: idbPersister }}
+    >
+      {props.children}
+    </PersistQueryClientProvider>
+  );
+}

apps/dashboard/src/app/team/[team_slug]/(team)/~/test/client-persist/page.tsx

@@ -0,0 +1,15 @@
+import { pageProcessing } from "../_common/pageProcessing";
+import { ClientPage } from "../client/client-page";
+import { IdbPersistProvider } from "./idb-persister";
+
+export default async function Page(props: {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  const range = await pageProcessing(props);
+
+  return (
+    <IdbPersistProvider>
+      <ClientPage range={range} />
+    </IdbPersistProvider>
+  );
+}

apps/dashboard/src/app/team/[team_slug]/(team)/~/test/client/client-page.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import {
+  DateRangeSelector,
+  type Range,
+} from "../../../../../../../components/analytics/date-range-selector";
+import { ChartUI } from "../_common/ChartUI";
+import { fetchTestData } from "../_common/fetchTestData";
+
+export function ClientPage(props: {
+  range: Range;
+}) {
+  const [range, setRange] = useState<Range>(props.range);
+  const chartDataQuery = useQuery({
+    queryKey: [
+      "fetchTestDate",
+      {
+        from: range.from.toISOString(),
+        to: range.to.toISOString(),
+      },
+    ],
+    queryFn: async () => {
+      return fetchTestData(range);
+    },
+    staleTime: 500 * 1000,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+  });
+
+  console.log("ClientPage", {
+    from: range.from.toISOString(),
+    to: range.to.toISOString(),
+  });
+
+  return (
+    <div>
+      <DateRangeSelector
+        range={range}
+        setRange={(v) => {
+          setRange(v);
+          // update search params without reloading the page
+          window.history.pushState(
+            {},
+            "",
+            `?from=${v.from.toISOString()}&to=${v.to.toISOString()}`,
+          );
+        }}
+      />
+      <div className="h-8" />
+      <ChartUI
+        data={chartDataQuery.data || []}
+        isPending={chartDataQuery.isPending}
+        title="Client Component"
+      />
+    </div>
+  );
+}