fix: Querying data unreliable with custom backend

Author: morgan-wowk

src/components/Home/RunSection/RunSection.tsx

@@ -75,7 +75,7 @@ export const RunSection = ({ onEmptyList }: { onEmptyList?: () => void }) => {
 
   const { data, isLoading, isFetching, error, isFetched } =
     useQuery<ListPipelineJobsResponse>({
-      queryKey: ["runs", backendUrl, pageToken, search.filter],
+      queryKey: ["runs", pageToken, search.filter],
       refetchOnWindowFocus: false,
       enabled: configured && available,
       queryFn: async () => {

src/components/PipelineRun/RunDetails.test.tsx

@@ -65,6 +65,8 @@ describe("<RunDetails/>", () => {
     },
   });
 
+  const MOCK_BACKEND_URL = "http://localhost:8000";
+
   const mockExecutionDetails: GetExecutionInfoResponse = {
     id: "test-execution-id",
     pipeline_run_id: "123",
@@ -158,7 +160,7 @@ describe("<RunDetails/>", () => {
       configured: true,
       available: true,
       ready: true,
-      backendUrl: "http://localhost:8000",
+      backendUrl: MOCK_BACKEND_URL,
       isConfiguredFromEnv: false,
       isConfiguredFromRelativePath: false,
       setEnvConfig: vi.fn(),
@@ -189,6 +191,50 @@ describe("<RunDetails/>", () => {
     });
   };
 
+  describe("Backend Configuration", () => {
+    test("should render run details when backend is configured", async () => {
+      // The default mock has configured: true and backendUrl: MOCK_BACKEND_URL
+      // act
+      renderWithProviders(<RunDetails />);
+
+      // assert
+      await waitFor(() => {
+        expect(screen.getByText("Test Pipeline")).toBeInTheDocument();
+        expect(screen.getByText("Run Id:")).toBeInTheDocument();
+        expect(screen.getByText("123")).toBeInTheDocument();
+      });
+    });
+
+    test("should render run details when backendUrl is empty string", async () => {
+      // arrange - simulate custom backend toggle disabled (empty backendUrl)
+      vi.mocked(useBackend).mockReturnValue({
+        configured: true,
+        available: true,
+        ready: true,
+        backendUrl: "",
+        isConfiguredFromEnv: false,
+        isConfiguredFromRelativePath: true,
+        setEnvConfig: vi.fn(),
+        setRelativePathConfig: vi.fn(),
+        setBackendUrl: vi.fn(),
+        ping: vi.fn(),
+      });
+
+      // Query key no longer includes backendUrl - cache is shared regardless of URL
+      // and invalidated when backend URL changes
+
+      // act
+      renderWithProviders(<RunDetails />);
+
+      // assert
+      await waitFor(() => {
+        expect(screen.getByText("Test Pipeline")).toBeInTheDocument();
+        expect(screen.getByText("Run Id:")).toBeInTheDocument();
+        expect(screen.getByText("123")).toBeInTheDocument();
+      });
+    });
+  });
+
   describe("Inspect Pipeline Button", () => {
     test("should render inspect button when pipeline exists", async () => {
       // arrange

src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOSection.tsx

@@ -8,6 +8,7 @@ import { useBackend } from "@/providers/BackendProvider";
 import { getExecutionArtifacts } from "@/services/executionService";
 import { getBackendStatusString } from "@/utils/backend";
 import type { TaskSpec } from "@/utils/componentSpec";
+import { BACKEND_QUERY_KEY } from "@/utils/constants";
 
 import IOExtras from "./IOExtras";
 import IOInputs from "./IOInputs";
@@ -28,9 +29,9 @@ const IOSection = ({ taskSpec, executionId, readOnly }: IOSectionProps) => {
     isFetching,
     error,
   } = useQuery({
-    queryKey: ["artifacts", executionId],
+    queryKey: [BACKEND_QUERY_KEY, "artifacts", executionId],
     queryFn: () => getExecutionArtifacts(String(executionId), backendUrl),
-    enabled: !!executionId,
+    enabled: !!executionId && !!backendUrl,
   });
 
   if (!configured) {

src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/logs.tsx

@@ -9,6 +9,7 @@ import { Spinner } from "@/components/ui/spinner";
 import { useBackend } from "@/providers/BackendProvider";
 import type { RunStatus } from "@/types/pipelineRun";
 import { getBackendStatusString } from "@/utils/backend";
+import { BACKEND_QUERY_KEY } from "@/utils/constants";
 
 const LogDisplay = ({
   logs,
@@ -114,10 +115,10 @@ const Logs = ({
     log_text?: string;
     system_error_exception_full?: string;
   }>();
-  const { data, isLoading, error, refetch } = useQuery({
-    queryKey: ["logs", executionId],
+  const { data, isLoading, error } = useQuery({
+    queryKey: [BACKEND_QUERY_KEY, "logs", executionId],
     queryFn: () => getLogs(String(executionId), backendUrl),
-    enabled: isLogging,
+    enabled: isLogging && !!backendUrl,
     refetchInterval: 5000,
     refetchIntervalInBackground: false,
   });
@@ -142,10 +143,6 @@ const Logs = ({
     }
   }, [data, error]);
 
-  useEffect(() => {
-    refetch();
-  }, [backendUrl, refetch]);
-
   if (!configured) {
     return (
       <InfoBox title="Backend not configured" variant="warning">

src/hooks/usePipelineRunData.ts

@@ -10,11 +10,12 @@ import {
   getRunStatus,
   isStatusComplete,
 } from "@/services/executionService";
+import { BACKEND_QUERY_KEY } from "@/utils/constants";
 
 const useRootExecutionId = (id: string) => {
   const { backendUrl } = useBackend();
   const { data: rootExecutionId } = useQuery({
-    queryKey: ["pipeline-run-execution-id", id],
+    queryKey: [BACKEND_QUERY_KEY, "pipeline-run-execution-id", id],
     queryFn: async () => {
       const rootExecutionId = await fetchPipelineRun(id, backendUrl)
         .then((res) => res.root_execution_id)
@@ -27,7 +28,7 @@ const useRootExecutionId = (id: string) => {
       // assuming id is root_execution_id
       return id;
     },
-    enabled: !!id && id.length > 0,
+    enabled: !!id && id.length > 0 && !!backendUrl,
     staleTime: Infinity,
   });
 
@@ -41,8 +42,8 @@ export const usePipelineRunData = (id: string) => {
   const rootExecutionId = useRootExecutionId(id);
 
   const { data: executionDetails } = useQuery({
-    enabled: !!rootExecutionId,
-    queryKey: ["execution-details", rootExecutionId],
+    enabled: !!rootExecutionId && !!backendUrl,
+    queryKey: [BACKEND_QUERY_KEY, "execution-details", rootExecutionId],
     queryFn: async () => {
       if (!rootExecutionId) {
         throw new Error("No root execution id found");
@@ -58,8 +59,8 @@ export const usePipelineRunData = (id: string) => {
     error,
     isLoading,
   } = useQuery({
-    enabled: !!rootExecutionId && !!executionDetails,
-    queryKey: ["pipeline-run", rootExecutionId],
+    enabled: !!rootExecutionId && !!executionDetails && !!backendUrl,
+    queryKey: [BACKEND_QUERY_KEY, "pipeline-run", rootExecutionId],
     queryFn: async () => {
       if (!rootExecutionId) {
         throw new Error("No root execution id found");

src/hooks/useSubgraphBreadcrumbs.ts

@@ -4,7 +4,7 @@ import { useMemo } from "react";
 import { useBackend } from "@/providers/BackendProvider";
 import { fetchExecutionDetails } from "@/services/executionService";
 import { isGraphImplementationOutput } from "@/utils/componentSpec";
-import { ONE_MINUTE_IN_MS } from "@/utils/constants";
+import { BACKEND_QUERY_KEY, ONE_MINUTE_IN_MS } from "@/utils/constants";
 
 export interface BreadcrumbSegment {
   taskId: string;
@@ -31,7 +31,12 @@ export const useSubgraphBreadcrumbs = (
   const queryClient = useQueryClient();
 
   const { data, isLoading, error } = useQuery({
-    queryKey: ["subgraph-breadcrumbs", rootExecutionId, subgraphExecutionId],
+    queryKey: [
+      BACKEND_QUERY_KEY,
+      "subgraph-breadcrumbs",
+      rootExecutionId,
+      subgraphExecutionId,
+    ],
     queryFn: async () => {
       if (!rootExecutionId || !subgraphExecutionId) {
         return { segments: [] };
@@ -44,7 +49,7 @@ export const useSubgraphBreadcrumbs = (
       const segmentsInReverseOrder: BreadcrumbSegment[] = [];
       let currentExecutionId = subgraphExecutionId;
       let currentDetails = await queryClient.ensureQueryData({
-        queryKey: ["execution-details", currentExecutionId],
+        queryKey: [BACKEND_QUERY_KEY, "execution-details", currentExecutionId],
         queryFn: () => fetchExecutionDetails(currentExecutionId, backendUrl),
         staleTime: ONE_MINUTE_IN_MS,
       });
@@ -57,7 +62,7 @@ export const useSubgraphBreadcrumbs = (
         }
 
         const parentDetails = await queryClient.ensureQueryData({
-          queryKey: ["execution-details", parentExecutionId],
+          queryKey: [BACKEND_QUERY_KEY, "execution-details", parentExecutionId],
           queryFn: () => fetchExecutionDetails(parentExecutionId, backendUrl),
           staleTime: ONE_MINUTE_IN_MS,
         });
@@ -95,7 +100,8 @@ export const useSubgraphBreadcrumbs = (
     enabled:
       !!rootExecutionId &&
       !!subgraphExecutionId &&
-      rootExecutionId !== subgraphExecutionId,
+      rootExecutionId !== subgraphExecutionId &&
+      !!backendUrl,
     staleTime: ONE_MINUTE_IN_MS,
     retry: 1,
   });