milestone 16: behavioral fixes for silent failures, locks, counters and the query log

web/src/lib/queries.ts

@@ -1,4 +1,4 @@
-import { queryOptions, type QueryClient } from "@tanstack/react-query";
+import { infiniteQueryOptions, keepPreviousData, queryOptions, type QueryClient } from "@tanstack/react-query";
 import * as api from "@/lib/api";
 import type {
 	BlocklistInput,
@@ -10,6 +10,7 @@ import type {
 	PausePost,
 	Period,
 	QueriesFilter,
+	QueriesPage,
 	RuleInput,
 	SettingsPatch,
 	UpstreamInput,
@@ -20,7 +21,7 @@ export const queryKeys = {
 	version: ["version"] as const,
 	stats: (period: Period) => ["stats", period] as const,
 	timeseries: (period: Period) => ["stats", "timeseries", period] as const,
-	queries: (filter: QueriesFilter) => ["queries", filter] as const,
+	queriesInfinite: (filter: QueriesFilter) => ["queries", "infinite", filter] as const,
 	upstreamHealth: ["upstream-health"] as const,
 	lookup: (domain: string, groupId?: number) => ["lookup", domain, groupId ?? null] as const,
 	groups: ["groups"] as const,
@@ -54,8 +55,18 @@ export const timeseriesQuery = (period: Period = "24h") =>
 		refetchInterval: 30_000,
 	});
 
-export const queriesQuery = (filter: QueriesFilter = {}) =>
-	queryOptions({ queryKey: queryKeys.queries(filter), queryFn: () => api.getQueries(filter) });
+// Keyset pagination on `next_before` (handlers/queries.zig). A background
+// refetch replays every page in cursor order, so newly logged rows shift the
+// whole window instead of opening a gap between page 1 and page 2.
+export const queriesInfiniteQuery = (filter: QueriesFilter = {}) =>
+	infiniteQueryOptions({
+		queryKey: queryKeys.queriesInfinite(filter),
+		queryFn: ({ pageParam }: { pageParam: number | undefined }) =>
+			api.getQueries(pageParam === undefined ? filter : { ...filter, before: pageParam }),
+		initialPageParam: undefined as number | undefined,
+		getNextPageParam: (last: QueriesPage) => last.next_before ?? undefined,
+		placeholderData: keepPreviousData,
+	});
 
 export const upstreamHealthQuery = () =>
 	queryOptions({ queryKey: queryKeys.upstreamHealth, queryFn: api.getUpstreamHealth, refetchInterval: 30_000 });