fix: Querying data unreliable with custom backend

Author: morgan-wowk

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",
@@ -136,7 +138,10 @@ describe("<RunDetails/>", () => {
       error: null,
     });
 
-    queryClient.setQueryData(["pipeline-run-metadata", "123"], mockPipelineRun);
+    queryClient.setQueryData(
+      ["pipeline-run-metadata", "123", MOCK_BACKEND_URL],
+      mockPipelineRun,
+    );
 
     vi.mocked(executionService.countTaskStatuses).mockReturnValue({
       total: 2,
@@ -158,7 +163,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 +194,55 @@ 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.queryByText("Backend not configured"),
+        ).not.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(),
+      });
+
+      // Set query data with empty backendUrl to match the query key
+      queryClient.setQueryData(
+        ["pipeline-run-metadata", "123", ""],
+        mockPipelineRun,
+      );
+
+      // act
+      renderWithProviders(<RunDetails />);
+
+      // assert
+      await waitFor(() => {
+        expect(screen.getByText("Test Pipeline")).toBeInTheDocument();
+        expect(
+          screen.queryByText("Backend not configured"),
+        ).not.toBeInTheDocument();
+      });
+    });
+  });
+
   describe("Inspect Pipeline Button", () => {
     test("should render inspect button when pipeline exists", async () => {
       // arrange
@@ -278,7 +332,7 @@ describe("<RunDetails/>", () => {
       };
 
       queryClient.setQueryData(
-        ["pipeline-run-metadata", "123"],
+        ["pipeline-run-metadata", "123", MOCK_BACKEND_URL],
         pipelineRunWithDifferentCreator,
       );
 

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

@@ -28,9 +28,9 @@ const IOSection = ({ taskSpec, executionId, readOnly }: IOSectionProps) => {
     isFetching,
     error,
   } = useQuery({
-    queryKey: ["artifacts", executionId],
+    queryKey: ["artifacts", executionId, backendUrl],
     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({
-    queryKey: ["logs", executionId],
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["logs", executionId, backendUrl],
     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

@@ -14,7 +14,7 @@ import {
 const useRootExecutionId = (id: string) => {
   const { backendUrl } = useBackend();
   const { data: rootExecutionId } = useQuery({
-    queryKey: ["pipeline-run-execution-id", id],
+    queryKey: ["pipeline-run-execution-id", id, backendUrl],
     queryFn: async () => {
       const rootExecutionId = await fetchPipelineRun(id, backendUrl)
         .then((res) => res.root_execution_id)
@@ -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,8 +41,8 @@ export const usePipelineRunData = (id: string) => {
   const rootExecutionId = useRootExecutionId(id);
 
   const { data: executionDetails } = useQuery({
-    enabled: !!rootExecutionId,
-    queryKey: ["execution-details", rootExecutionId],
+    enabled: !!rootExecutionId && !!backendUrl,
+    queryKey: ["execution-details", rootExecutionId, backendUrl],
     queryFn: async () => {
       if (!rootExecutionId) {
         throw new Error("No root execution id found");
@@ -58,8 +58,8 @@ export const usePipelineRunData = (id: string) => {
     error,
     isLoading,
   } = useQuery({
-    enabled: !!rootExecutionId && !!executionDetails,
-    queryKey: ["pipeline-run", rootExecutionId],
+    enabled: !!rootExecutionId && !!executionDetails && !!backendUrl,
+    queryKey: ["pipeline-run", rootExecutionId, backendUrl],
     queryFn: async () => {
       if (!rootExecutionId) {
         throw new Error("No root execution id found");

src/hooks/useSubgraphBreadcrumbs.ts

@@ -31,7 +31,12 @@ export const useSubgraphBreadcrumbs = (
   const queryClient = useQueryClient();
 
   const { data, isLoading, error } = useQuery({
-    queryKey: ["subgraph-breadcrumbs", rootExecutionId, subgraphExecutionId],
+    queryKey: [
+      "subgraph-breadcrumbs",
+      rootExecutionId,
+      subgraphExecutionId,
+      backendUrl,
+    ],
     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: ["execution-details", currentExecutionId, backendUrl],
         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: ["execution-details", parentExecutionId, backendUrl],
           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,
   });

src/providers/ExecutionDataProvider.tsx

@@ -20,6 +20,7 @@ import {
 } from "@/services/executionService";
 import type { TaskStatusCounts } from "@/types/pipelineRun";
 
+import { useBackend } from "./BackendProvider";
 import { useComponentSpec } from "./ComponentSpecProvider";
 
 interface CachedExecutionData {
@@ -84,6 +85,7 @@ const findExecutionIdAtPath = (
   rootDetails: GetExecutionInfoResponse | undefined,
   cache: Map<string, CachedExecutionData>,
   queryClient: ReturnType<typeof useQueryClient>,
+  backendUrl: string,
 ): string => {
   if (!rootExecutionId) {
     return "";
@@ -113,7 +115,7 @@ const findExecutionIdAtPath = (
     const cachedQueryData = queryClient.getQueryData<{
       details: GetExecutionInfoResponse;
       state: GetGraphExecutionStateResponse;
-    }>(["pipeline-run", nextExecutionId]);
+    }>(["pipeline-run", nextExecutionId, backendUrl]);
 
     if (cachedQueryData) {
       currentDetails = cachedQueryData.details;
@@ -139,6 +141,7 @@ export function ExecutionDataProvider({
   subgraphExecutionId?: string;
 }>) {
   const queryClient = useQueryClient();
+  const { backendUrl } = useBackend();
   const { currentSubgraphPath, navigateToPath } = useComponentSpec();
 
   const executionDataCache = useRef<Map<string, CachedExecutionData>>(
@@ -219,6 +222,7 @@ export function ExecutionDataProvider({
       rootDetails,
       executionDataCache.current,
       queryClient,
+      backendUrl,
     );
   }, [
     subgraphExecutionId,
@@ -227,6 +231,7 @@ export function ExecutionDataProvider({
     rootDetails,
     isAtRoot,
     queryClient,
+    backendUrl,
   ]);
 
   const {

src/services/executionService.ts

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