diff --git a/public/app/features/alerting/unified/components/rule-editor/RecordingRuleEditor.tsx b/public/app/features/alerting/unified/components/rule-editor/RecordingRuleEditor.tsx
index 7e3167768f5..c75398208ae 100644
--- a/public/app/features/alerting/unified/components/rule-editor/RecordingRuleEditor.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/RecordingRuleEditor.tsx
@@ -6,7 +6,10 @@ import { PanelData, CoreApp, GrafanaTheme2, LoadingState } from '@grafana/data';
 import { getDataSourceSrv } from '@grafana/runtime';
 import { DataQuery } from '@grafana/schema';
 import { useStyles2 } from '@grafana/ui';
+import { DataSourceType } from 'app/features/alerting/unified/utils/datasource';
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
+import { QueryErrorAlert } from 'app/features/query/components/QueryErrorAlert';
+import { LokiQueryType } from 'app/plugins/datasource/loki/dataquery.gen';
 import { AlertQuery } from 'app/types/unified-alerting-dto';
 
 import { isPromOrLokiQuery } from '../../utils/rule-form';
@@ -49,13 +52,13 @@ export const RecordingRuleEditor: FC<RecordingRuleEditorProps> = ({
   }, [dataSourceName]);
 
   const handleChangedQuery = (changedQuery: DataQuery) => {
-    const query = queries[0];
-    const dataSourceId = getDataSourceSrv().getInstanceSettings(dataSourceName)?.uid;
-
-    if (!isPromOrLokiQuery(changedQuery) || !dataSourceId) {
+    if (!isPromOrLokiQuery(changedQuery) || !dataSource) {
       return;
     }
 
+    const [query] = queries;
+    const { uid: dataSourceId, type } = dataSource;
+    const isLoki = type === DataSourceType.Loki;
     const expr = changedQuery.expr;
 
     const merged = {
@@ -72,7 +75,10 @@ export const RecordingRuleEditor: FC<RecordingRuleEditorProps> = ({
         instant: changedQuery.instant,
         range: changedQuery.range,
         // Query type is used by Loki queries
-        queryType: changedQuery.queryType,
+        // On first render/when creating a recording rule, the query type is not set
+        // unless the user has changed it betwee range/instant. The cleanest way to handle this
+        // is to default to instant, or whatever the changed type is
+        queryType: isLoki ? changedQuery.queryType || LokiQueryType.Instant : changedQuery.queryType,
         legendFormat: changedQuery.legendFormat,
       },
     };
@@ -95,14 +101,19 @@ export const RecordingRuleEditor: FC<RecordingRuleEditorProps> = ({
   return (
     <>
       {queries.length && (
-        <QueryEditor
-          query={queries[0]}
-          queries={queries}
-          app={CoreApp.UnifiedAlerting}
-          onChange={handleChangedQuery}
-          onRunQuery={runQueries}
-          datasource={dataSource}
-        />
+        <>
+          <QueryEditor
+            query={queries[0]}
+            queries={queries}
+            app={CoreApp.UnifiedAlerting}
+            onChange={handleChangedQuery}
+            onRunQuery={runQueries}
+            datasource={dataSource}
+          />
+          {(data?.errors || []).map((err) => {
+            return <QueryErrorAlert key={err.message} error={err} />;
+          })}
+        </>
       )}
 
       {data && (
diff --git a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx
index 39c3123c0b8..a5c9ebac579 100644
--- a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx
@@ -391,7 +391,7 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange }: P
           <RecordingRuleEditor
             dataSourceName={dataSourceName}
             queries={queries}
-            runQueries={runQueriesPreview}
+            runQueries={() => runQueriesPreview()}
             onChangeQuery={onChangeRecordingRulesQueries}
             panelData={queryPreviewData}
           />