fix(app): fix stale error data displaying (#16305)

Closes RQA-3213

Before the network request completes when entering ER the 2nd time + in a run, useCurrentlyRecoveringFrom uses stale data. If the command that failed previously is the same command that failed currently, this gives it a flickering effect of "correct error, wrong error, correct error", but the stale data is more noticeable if you previously failed a command that wasn't the same kind as the current failure.

To fix, let's just clear the query cache when we first enter recovery.

Author: mjhuff

app/src/organisms/ErrorRecoveryFlows/hooks/__tests__/useCurrentlyRecoveringFrom.test.ts

@@ -1,5 +1,6 @@
-import { vi, describe, it, expect } from 'vitest'
+import { vi, describe, it, expect, beforeEach } from 'vitest'
 import { renderHook } from '@testing-library/react'
+import { useQueryClient } from 'react-query'
 
 import { useCommandQuery } from '@opentrons/react-api-client'
 import {
@@ -10,13 +11,25 @@ import {
 import { useNotifyAllCommandsQuery } from '../../../../resources/runs'
 import { useCurrentlyRecoveringFrom } from '../useCurrentlyRecoveringFrom'
 
+import type { Mock } from 'vitest'
+
 vi.mock('@opentrons/react-api-client')
 vi.mock('../../../../resources/runs')
+vi.mock('react-query')
 
 const MOCK_RUN_ID = 'runId'
 const MOCK_COMMAND_ID = 'commandId'
 
 describe('useCurrentlyRecoveringFrom', () => {
+  let mockInvalidateQueries: Mock
+
+  beforeEach(() => {
+    mockInvalidateQueries = vi.fn()
+    vi.mocked(useQueryClient).mockReturnValue({
+      invalidateQueries: mockInvalidateQueries,
+    } as any)
+  })
+
   it('disables all queries if the run is not awaiting-recovery', () => {
     vi.mocked(useNotifyAllCommandsQuery).mockReturnValue({
       data: {
@@ -97,4 +110,12 @@ describe('useCurrentlyRecoveringFrom', () => {
     )
     expect(result.current).toStrictEqual('mockCommandDetails')
   })
+
+  it('calls invalidateQueries when the run enters recovery mode', () => {
+    renderHook(() =>
+      useCurrentlyRecoveringFrom(MOCK_RUN_ID, RUN_STATUS_AWAITING_RECOVERY)
+    )
+
+    expect(mockInvalidateQueries).toHaveBeenCalled()
+  })
 })

app/src/organisms/ErrorRecoveryFlows/hooks/useCurrentlyRecoveringFrom.ts

@@ -1,9 +1,12 @@
+import * as React from 'react'
+import { useQueryClient } from 'react-query'
+
 import {
   RUN_STATUS_AWAITING_RECOVERY,
   RUN_STATUS_AWAITING_RECOVERY_BLOCKED_BY_OPEN_DOOR,
   RUN_STATUS_AWAITING_RECOVERY_PAUSED,
 } from '@opentrons/api-client'
-import { useCommandQuery } from '@opentrons/react-api-client'
+import { useCommandQuery, useHost } from '@opentrons/react-api-client'
 
 import { useNotifyAllCommandsQuery } from '../../../resources/runs'
 
@@ -25,10 +28,19 @@ export function useCurrentlyRecoveringFrom(
   runId: string,
   runStatus: RunStatus | null
 ): FailedCommand | null {
+  const queryClient = useQueryClient()
+  const host = useHost()
   // There can only be a currentlyRecoveringFrom command when the run is in recovery mode.
   // In case we're falling back to polling, only enable queries when that is the case.
   const isRunInRecoveryMode = VALID_RECOVERY_FETCH_STATUSES.includes(runStatus)
 
+  // Prevent stale data on subsequent recoveries by clearing the query cache at the start of each recovery.
+  React.useEffect(() => {
+    if (isRunInRecoveryMode) {
+      void queryClient.invalidateQueries([host, 'runs', runId])
+    }
+  }, [isRunInRecoveryMode, host, runId])
+
   const { data: allCommandsQueryData } = useNotifyAllCommandsQuery(
     runId,
     { cursor: null, pageLength: 0 }, // pageLength 0 because we only care about the links.

app/src/organisms/ErrorRecoveryFlows/index.tsx

@@ -147,8 +147,6 @@ export function ErrorRecoveryFlows(
     failedCommand: failedCommandBySource,
   })
 
-  console.log('=>(index.tsx:180) showTakeover', showTakeover)
-
   return (
     <>
       {showTakeover ? (