Partial loading of query results for modified Redash 2025.08 (#14)

* Reapply changes from PR #2
* Fix issue with 'encoding' parameter
* Clean up after cherry-pick
* yarn prettier
* Allow the admin reporting user

Author: wtfiwtz

client/app/lib/useQueryResultData.js

@@ -20,5 +20,9 @@ function getQueryResultData(queryResult, queryResultStatus = null) {
 export default function useQueryResultData(queryResult) {
   // make sure it re-executes when queryResult status changes
   const queryResultStatus = invoke(queryResult, "getStatus");
-  return useMemo(() => getQueryResultData(queryResult, queryResultStatus), [queryResult, queryResultStatus]);
+  const queryResultRowCount = get(queryResult, "query_result.data.rows.length");
+  return useMemo(
+    () => getQueryResultData(queryResult, queryResultStatus),
+    [queryResult, queryResultStatus, queryResultRowCount]
+  );
 }

client/app/pages/alert/Alert.jsx

@@ -124,6 +124,20 @@ class Alert extends React.Component {
       });
   };
 
+  handleResult = (queryResult) => {
+    if (this._isMounted) {
+      this.setState({ queryResult });
+      let { column } = this.state.alert.options;
+      const columns = queryResult.getColumnNames();
+
+      // default to first column name if none chosen, or irrelevant in current query
+      if (!column || !includes(columns, column)) {
+        column = head(queryResult.getColumnNames());
+      }
+      this.setAlertOptions({ column });
+    }
+  };
+
   onQuerySelected = (query) => {
     this.setState(({ alert }) => ({
       alert: Object.assign(alert, { query }),
@@ -132,19 +146,9 @@ class Alert extends React.Component {
 
     if (query) {
       // get cached result for column names and values
-      new QueryService(query).getQueryResultPromise().then((queryResult) => {
-        if (this._isMounted) {
-          this.setState({ queryResult });
-          let { column } = this.state.alert.options;
-          const columns = queryResult.getColumnNames();
-
-          // default to first column name if none chosen, or irrelevant in current query
-          if (!column || !includes(columns, column)) {
-            column = head(queryResult.getColumnNames());
-          }
-          this.setAlertOptions({ column });
-        }
-      });
+      const promises = new QueryService(query).getQueryResultPromises();
+      promises[0].then((queryResult) => this.handleResult(queryResult));
+      promises[1].then((queryResult) => this.handleResult(queryResult));
     }
   };
 

client/app/pages/queries/QueryView.jsx

@@ -54,6 +54,7 @@ function QueryView(props) {
   const {
     queryResult,
     loadedInitialResults,
+    loadedFullResults,
     isExecuting,
     executionStatus,
     executeQuery,
@@ -71,7 +72,7 @@ function QueryView(props) {
     setQuery(newQuery);
     setSelectedVisualization(visualization.id);
   });
-  const editVisualization = useEditVisualizationDialog(query, queryResult, newQuery => setQuery(newQuery));
+  const editVisualization = useEditVisualizationDialog(query, queryResult, (newQuery) => setQuery(newQuery));
   const deleteVisualization = useDeleteVisualization(query, setQuery);
 
   const doExecuteQuery = useCallback(
@@ -97,7 +98,8 @@ function QueryView(props) {
       className={cx("query-page-wrapper", {
         "query-view-fullscreen": fullscreen,
         "query-fixed-layout": isFixedLayout,
-      })}>
+      })}
+    >
       <div className="container w-100">
         <QueryPageHeader
           query={query}
@@ -112,7 +114,8 @@ function QueryView(props) {
                   type="primary"
                   shortcut="mod+enter, alt+enter, ctrl+enter"
                   disabled={!queryFlags.canExecute || isExecuting || areParametersDirty}
-                  onClick={doExecuteQuery}>
+                  onClick={doExecuteQuery}
+                >
                   Refresh
                 </QueryViewButton>
               )}
@@ -177,7 +180,8 @@ function QueryView(props) {
                     type="primary"
                     disabled={!queryFlags.canExecute || areParametersDirty}
                     loading={isExecuting}
-                    onClick={doExecuteQuery}>
+                    onClick={doExecuteQuery}
+                  >
                     {!isExecuting && <i className="zmdi zmdi-refresh m-r-5" aria-hidden="true" />}
                     Refresh Now
                   </Button>
@@ -186,6 +190,9 @@ function QueryView(props) {
               canRefresh={policy.canRun(query)}
             />
           )}
+          {loadedInitialResults && !loadedFullResults && (
+            <div style={{ color: "orange", textAlign: "center" }}>Still loading more results...</div>
+          )}
           <div className="query-results-footer">
             {queryResult && !queryResult.getError() && (
               <QueryExecutionMetadata
@@ -201,7 +208,8 @@ function QueryView(props) {
                     title="Toggle Fullscreen"
                     type="default"
                     shortcut="alt+f"
-                    onClick={toggleFullscreen}>
+                    onClick={toggleFullscreen}
+                  >
                     {fullscreen ? <FullscreenExitOutlinedIcon /> : <FullscreenOutlinedIcon />}
                   </QueryViewButton>
                 }
@@ -236,6 +244,6 @@ routes.register(
   "Queries.View",
   routeWithUserSession({
     path: "/queries/:queryId",
-    render: pageProps => <QueryViewPage {...pageProps} />,
+    render: (pageProps) => <QueryViewPage {...pageProps} />,
   })
 );

client/app/pages/queries/hooks/useQueryExecute.js

@@ -23,6 +23,7 @@ export default function useQueryExecute(query) {
     queryResult: null,
     isExecuting: false,
     loadedInitialResults: false,
+    loadedFullResults: false,
     executionStatus: null,
     isCancelling: false,
     cancelCallback: null,
@@ -61,52 +62,59 @@ export default function useQueryExecute(query) {
       },
     });
 
-    const onStatusChange = status => {
+    const onStatusChange = (status) => {
       if (queryResultInExecution.current === newQueryResult) {
         setExecutionState({ updatedAt: newQueryResult.getUpdatedAt(), executionStatus: status });
       }
     };
 
-    newQueryResult
-      .toPromise(onStatusChange)
-      .then(queryResult => {
-        if (queryResultInExecution.current === newQueryResult) {
-          // TODO: this should probably belong in the QueryEditor page.
-          if (queryResult && queryResult.query_result.query === query.query) {
-            query.latest_query_data_id = queryResult.getId();
-            query.queryResult = queryResult;
-          }
-
-          if (executionState.loadedInitialResults) {
-            notifications.showNotification("Redash", `${query.name} updated.`);
-          }
-
-          setExecutionState({
-            queryResult,
-            loadedInitialResults: true,
-            error: null,
-            isExecuting: false,
-            isCancelling: false,
-            executionStatus: null,
-          });
+    const successResult = (queryResult, instance) => {
+      if (queryResultInExecution.current === newQueryResult) {
+        // TODO: this should probably belong in the QueryEditor page.
+        if (queryResult && queryResult.query_result.query === query.query) {
+          query.latest_query_data_id = queryResult.getId();
+          query.queryResult = queryResult;
         }
-      })
-      .catch(queryResult => {
-        if (queryResultInExecution.current === newQueryResult) {
-          if (executionState.loadedInitialResults) {
-            notifications.showNotification("Redash", `${query.name} failed to run: ${queryResult.getError()}`);
-          }
-
-          setExecutionState({
-            queryResult,
-            loadedInitialResults: true,
-            error: queryResult.getError(),
-            isExecuting: false,
-            isCancelling: false,
-            executionStatus: ExecutionStatus.FAILED,
-          });
+
+        if (executionState.loadedInitialResults) {
+          notifications.showNotification("Redash", `${query.name} updated.`);
         }
-      });
+
+        setExecutionState({
+          queryResult,
+          loadedInitialResults: true,
+          loadedFullResults: instance > 0,
+          error: null,
+          isExecuting: false,
+          isCancelling: false,
+          executionStatus: null,
+        });
+      }
+    };
+
+    const errorResult = (queryResult) => {
+      if (queryResultInExecution.current === newQueryResult) {
+        if (executionState.loadedInitialResults) {
+          notifications.showNotification("Redash", `${query.name} failed to run: ${queryResult.getError()}`);
+        }
+
+        setExecutionState({
+          queryResult,
+          loadedInitialResults: true,
+          loadedFullResults: true,
+          error: queryResult.getError(),
+          isExecuting: false,
+          isCancelling: false,
+          executionStatus: ExecutionStatus.FAILED,
+        });
+      }
+    };
+
+    const promises = newQueryResult.toPromise(onStatusChange);
+    promises[0].then((queryResult) => successResult(queryResult, 0)).catch((queryResult) => errorResult(queryResult));
+    if (promises[1]) {
+      promises[1].then((queryResult) => successResult(queryResult, 1)).catch((queryResult) => errorResult(queryResult));
+    }
   });
 
   const queryRef = useRef(query);