diff --git a/public/app/features/alerting/unified/components/rule-editor/QueryRows.tsx b/public/app/features/alerting/unified/components/rule-editor/QueryRows.tsx
index ccecd195812..42dddb36fec 100644
--- a/public/app/features/alerting/unified/components/rule-editor/QueryRows.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/QueryRows.tsx
@@ -124,8 +124,15 @@ export class QueryRows extends PureComponent<Props, State> {
         return item;
       }
 
-      return copyModel(item, settings.uid);
+      const previousSettings = this.getDataSourceSettings(item);
+
+      // Copy model if changing to a datasource of same type.
+      if (settings.type === previousSettings?.type) {
+        return copyModel(item, settings);
+      }
+      return newModel(item, settings);
     });
+
     onQueriesChange(updatedQueries);
   };
 
@@ -307,11 +314,34 @@ export class QueryRows extends PureComponent<Props, State> {
   }
 }
 
-function copyModel(item: AlertQuery, uid: string): Omit<AlertQuery, 'datasource'> {
+function copyModel(item: AlertQuery, settings: DataSourceInstanceSettings): Omit<AlertQuery, 'datasource'> {
   return {
     ...item,
-    model: omit(item.model, 'datasource'),
-    datasourceUid: uid,
+    model: {
+      ...omit(item.model, 'datasource'),
+      datasource: {
+        type: settings.type,
+        uid: settings.uid,
+      },
+    },
+    datasourceUid: settings.uid,
+  };
+}
+
+function newModel(item: AlertQuery, settings: DataSourceInstanceSettings): Omit<AlertQuery, 'datasource'> {
+  return {
+    refId: item.refId,
+    relativeTimeRange: item.relativeTimeRange,
+    queryType: '',
+    datasourceUid: settings.uid,
+    model: {
+      refId: item.refId,
+      hide: false,
+      datasource: {
+        type: settings.type,
+        uid: settings.uid,
+      },
+    },
   };
 }
 
diff --git a/public/app/features/query/components/QueryEditorRow.tsx b/public/app/features/query/components/QueryEditorRow.tsx
index 13c9b5fd521..a7401fcc1df 100644
--- a/public/app/features/query/components/QueryEditorRow.tsx
+++ b/public/app/features/query/components/QueryEditorRow.tsx
@@ -21,7 +21,7 @@ import {
   toLegacyResponseData,
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { AngularComponent, getAngularLoader } from '@grafana/runtime';
+import { AngularComponent, getAngularLoader, getDataSourceSrv } from '@grafana/runtime';
 import { Badge, ErrorBoundaryAlert, HorizontalGroup } from '@grafana/ui';
 import { OperationRowHelp } from 'app/core/components/QueryOperationRow/OperationRowHelp';
 import { QueryOperationAction } from 'app/core/components/QueryOperationRow/QueryOperationAction';
@@ -32,7 +32,6 @@ import {
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
-import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 
 import { RowActionComponents } from './QueryActionComponent';
 import { QueryEditorRowHeader } from './QueryEditorRowHeader';
@@ -138,7 +137,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
   }
 
   async loadDatasource() {
-    const dataSourceSrv = getDatasourceSrv();
+    const dataSourceSrv = getDataSourceSrv();
     let datasource: DataSourceApi;
     const dataSourceIdentifier = this.getQueryDataSourceIdentifier();
 
@@ -232,10 +231,20 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
     }
   }
 
+  waitingForDatasourceToLoad = (): boolean => {
+    // if we not yet have loaded the datasource in state the
+    // ds in props and the ds in state will have different values.
+    return this.props.dataSource.uid !== this.state.datasource?.uid;
+  };
+
   renderPluginEditor = () => {
     const { query, onChange, queries, onRunQuery, onAddQuery, app = CoreApp.PanelEditor, history } = this.props;
     const { datasource, data } = this.state;
 
+    if (this.waitingForDatasourceToLoad()) {
+      return null;
+    }
+
     if (datasource?.components?.QueryCtrl) {
       return <div ref={(element) => (this.element = element)} />;
     }