Change use{Suspense}APIQuery key to an array

Signed-off-by: Julius Volz <julius.volz@gmail.com>

web/ui/mantine-ui/src/api/api.ts

@@ -1,4 +1,4 @@
-import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
+import { QueryKey, useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { useSettings } from "../state/settingsSlice";
 
 export const API_PATH = "api/v1";
@@ -89,7 +89,7 @@ const createQueryFn =
   };
 
 type QueryOptions = {
-  key?: string;
+  key?: QueryKey;
   path: string;
   params?: Record<string, string>;
   enabled?: boolean;
@@ -106,7 +106,7 @@ export const useAPIQuery = <T>({
   const { pathPrefix } = useSettings();
 
   return useQuery<SuccessAPIResponse<T>>({
-    queryKey: key ? [key] : [path, params],
+    queryKey: key !== undefined ? key : [path, params],
     retry: false,
     refetchOnWindowFocus: false,
     gcTime: 0,
@@ -119,7 +119,7 @@ export const useSuspenseAPIQuery = <T>({ key, path, params }: QueryOptions) => {
   const { pathPrefix } = useSettings();
 
   return useSuspenseQuery<SuccessAPIResponse<T>>({
-    queryKey: key ? [key] : [path, params],
+    queryKey: key !== undefined ? key : [path, params],
     retry: false,
     refetchOnWindowFocus: false,
     gcTime: 0,

web/ui/mantine-ui/src/components/ReadinessWrapper.tsx

@@ -15,7 +15,7 @@ const ReadinessLoader: FC = () => {
 
   // Query readiness status.
   const { data: ready } = useSuspenseQuery<boolean>({
-    queryKey: [`ready-${queryKey}`],
+    queryKey: ["ready", queryKey],
     retry: false,
     refetchOnWindowFocus: false,
     gcTime: 0,
@@ -46,8 +46,8 @@ const ReadinessLoader: FC = () => {
       data: { min, max, current },
     },
   } = useSuspenseAPIQuery<WALReplayStatus>({
-    path: `/status/walreplay`,
+    path: "/status/walreplay",
-    key: `walreplay-${queryKey}`,
+    key: ["walreplay", queryKey],
   });
 
   useEffect(() => {

web/ui/mantine-ui/src/pages/query/ExpressionInput.tsx

@@ -144,7 +144,7 @@ const ExpressionInput: FC<ExpressionInputProps> = ({
     isFetching: isFormatting,
     refetch: formatQuery,
   } = useAPIQuery<string>({
-    key: expr,
+    key: [expr],
     path: "/format_query",
     params: {
       query: expr,

web/ui/mantine-ui/src/pages/query/Graph.tsx

@@ -44,7 +44,7 @@ const Graph: FC<GraphProps> = ({
 
   const { data, error, isFetching, isLoading, refetch } =
     useAPIQuery<RangeQueryResult>({
-      key: useId(),
+      key: [useId()],
       path: "/query_range",
       params: {
         query: expr,

web/ui/mantine-ui/src/pages/query/TableTab.tsx

@@ -28,7 +28,7 @@ const TableTab: FC<TableTabProps> = ({ panelIdx, retriggerIdx }) => {
   const { endTime, range } = visualizer;
 
   const { data, error, isFetching, refetch } = useAPIQuery<InstantQueryResult>({
-    key: useId(),
+    key: [useId()],
     path: "/query",
     params: {
       query: expr,