diff --git a/package.json b/package.json
index ddd49101c..dd3e4e537 100644
--- a/package.json
+++ b/package.json
@@ -177,6 +177,8 @@
     "react-intersection-observer": "^8.25.1",
     "react-json-tree": "^0.11.0",
     "react-loading-skeleton": "^1.1.2",
+    "react-query": "^3.2.0-beta",
+    "react-query-devtools": "^3.0.0-beta",
     "react-router": "^5.0.1",
     "react-router-dom": "^5.0.1",
     "react-test-renderer": "^16.9.0",
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 1b5af2f2d..aa6e50718 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -2,6 +2,8 @@ import { CssBaseline } from '@material-ui/core';
 import { ThemeProvider } from '@material-ui/styles';
 import { env } from 'common/env';
 import { debug, debugPrefix } from 'common/log';
+import { QueryAuthorizationObserver } from 'components/common/QueryAuthorizationObserver';
+import { queryClient } from 'components/common/queryCache';
 import { APIContext, useAPIState } from 'components/data/apiContext';
 import { LoginExpiredHandler } from 'components/Errors/LoginExpiredHandler';
 import { SystemStatusBanner } from 'components/Notifications/SystemStatusBanner';
@@ -11,6 +13,8 @@ import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import { hot } from 'react-hot-loader';
 import { SkeletonTheme } from 'react-loading-skeleton';
+import { QueryClientProvider } from 'react-query';
+import { ReactQueryDevtools } from 'react-query-devtools';
 import { Router } from 'react-router-dom';
 import { ApplicationRouter } from 'routes/ApplicationRouter';
 import { history } from 'routes/history';
@@ -25,26 +29,33 @@ export const AppComponent: React.StatelessComponent<{}> = () => {
 
     return (
         <ThemeProvider theme={muiTheme}>
-            <APIContext.Provider value={apiState}>
-                <SkeletonTheme
-                    color={skeletonColor}
-                    highlightColor={skeletonHighlightColor}
-                >
-                    <CssBaseline />
-                    <Helmet>
-                        <title>Flyte Console</title>
-                        <meta name="viewport" content="width=device-width" />
-                    </Helmet>
-                    <Router history={history}>
-                        <ErrorBoundary fixed={true}>
-                            <NavBarRouter />
-                            <ApplicationRouter />
-                            <LoginExpiredHandler />
-                        </ErrorBoundary>
-                    </Router>
-                    <SystemStatusBanner />
-                </SkeletonTheme>
-            </APIContext.Provider>
+            <QueryClientProvider client={queryClient}>
+                <APIContext.Provider value={apiState}>
+                    <QueryAuthorizationObserver />
+                    <SkeletonTheme
+                        color={skeletonColor}
+                        highlightColor={skeletonHighlightColor}
+                    >
+                        <CssBaseline />
+                        <Helmet>
+                            <title>Flyte Console</title>
+                            <meta
+                                name="viewport"
+                                content="width=device-width"
+                            />
+                        </Helmet>
+                        <Router history={history}>
+                            <ErrorBoundary fixed={true}>
+                                <NavBarRouter />
+                                <ApplicationRouter />
+                                <LoginExpiredHandler />
+                            </ErrorBoundary>
+                        </Router>
+                        <SystemStatusBanner />
+                    </SkeletonTheme>
+                </APIContext.Provider>
+                <ReactQueryDevtools initialIsOpen={false} />
+            </QueryClientProvider>
         </ThemeProvider>
     );
 };
diff --git a/src/components/Executions/ExecutionDetails/ExecutionDetails.tsx b/src/components/Executions/ExecutionDetails/ExecutionDetails.tsx
index 8360c7c95..6b8208dc7 100644
--- a/src/components/Executions/ExecutionDetails/ExecutionDetails.tsx
+++ b/src/components/Executions/ExecutionDetails/ExecutionDetails.tsx
@@ -2,14 +2,15 @@ import { Collapse, IconButton } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 import * as classnames from 'classnames';
-import { WaitForData, withRouteParams } from 'components/common';
-import { RefreshConfig, useDataRefresher } from 'components/hooks';
+import { withRouteParams } from 'components/common';
+import { WaitForQuery } from 'components/common/WaitForQuery';
+import { RefreshConfig } from 'components/hooks';
 import { Execution } from 'models';
 import * as React from 'react';
 import { executionRefreshIntervalMs } from '../constants';
 import { ExecutionContext, ExecutionDataCacheContext } from '../contexts';
 import { useExecutionDataCache } from '../useExecutionDataCache';
