diff --git a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.test.tsx b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.test.tsx
index 92f7877a13a..6b5f666fe12 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.test.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.test.tsx
@@ -27,10 +27,13 @@ const defaultProps = {
 describe('QueryEditor', () => {
   it('should migrate the given query', async () => {
     const datasource = createMockDatasource();
+    const onChange = jest.fn();
     datasource.migrateQuery = jest.fn().mockReturnValue(defaultProps.query);
 
-    render(<QueryEditor {...defaultProps} datasource={datasource} />);
+    render(<QueryEditor {...defaultProps} datasource={datasource} onChange={onChange} />);
     await waitFor(() => expect(datasource.migrateQuery).toHaveBeenCalledTimes(1));
+    await waitFor(() => expect(onChange).toHaveBeenCalledTimes(1));
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith(defaultProps.query));
   });
 
   it('should set a known query type', async () => {
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
index 817ff119bd6..d513a9d1c3b 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
@@ -20,10 +20,13 @@ export const QueryEditor = (props: Props) => {
   const query = useMemo(() => {
     if (!migrated) {
       setMigrated(true);
-      return datasource.migrateQuery(oldQ);
+      const migratedQuery = datasource.migrateQuery(oldQ);
+      // Update the query once the migrations have been completed.
+      onChange({ ...migratedQuery });
+      return migratedQuery;
     }
     return oldQ;
-  }, [oldQ, datasource, migrated]);
+  }, [oldQ, datasource, onChange, migrated]);
 
   const sloQuery = { ...defaultSLOQuery(datasource), ...query.sloQuery };
   const onSLOQueryChange = (q: SLOQuery) => {
diff --git a/public/app/plugins/datasource/cloud-monitoring/datasource.ts b/public/app/plugins/datasource/cloud-monitoring/datasource.ts
index 60df2221082..0c5a9c70af1 100644
--- a/public/app/plugins/datasource/cloud-monitoring/datasource.ts
+++ b/public/app/plugins/datasource/cloud-monitoring/datasource.ts
@@ -223,14 +223,16 @@ export default class CloudMonitoringDatasource extends DataSourceWithBackend<
   // This is a manual port of the migration code in cloudmonitoring.go
   // DO NOT UPDATE THIS CODE WITHOUT UPDATING THE BACKEND CODE
   migrateQuery(query: CloudMonitoringQuery): CloudMonitoringQuery {
+    const { hide, refId, datasource, key, queryType, maxLines, metric, intervalMs, type, ...rest } = query as any;
     if (
       !query.hasOwnProperty('metricQuery') &&
       !query.hasOwnProperty('sloQuery') &&
       !query.hasOwnProperty('timeSeriesQuery') &&
       !query.hasOwnProperty('timeSeriesList')
     ) {
-      const { hide, refId, datasource, key, queryType, maxLines, metric, intervalMs, type, ...rest } = query as any;
       return {
+        datasource,
+        key,
         refId,
         intervalMs,
         hide,