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

@@ -30,7 +30,7 @@ const IOSection = ({ taskSpec, executionId, readOnly }: IOSectionProps) => {
   } = useQuery({
     queryKey: ["artifacts", executionId],
     queryFn: () => getExecutionArtifacts(String(executionId), backendUrl),
-    enabled: !!executionId,
+    enabled: !!executionId && !!backendUrl,
   });
 
   if (!configured) {

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

@@ -114,10 +114,10 @@ const Logs = ({
     log_text?: string;
     system_error_exception_full?: string;
   }>();
-  const { data, isLoading, error, refetch } = useQuery({
+  const { data, isLoading, error } = useQuery({
     queryKey: ["logs", executionId],
     queryFn: () => getLogs(String(executionId), backendUrl),
-    enabled: isLogging,
+    enabled: isLogging && !!backendUrl,
     refetchInterval: 5000,
     refetchIntervalInBackground: false,
   });
@@ -142,10 +142,6 @@ const Logs = ({
     }
   }, [data, error]);
 
-  useEffect(() => {
-    refetch();
-  }, [backendUrl, refetch]);
-
   if (!configured) {
     return (
       <InfoBox title="Backend not configured" variant="warning">

src/hooks/usePipelineRunData.ts

@@ -27,7 +27,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,7 +41,7 @@ export const usePipelineRunData = (id: string) => {
   const rootExecutionId = useRootExecutionId(id);
 
   const { data: executionDetails } = useQuery({
-    enabled: !!rootExecutionId,
+    enabled: !!rootExecutionId && !!backendUrl,
     queryKey: ["execution-details", rootExecutionId],
     queryFn: async () => {
       if (!rootExecutionId) {
@@ -58,7 +58,7 @@ export const usePipelineRunData = (id: string) => {
     error,
     isLoading,
   } = useQuery({
-    enabled: !!rootExecutionId && !!executionDetails,
+    enabled: !!rootExecutionId && !!executionDetails && !!backendUrl,
     queryKey: ["pipeline-run", rootExecutionId],
     queryFn: async () => {
       if (!rootExecutionId) {

src/hooks/useSubgraphBreadcrumbs.ts

@@ -95,7 +95,8 @@ export const useSubgraphBreadcrumbs = (
     enabled:
       !!rootExecutionId &&
       !!subgraphExecutionId &&
-      rootExecutionId !== subgraphExecutionId,
+      rootExecutionId !== subgraphExecutionId &&
+      !!backendUrl,
     staleTime: ONE_MINUTE_IN_MS,
     retry: 1,
   });

src/providers/BackendProvider.tsx

@@ -1,8 +1,10 @@
+import { useQueryClient } from "@tanstack/react-query";
 import {
   type ReactNode,
   useCallback,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from "react";
 
@@ -45,6 +47,7 @@ const BackendContext =
 
 export const BackendProvider = ({ children }: { children: ReactNode }) => {
   const notify = useToastNotification();
+  const queryClient = useQueryClient();
 
   const backendUrlFromEnv = API_URL;
 
@@ -55,6 +58,9 @@ export const BackendProvider = ({ children }: { children: ReactNode }) => {
   const [settingsLoaded, setSettingsLoaded] = useState(false);
   const [ready, setReady] = useState(false);
 
+  // Track the previous backend URL to detect changes
+  const previousBackendUrlRef = useRef<string | null>(null);
+
   let backendUrl = "";
   if (useEnv && backendUrlFromEnv) {
     backendUrl = backendUrlFromEnv;
@@ -133,6 +139,17 @@ export const BackendProvider = ({ children }: { children: ReactNode }) => {
     }
   }, [backendUrl, settingsLoaded]);
 
+  // Invalidate all queries when the backend URL changes
+  useEffect(() => {
+    if (
+      previousBackendUrlRef.current !== null &&
+      previousBackendUrlRef.current !== backendUrl
+    ) {
+      queryClient.invalidateQueries();
+    }
+    previousBackendUrlRef.current = backendUrl;
+  }, [backendUrl, queryClient]);
+
   useEffect(() => {
     const getSettings = async () => {
       const url = await getUserBackendUrl();

src/services/executionService.ts

@@ -50,7 +50,7 @@ export const useFetchPipelineRunMetadata = (runId: string | undefined) => {
   return useQuery<PipelineRunResponse>({
     queryKey: ["pipeline-run-metadata", runId],
     queryFn: () => fetchPipelineRun(runId!, backendUrl),
-    enabled: !!runId,
+    enabled: !!runId && !!backendUrl,
     refetchOnWindowFocus: false,
     staleTime: TWENTY_FOUR_HOURS_IN_MS,
   });
@@ -71,7 +71,7 @@ export const useFetchContainerExecutionState = (
   return useQuery<GetContainerExecutionStateResponse>({
     queryKey: ["container-execution-state", executionId],
     queryFn: () => fetchContainerExecutionState(executionId!, backendUrl),
-    enabled: !!executionId,
+    enabled: !!executionId && !!backendUrl,
     refetchOnWindowFocus: false,
   });
 };