-import { useWorkflowExecution } from '../useWorkflowExecution';
+import { useWorkflowExecutionQuery } from '../useWorkflowExecution';
 import { executionIsTerminal } from '../utils';
 import { ExecutionDetailsAppBarContent } from './ExecutionDetailsAppBarContent';
 import { ExecutionMetadata } from './ExecutionMetadata';
@@ -50,8 +51,47 @@ const executionRefreshConfig: RefreshConfig<Execution> = {
     valueIsFinal: executionIsTerminal
 };
 
+interface RenderExecutionDetailsProps {
+    execution: Execution;
+}
+
+const RenderExecutionDetails: React.FC<RenderExecutionDetailsProps> = ({
+    execution
+}) => {
+    const styles = useStyles();
+    const [metadataExpanded, setMetadataExpanded] = React.useState(true);
+    const toggleMetadata = () => setMetadataExpanded(!metadataExpanded);
+    const dataCache = useExecutionDataCache();
+    const contextValue = {
+        execution
+    };
+
+    return (
+        <ExecutionContext.Provider value={contextValue}>
+            <ExecutionDetailsAppBarContent execution={execution} />
+            <div className={styles.metadataContainer}>
+                <Collapse in={metadataExpanded}>
+                    <ExecutionMetadata execution={execution} />
+                </Collapse>
+                <div className={styles.expandCollapseContainer}>
+                    <IconButton size="small" onClick={toggleMetadata}>
+                        <ExpandMore
+                            className={classnames(styles.expandCollapseButton, {
+                                expanded: metadataExpanded
+                            })}
+                        />
+                    </IconButton>
+                </div>
+            </div>
+            <ExecutionDataCacheContext.Provider value={dataCache}>
+                <ExecutionNodeViews execution={execution} />
+            </ExecutionDataCacheContext.Provider>
+        </ExecutionContext.Provider>
+    );
+};
+
 /** The view component for the Execution Details page */
