refactor: RQ hook for ratelimits logs

apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/controls/components/logs-refresh.tsx

@@ -2,6 +2,7 @@ import { RefreshButton } from "@/components/logs/refresh-button";
 import { trpc } from "@/lib/trpc/client";
 import { useRatelimitLogsContext } from "../../../context/logs";
 import { useFilters } from "../../../hooks/use-filters";
+import { refreshQueryTimestamp } from "../../table/hooks/utils";
 
 export const LogsRefresh = () => {
   const { toggleLive, isLive } = useRatelimitLogsContext();
@@ -10,6 +11,7 @@ export const LogsRefresh = () => {
   const hasRelativeFilter = filters.find((f) => f.field === "since");
 
   const handleRefresh = () => {
+    refreshQueryTimestamp();
     ratelimit.logs.query.invalidate();
     ratelimit.logs.queryRatelimitTimeseries.invalidate();
   };

apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/hooks/use-logs-query.ts

@@ -4,6 +4,7 @@ import type { RatelimitLog } from "@unkey/clickhouse/src/ratelimits";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useFilters } from "../../../hooks/use-filters";
 import type { RatelimitQueryLogsPayload } from "../query-logs.schema";
+import { useQueryTimestamp } from "./utils";
 
 type UseLogsQueryParams = {
   limit?: number;
@@ -23,6 +24,8 @@ export function useRatelimitLogsQuery({
   const [realtimeLogsMap, setRealtimeLogsMap] = useState(() => new Map<string, RatelimitLog>());
   const [totalCount, setTotalCount] = useState(0);
 
+  const timestamp = useQueryTimestamp();
+
   const { filters } = useFilters();
   const queryClient = trpc.useUtils();
 
@@ -32,13 +35,11 @@ export function useRatelimitLogsQuery({
 
   const historicalLogs = useMemo(() => Array.from(historicalLogsMap.values()), [historicalLogsMap]);
 
-  //Required for preventing double trpc call during initial render
-  const dateNow = useMemo(() => Date.now(), []);
   const queryParams = useMemo(() => {
     const params: RatelimitQueryLogsPayload = {
       limit,
-      startTime: dateNow - HISTORICAL_DATA_WINDOW,
-      endTime: dateNow,
+      startTime: timestamp - HISTORICAL_DATA_WINDOW,
+      endTime: timestamp,
       requestIds: { filters: [] },
       identifiers: { filters: [] },
       status: { filters: [] },
@@ -105,7 +106,7 @@ export function useRatelimitLogsQuery({
     });
 
     return params;
-  }, [filters, limit, dateNow, namespaceId]);
+  }, [filters, limit, namespaceId, timestamp]);
 
   // Main query for historical data
   const {

apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/hooks/utils.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+
+let QUERY_TIMESTAMP = Date.now();
+let subscribers: ((timestamp: number) => void)[] = [];
+
+export const getQueryTimestamp = () => QUERY_TIMESTAMP;
+
+export const refreshQueryTimestamp = () => {
+  QUERY_TIMESTAMP = Date.now();
+  subscribers.forEach((callback) => callback(QUERY_TIMESTAMP));
+  return QUERY_TIMESTAMP;
+};
+
+export const useQueryTimestamp = () => {
+  const [timestamp, setTimestamp] = useState(QUERY_TIMESTAMP);
+
+  useEffect(() => {
+    const callback = (newTimestamp: number) => setTimestamp(newTimestamp);
+    subscribers.push(callback);
+
+    return () => {
+      subscribers = subscribers.filter((cb) => cb !== callback);
+    };
+  }, []);
+
+  return timestamp;
+};