-export const ExecutionDetailsContainer: React.FC<ExecutionDetailsRouteParams> = ({
+export const ExecutionDetailsContainer: React.FC<ExecutionDetailsProps> = ({
     executionId,
     domainId,
     projectId
@@ -61,46 +101,15 @@ export const ExecutionDetailsContainer: React.FC<ExecutionDetailsRouteParams> =
         domain: domainId,
         name: executionId
     };
-    const styles = useStyles();
-    const [metadataExpanded, setMetadataExpanded] = React.useState(true);
-    const toggleMetadata = () => setMetadataExpanded(!metadataExpanded);
-    const dataCache = useExecutionDataCache();
-    const { fetchable, terminateExecution } = useWorkflowExecution(
-        id,
-        dataCache
+
+    const renderExecutionDetails = (execution: Execution) => (
+        <RenderExecutionDetails execution={execution} />
     );
-    useDataRefresher(id, fetchable, executionRefreshConfig);
-    const contextValue = {
-        terminateExecution,
-        execution: fetchable.value
-    };
 
     return (
-        <WaitForData {...fetchable}>
-            <ExecutionContext.Provider value={contextValue}>
-                <ExecutionDetailsAppBarContent execution={fetchable.value} />
-                <div className={styles.metadataContainer}>
-                    <Collapse in={metadataExpanded}>
-                        <ExecutionMetadata execution={fetchable.value} />
-                    </Collapse>
-                    <div className={styles.expandCollapseContainer}>
-                        <IconButton size="small" onClick={toggleMetadata}>
-                            <ExpandMore
-                                className={classnames(
-                                    styles.expandCollapseButton,
-                                    {
-                                        expanded: metadataExpanded
-                                    }
-                                )}
-                            />
-                        </IconButton>
-                    </div>
-                </div>
-                <ExecutionDataCacheContext.Provider value={dataCache}>
-                    <ExecutionNodeViews execution={fetchable.value} />
-                </ExecutionDataCacheContext.Provider>
-            </ExecutionContext.Provider>
-        </WaitForData>
+        <WaitForQuery query={useWorkflowExecutionQuery(id)}>
+            {renderExecutionDetails}
+        </WaitForQuery>
     );
 };
 
diff --git a/src/components/Executions/ExecutionDetails/ExecutionDetailsAppBarContent.tsx b/src/components/Executions/ExecutionDetails/ExecutionDetailsAppBarContent.tsx
index 7a17a3eed..fb4b69a82 100644
--- a/src/components/Executions/ExecutionDetails/ExecutionDetailsAppBarContent.tsx
+++ b/src/components/Executions/ExecutionDetails/ExecutionDetailsAppBarContent.tsx
@@ -14,7 +14,7 @@ import { Link as RouterLink } from 'react-router-dom';
 import { ExecutionInputsOutputsModal } from '../ExecutionInputsOutputsModal';
 import { ExecutionStatusBadge } from '../ExecutionStatusBadge';
 import { TerminateExecutionButton } from '../TerminateExecution';
-import { executionIsTerminal } from '../utils';
+import { executionIsRunning, executionIsTerminal } from '../utils';
 import { backLinkTitle, executionActionStrings } from './constants';
 import { RelaunchExecutionForm } from './RelaunchExecutionForm';
 import { getExecutionBackLink, getExecutionSourceId } from './utils';
@@ -80,6 +80,7 @@ export const ExecutionDetailsAppBarContent: React.FC<{
     const { phase } = execution.closure;
     const sourceId = getExecutionSourceId(execution);
     const { backLink = getExecutionBackLink(execution) } = useLocationState();
+    const isRunning = executionIsRunning(execution);
     const isTerminal = executionIsTerminal(execution);
     const onClickShowInputsOutputs = () => setShowInputsOutputs(true);
     const onClickRelaunch = () => setShowRelaunchForm(true);
@@ -96,7 +97,9 @@ export const ExecutionDetailsAppBarContent: React.FC<{
         );
     }
 
-    const actionContent = isTerminal ? (
+    const actionContent = isRunning ? (
+        <TerminateExecutionButton className={styles.actionButton} />
+    ) : isTerminal ? (
         <Button
             variant="outlined"
             color="primary"
@@ -109,12 +112,9 @@ export const ExecutionDetailsAppBarContent: React.FC<{
         >
             Relaunch
         </Button>
-    ) : (
-        <TerminateExecutionButton className={styles.actionButton} />
-    );
+    ) : null;
 
-    // For running executions, add an overflow menu with the ability to clone
-    // while we are still running.
+    // For non-terminal executions, add an overflow menu with the ability to clone
     const moreActionsContent = !isTerminal ? (
         <MoreOptionsMenu
             className={styles.moreActions}
diff --git a/src/components/Executions/ExecutionDetails/test/ExecutionDetailsAppBarContent.test.tsx b/src/components/Executions/ExecutionDetails/test/ExecutionDetailsAppBarContent.test.tsx
index c64724fcb..0c08e9fc5 100644
--- a/src/components/Executions/ExecutionDetails/test/ExecutionDetailsAppBarContent.test.tsx
+++ b/src/components/Executions/ExecutionDetails/test/ExecutionDetailsAppBarContent.test.tsx
@@ -26,20 +26,14 @@ jest.mock('components/Navigation/NavBarContent', () => ({
 describe('ExecutionDetailsAppBarContent', () => {
     let execution: Execution;
     let executionContext: ExecutionContextData;
-    let mockTerminateExecution: jest.Mock<Promise<void>>;
-    let terminatePromise: DelayedPromiseResult<void>;
     let sourceId: Identifier;
 
     beforeEach(() => {
         execution = createMockExecution();
         sourceId = execution.closure.workflowId;
-        mockTerminateExecution = jest.fn().mockImplementation(() => {
-            terminatePromise = delayedPromise();
-            return terminatePromise;
-        });
+
         executionContext = {
-            execution,
-            terminateExecution: mockTerminateExecution
+            execution
         };
     });
 
diff --git a/src/components/Executions/ExecutionDetails/test/ExecutionNodeViews.test.tsx b/src/components/Executions/ExecutionDetails/test/ExecutionNodeViews.test.tsx
index 5b983c52e..13f7f9151 100644
--- a/src/components/Executions/ExecutionDetails/test/ExecutionNodeViews.test.tsx
+++ b/src/components/Executions/ExecutionDetails/test/ExecutionNodeViews.test.tsx
@@ -85,8 +85,7 @@ describe('ExecutionNodeViews', () => {
         );
 
         executionContext = {
-            execution: workflowExecution,
-            terminateExecution: jest.fn().mockRejectedValue('Not Implemented')
+            execution: workflowExecution
         };
 
         props = { execution: workflowExecution };
diff --git a/src/components/Executions/Tables/test/NodeExecutionsTable.test.tsx b/src/components/Executions/Tables/test/NodeExecutionsTable.test.tsx
index eefb100a2..78d7cd1f8 100644
--- a/src/components/Executions/Tables/test/NodeExecutionsTable.test.tsx
+++ b/src/components/Executions/Tables/test/NodeExecutionsTable.test.tsx
@@ -167,8 +167,7 @@ describe('NodeExecutionsTable', () => {
         );
 
         executionContext = {
-            execution: mockExecution,
-            terminateExecution: jest.fn().mockRejectedValue('Not Implemented')
+            execution: mockExecution
         };
     });
 
diff --git a/src/components/Executions/TerminateExecution/TerminateExecutionForm.tsx b/src/components/Executions/TerminateExecution/TerminateExecutionForm.tsx
index 37b120ea5..111e6cca0 100644
--- a/src/components/Executions/TerminateExecution/TerminateExecutionForm.tsx
+++ b/src/components/Executions/TerminateExecution/TerminateExecutionForm.tsx
@@ -40,8 +40,7 @@ export const TerminateExecutionForm: React.FC<{
     const {
         cause,
         setCause,
-        terminating,
-        terminationError,
+        terminationState: { error, isLoading: terminating },
         terminateExecution
     } = useTerminateExecutionState(onClose);
 
@@ -74,9 +73,7 @@ export const TerminateExecutionForm: React.FC<{
                     value={cause}
                 />
             </FormControl>
-            {terminationError && (
-                <p className={commonStyles.errorText}>{terminationError}</p>
-            )}
+            {error && <p className={commonStyles.errorText}>{`${error}`}</p>}
             <div className={commonStyles.formButtonGroup}>
                 <Button
                     color="primary"
diff --git a/src/components/Executions/TerminateExecution/test/createMockTerminateExecutionState.ts b/src/components/Executions/TerminateExecution/test/createMockTerminateExecutionState.ts
deleted file mode 100644
index 74f6b3bd3..000000000
--- a/src/components/Executions/TerminateExecution/test/createMockTerminateExecutionState.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useTerminateExecutionState } from '../useTerminateExecutionState';
-
-export function createMockTerminateExecutionState(): ReturnType<
-    typeof useTerminateExecutionState
-> {
-    return {
-        cause: '',
-        setCause: jest.fn(),
-        setTerminating: jest.fn(),
-        setTerminationError: jest.fn(),
-        terminateExecution: jest.fn(),
-        terminating: false,
-        terminationError: ''
-    };
-}
diff --git a/src/components/Executions/TerminateExecution/useTerminateExecutionState.ts b/src/components/Executions/TerminateExecution/useTerminateExecutionState.ts
index 9129147af..e4d8d5989 100644
--- a/src/components/Executions/TerminateExecution/useTerminateExecutionState.ts
+++ b/src/components/Executions/TerminateExecution/useTerminateExecutionState.ts
@@ -1,33 +1,56 @@
+import { QueryKey } from 'components/common/queries';
+import { waitForQueryState } from 'components/common/queryUtils';
+import { useAPIContext } from 'components/data/apiContext';
+import { Execution } from 'models';
 import { useContext, useState } from 'react';
+import { useMutation, useQueryClient } from 'react-query';
 import { ExecutionContext } from '../contexts';
+import { executionIsTerminal } from '../utils';
+
+interface TerminateExecutionVariables {
+    cause: string;
+}
 
 /** Holds state for `TerminateExecutionForm` */
 export function useTerminateExecutionState(onClose: () => void) {
+    const { getExecution, terminateWorkflowExecution } = useAPIContext();
     const [cause, setCause] = useState('');
-    const [terminating, setTerminating] = useState(false);
-    const [terminationError, setTerminationError] = useState('');
-    const { terminateExecution: doTerminateExecution } = useContext(
-        ExecutionContext
-    );
+    const {
+        execution: { id }
+    } = useContext(ExecutionContext);
+    const queryClient = useQueryClient();
 
-    const terminateExecution = async (cause: string) => {
-        setTerminating(true);
-        try {
-            await doTerminateExecution(cause);
-            onClose();
-        } catch (e) {
-            setTerminationError(`Failed to terminate execution: ${e}`);
-            setTerminating(false);
+    const { mutate, ...terminationState } = useMutation<
+        Execution,
+        Error,
+        TerminateExecutionVariables
+    >(
+        async ({ cause }: TerminateExecutionVariables) => {
+            await terminateWorkflowExecution(id, cause);
+            return await waitForQueryState<Execution>({
+                queryClient,
+                queryKey: [QueryKey.WorkflowExecution, id],
+                queryFn: () => getExecution(id),
+                valueCheckFn: executionIsTerminal
+            });
+        },
+        {
+            onSuccess: updatedExecution => {
+                queryClient.setQueryData(
+                    [QueryKey.WorkflowExecution, id],
+                    updatedExecution
+                );
+                onClose();
+            }
         }
-    };
+    );
+
+    const terminateExecution = async (cause: string) => await mutate({ cause });
 
     return {
         cause,
         setCause,
-        setTerminating,
-        setTerminationError,
-        terminateExecution,
-        terminating,
-        terminationError
+        terminationState,
+        terminateExecution
     };
 }
diff --git a/src/components/Executions/contexts.ts b/src/components/Executions/contexts.ts
index 3a3afdebc..db421517b 100644
--- a/src/components/Executions/contexts.ts
+++ b/src/components/Executions/contexts.ts
@@ -5,7 +5,6 @@ import { ExecutionDataCache } from './types';
 
 export interface ExecutionContextData {
     execution: Execution;
-    terminateExecution(cause: string): Promise<void>;
 }
 
 export const ExecutionContext = React.createContext<ExecutionContextData>(
diff --git a/src/components/Executions/useWorkflowExecution.ts b/src/components/Executions/useWorkflowExecution.ts
index 7d512b81a..5ecf90e5b 100644
--- a/src/components/Executions/useWorkflowExecution.ts
+++ b/src/components/Executions/useWorkflowExecution.ts
@@ -1,4 +1,6 @@
+import { QueryKey } from 'components/common/queries';
 import { APIContextValue, useAPIContext } from 'components/data/apiContext';
+import { useConditionalQuery } from 'components/hooks/useConditionalQuery';
 import { maxBlobDownloadSizeBytes } from 'components/Literals/constants';
 import {
     Execution,
@@ -9,7 +11,14 @@ import {
 } from 'models';
 import { FetchableData, FetchableExecution } from '../hooks/types';
 import { useFetchableData } from '../hooks/useFetchableData';
+import { executionRefreshIntervalMs } from './constants';
 import { ExecutionDataCache } from './types';
+import { executionIsTerminal } from './utils';
+
+function shouldRefreshExecution(execution: Execution): boolean {
+    const result = !executionIsTerminal(execution);
+    return result;
+}
 
 /** A hook for fetching a WorkflowExecution */
 export function useWorkflowExecution(
@@ -33,6 +42,18 @@ export function useWorkflowExecution(
     return { fetchable, terminateExecution };
 }
 
+export function useWorkflowExecutionQuery(id: WorkflowExecutionIdentifier) {
+    const { getExecution } = useAPIContext();
+    return useConditionalQuery<Execution, Error>(
+        {
+            queryKey: [QueryKey.WorkflowExecution, id],
+            queryFn: () => getExecution(id),
+            refetchInterval: executionRefreshIntervalMs
+        },
+        shouldRefreshExecution
+    );
+}
+
 /** Fetches the signed URLs for NodeExecution data (inputs/outputs) */
 export function useWorkflowExecutionData(
     id: WorkflowExecutionIdentifier
diff --git a/src/components/Executions/utils.ts b/src/components/Executions/utils.ts
index 8ba163eac..e0efb3407 100644
--- a/src/components/Executions/utils.ts
+++ b/src/components/Executions/utils.ts
@@ -12,6 +12,7 @@ import {
     BaseExecutionClosure,
     Execution,
     NodeExecution,
+    runningExecutionStates,
     TaskExecution,
     terminalExecutionStates,
     terminalNodeExecutionStates,
@@ -96,6 +97,13 @@ export const executionIsTerminal = (execution: Execution) =>
     execution.closure &&
     terminalExecutionStates.includes(execution.closure.phase);
 
+/** Determines if a workflow is in a known running state. Note: "Unknown" does
+ * not evaluate to true here.
+ */
+export const executionIsRunning = (execution: Execution) =>
+    execution.closure &&
+    runningExecutionStates.includes(execution.closure.phase);
+
 /** Determines if a node execution can be considered finalized and will not
  * change state again.
  */
diff --git a/src/components/common/QueryAuthorizationObserver.tsx b/src/components/common/QueryAuthorizationObserver.tsx
new file mode 100644
index 000000000..652dc9553
--- /dev/null
+++ b/src/components/common/QueryAuthorizationObserver.tsx
@@ -0,0 +1,31 @@
+import { useAPIContext } from 'components/data/apiContext';
+import { NotAuthorizedError } from 'errors/fetchErrors';
+import * as React from 'react';
+import { onlineManager, Query, useQueryClient } from 'react-query';
+
+/** Watches all queries to detect a NotAuthorized error, disabling future queries
+ * and triggering the login refresh flow.
+ * Note: Should be placed just below the QueryClient and ApiContext providers.
+ */
+export const QueryAuthorizationObserver: React.FC = () => {
+    const queryCache = useQueryClient().getQueryCache();
+    const apiContext = useAPIContext();
+    React.useEffect(() => {
+        const unsubscribe = queryCache.subscribe(
+            (query?: Query | undefined) => {
+                if (!query || !query.state.error) {
+                    return;
+                }
+                if (query.state.error instanceof NotAuthorizedError) {
+                    // Stop all in-progress and future requests
+                    onlineManager.setOnline(false);
+                    // TODO: https://github.com/lyft/flyte/issues/525
+                    // Notify user of unauthorized status
+                    apiContext.loginStatus.setExpired(true);
+                }
+            }
+        );
+        return unsubscribe;
+    }, [queryCache, apiContext]);
+    return null;
+};
diff --git a/src/components/common/WaitForQuery.tsx b/src/components/common/WaitForQuery.tsx
new file mode 100644
index 000000000..238515fa2
--- /dev/null
+++ b/src/components/common/WaitForQuery.tsx
@@ -0,0 +1,72 @@
+import { log } from 'common/log';
+import { DataError } from 'components/Errors';
+import * as React from 'react';
+import { QueryObserverResult, QueryStatus } from 'react-query';
+import { ErrorBoundary } from './ErrorBoundary';
+
+const defaultErrorTitle = 'Failed to fetch data';
+
+interface WaitForQueryProps<T> {
+    children: (data: T) => React.ReactNode;
+    /** Component to use for displaying errors. This will override `errorTitle` */
+    errorComponent?: React.ComponentType<{ error?: Error; retry?(): any }>;
+    /** The string to display as the header of the error content */
+    errorTitle?: string;
+    /** Loading state (passed from a hook using useQuery) */
+    query: QueryObserverResult<T, Error>;
+    /** A callback that will initiaite a fetch of the underlying resource. This
+     * is wired to a "Retry" button when showing the error visual.
+     */
+    fetch?(): any;
+}
+
+/** A wrapper component which will wait to display children until the passed `status` string is
+ * `QueryStatus.Success`. Will render a defult or provided error component if the
+ * corresponding query results in an error
+ */
+export const WaitForQuery = <T extends object>({
+    children,
+    errorComponent: ErrorComponent,
+    errorTitle = defaultErrorTitle,
+    query,
+    fetch
+}: WaitForQueryProps<T>) => {
+    switch (query.status) {
+        case 'idle': {
+            return null;
+        }
+        case 'loading': {
+            // TODO:
+            return null;
+        }
+        case 'success': {
+            if (query.data === undefined) {
+                log.error(
+                    'Unexpected `undefined` query data when rendering successful query: ',
+                    query
+                );
+                return null;
+            }
+            return (
+                <ErrorBoundary>
+                    <>{children(query.data)}</>
+                </ErrorBoundary>
+            );
+        }
+        case 'error': {
+            const error = query.error || new Error('Unknown failure');
+            return ErrorComponent ? (
+                <ErrorComponent error={error} retry={fetch} />
+            ) : (
+                <DataError
+                    error={error}
+                    errorTitle={errorTitle}
+                    retry={fetch}
+                />
+            );
+        }
+        default:
+            log.error(`Unexpected query status value: ${status}`);
+            return null;
+    }
+};
diff --git a/src/components/common/queries.ts b/src/components/common/queries.ts
new file mode 100644
index 000000000..85fe31a0d
--- /dev/null
+++ b/src/components/common/queries.ts
@@ -0,0 +1,3 @@
+export enum QueryKey {
+    WorkflowExecution = 'workflowExecution'
+}
diff --git a/src/components/common/queryCache.ts b/src/components/common/queryCache.ts
new file mode 100644
index 000000000..0013b4455
--- /dev/null
+++ b/src/components/common/queryCache.ts
@@ -0,0 +1,41 @@
+import { NotAuthorizedError } from 'errors/fetchErrors';
+import { isObject, isPlainObject } from 'lodash';
+import {
+    hashQueryKey,
+    QueryCache,
+    QueryClient,
+    QueryKeyHashFunction
+} from 'react-query';
+
+export const queryCache = new QueryCache();
+const allowedFailures = 3;
+
+function isErrorRetryable(error: any) {
+    // Fail immediately for auth errors, retries won't succeed
+    return !(error instanceof NotAuthorizedError);
+}
+
+const normalizeObjectPrototypeKeys: QueryKeyHashFunction = queryKey => {
+    const arrayQueryKey = Array.isArray(queryKey) ? queryKey : [queryKey];
+    // for objects with non-default prototypes (such as decoded protobufJS messages),
+    // the built-in serialization won't work correctly. So we will convert them
+    // to plain objects by spreading ownProperties into a new object.
+    const normalizedKey = arrayQueryKey.map(key => {
+        if (isObject(key) && !isPlainObject(key)) {
+            return { ...key };
+        }
+        return key;
+    });
+    return hashQueryKey(normalizedKey);
+};
+
+export const queryClient = new QueryClient({
+    queryCache,
+    defaultOptions: {
+        queries: {
+            queryKeyHashFn: normalizeObjectPrototypeKeys,
+            retry: (failureCount, error) =>
+                failureCount < allowedFailures && isErrorRetryable(error)
+        }
+    }
+});
diff --git a/src/components/common/queryUtils.ts b/src/components/common/queryUtils.ts
new file mode 100644
index 000000000..4bf82c34a
--- /dev/null
+++ b/src/components/common/queryUtils.ts
@@ -0,0 +1,51 @@
+import { log } from 'common/log';
+import { QueryClient, QueryFunction, QueryKey } from 'react-query';
+
+const defaultRefetchInterval = 1000;
+const defaultTimeout = 30000;
+
+export interface WaitForQueryValueConfig<TResult> {
+    queryClient: QueryClient;
+    queryKey: QueryKey;
+    queryFn: QueryFunction<TResult>;
+    refetchInterval?: number;
+    timeout?: number;
+    valueCheckFn: (value: TResult) => boolean;
+}
+
+/** Executes a query against the given QueryClient on an interval until the data
+ * returned by the query satisfies the `valueCheckFn` predicate or the timeout is reached.
+ */
+export async function waitForQueryState<TResult>({
+    queryClient,
+    queryKey,
+    queryFn,
+    refetchInterval = defaultRefetchInterval,
+    timeout = defaultTimeout,
+    valueCheckFn
+}: WaitForQueryValueConfig<TResult>): Promise<TResult> {
+    const queryWaitPromise = new Promise<TResult>(resolve => {
+        const doFetch = async () => {
+            try {
+                const result = await queryClient.fetchQuery<TResult, Error>({
+                    queryKey,
+                    queryFn
+                });
+                if (valueCheckFn(result)) {
+                    return resolve(result);
+                }
+            } catch (e) {
+                log.warn(
+                    `Unexpected failure while waiting for query: ${e}`,
+                    queryKey
+                );
+            }
+            setTimeout(doFetch, refetchInterval);
+        };
+        doFetch();
+    });
+    const timeoutPromise = new Promise<TResult>((_, reject) => {
+        setTimeout(() => reject(new Error('Timed Out')), timeout);
+    });
+    return Promise.race([queryWaitPromise, timeoutPromise]);
+}
diff --git a/src/components/hooks/useConditionalQuery.ts b/src/components/hooks/useConditionalQuery.ts
new file mode 100644
index 000000000..08983a5b0
--- /dev/null
+++ b/src/components/hooks/useConditionalQuery.ts
@@ -0,0 +1,32 @@
+import {
+    QueryKey,
+    useQuery,
+    useQueryClient,
+    UseQueryOptions
+} from 'react-query';
+
+interface ConditionalQueryOptions<TData, TError, TQueryFnData>
+    extends UseQueryOptions<TData, TError, TQueryFnData> {
+    queryKey: QueryKey;
+}
+
+/** Returns an instance of useQuery that is conditionally enabled based on
+ * a `shouldEnable` function. The passed function will be given the current
+ * data value and must return whether the query should fetch an updated value.
+ * NOTE: The query will *always* run while the value is `undefined`, so this
+ * hook is not safe for use with queries which may return `undefined` value
+ * after a fetch.
+ */
+export function useConditionalQuery<
+    TData = unknown,
+    TError = unknown,
+    TQueryFnData = TData
+>(
+    options: ConditionalQueryOptions<TData, TError, TQueryFnData>,
+    shouldEnableFn: (value: TData) => boolean
+) {
+    const queryClient = useQueryClient();
+    const queryData = queryClient.getQueryData<TData>(options.queryKey);
+    const enabled = queryData === undefined ? true : shouldEnableFn(queryData);
+    return useQuery<TData, TError, TQueryFnData>({ ...options, enabled });
+}
diff --git a/src/models/Execution/constants.ts b/src/models/Execution/constants.ts
index 7cab0194f..94d6baab2 100644
--- a/src/models/Execution/constants.ts
+++ b/src/models/Execution/constants.ts
@@ -18,6 +18,11 @@ export const terminalTaskExecutionStates: TaskExecutionPhase[] = [
     TaskExecutionPhase.SUCCEEDED
 ];
 
+export const runningExecutionStates: WorkflowExecutionPhase[] = [
+    WorkflowExecutionPhase.QUEUED,
+    WorkflowExecutionPhase.RUNNING
+];
+
 export const terminalExecutionStates: WorkflowExecutionPhase[] = [
     WorkflowExecutionPhase.ABORTED,
     WorkflowExecutionPhase.FAILED,
diff --git a/yarn.lock b/yarn.lock
index 61ccd50ed..61f7405a0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1038,6 +1038,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.10.5":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
+  integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.3.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
@@ -12062,6 +12069,14 @@ marked@^1.0.0:
   resolved "https://registry.yarnpkg.com/marked/-/marked-1.2.0.tgz#7221ce2395fa6cf6d722e6f2871a32d3513c85ca"
   integrity sha512-tiRxakgbNPBr301ihe/785NntvYyhxlqcL3YaC8CaxJQh7kiaEtrN9B/eK2I2943Yjkh5gw25chYFDQhOMCwMA==
 
+match-sorter@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-4.2.1.tgz#575b4b3737185ba9518b67612b66877ea0b37358"
+  integrity sha512-s+3h9TiZU9U1pWhIERHf8/f4LmBN6IXaRgo2CI17+XGByGS1GvG5VvXK9pcGyCjGe3WM3mSYRC3ipGrd5UEVgw==
+  dependencies:
+    "@babel/runtime" "^7.10.5"
+    remove-accents "0.4.2"
+
 matchmediaquery@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.2.1.tgz#223c7005793de03e47ce92b13285a72c44ada2cf"
@@ -14671,6 +14686,20 @@ react-popper@^1.3.7:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
+react-query-devtools@^3.0.0-beta:
+  version "3.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/react-query-devtools/-/react-query-devtools-3.0.0-beta.1.tgz#0eab3925c7f219887baed1bb037f0a8b6ee530cc"
+  integrity sha512-Yef2y/YQLO1t+zu0E+C/sZQDqT1o8DBdX+z0cmpJmPuNMYsT7ZE3rJY18sp0GCzxZVB05Rku1GKtQKAVUjz8og==
+  dependencies:
+    match-sorter "^4.1.0"
+
+react-query@^3.2.0-beta:
+  version "3.2.0-beta.24"
+  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.2.0-beta.24.tgz#a8fbda11de1c6a0f2bcd1c68901301ec464eff4d"
+  integrity sha512-l5/kLsxqXSa90/TN76dVEhHxhijippXupoU7JrKh8LlOCIuq6yEIYPUzGbBac/ZFftRyQr4ksuaMTygufsUDdg==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+
 react-responsive@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-4.1.0.tgz#01d129a35729c8f0373e79871cc8d5ecf6e22765"
@@ -15213,6 +15242,11 @@ relateurl@0.2.x, relateurl@^0.2.7:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
+remove-accents@0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
+  integrity sha1-CkPTqq4egNuRngeuJUsoXZ4ce7U=
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"