diff --git a/public/app/features/datasources/state/actions.test.ts b/public/app/features/datasources/state/actions.test.ts
index 6a007639234..594a1eab6fd 100644
--- a/public/app/features/datasources/state/actions.test.ts
+++ b/public/app/features/datasources/state/actions.test.ts
@@ -4,6 +4,7 @@ import {
   InitDataSourceSettingDependencies,
   testDataSource,
   TestDataSourceDependencies,
+  getDataSourceUsingUidOrId,
 } from './actions';
 import { getMockPlugin, getMockPlugins } from '../../plugins/__mocks__/pluginMocks';
 import { thunkTester } from 'test/core/thunk/thunkTester';
@@ -17,6 +18,15 @@ import {
 import { initDataSourceSettings } from '../state/actions';
 import { ThunkResult, ThunkDispatch } from 'app/types';
 import { GenericDataSourcePlugin } from '../settings/PluginSettings';
+import { getBackendSrv } from 'app/core/services/backend_srv';
+import { BackendSrvRequest, FetchResponse } from '@grafana/runtime';
+import { of } from 'rxjs';
+
+jest.mock('app/core/services/backend_srv');
+jest.mock('@grafana/runtime', () => ({
+  ...((jest.requireActual('@grafana/runtime') as unknown) as object),
+  getBackendSrv: jest.fn(),
+}));
 
 const getBackendSrvMock = () =>
   ({
@@ -54,6 +64,79 @@ const failDataSourceTest = async (error: object) => {
   return dispatchedActions;
 };
 
+describe('getDataSourceUsingUidOrId', () => {
+  const uidResponse = {
+    ok: true,
+    data: {
+      id: 111,
+      uid: 'abcdefg',
+    },
+  };
+
+  const idResponse = {
+    ok: true,
+    data: {
+      id: 222,
+      uid: 'xyz',
+    },
+  };
+
+  it('should return UID response data', async () => {
+    (getBackendSrv as jest.Mock).mockReturnValueOnce({
+      fetch: (options: BackendSrvRequest) => {
+        return of(uidResponse as FetchResponse);
+      },
+    });
+
+    expect(await getDataSourceUsingUidOrId('abcdefg')).toBe(uidResponse.data);
+  });
+
+  it('should return ID response data', async () => {
+    const uidResponse = {
+      ok: false,
+    };
+
+    (getBackendSrv as jest.Mock)
+      .mockReturnValueOnce({
+        fetch: (options: BackendSrvRequest) => {
+          return of(uidResponse as FetchResponse);
+        },
+      })
+      .mockReturnValueOnce({
+        fetch: (options: BackendSrvRequest) => {
+          return of(idResponse as FetchResponse);
+        },
+      });
+
+    expect(await getDataSourceUsingUidOrId(222)).toBe(idResponse.data);
+  });
+
+  it('should return empty response data', async () => {
+    // @ts-ignore
+    delete window.location;
+    window.location = {} as any;
+
+    const uidResponse = {
+      ok: false,
+    };
+
+    (getBackendSrv as jest.Mock)
+      .mockReturnValueOnce({
+        fetch: (options: BackendSrvRequest) => {
+          return of(uidResponse as FetchResponse);
+        },
+      })
+      .mockReturnValueOnce({
+        fetch: (options: BackendSrvRequest) => {
+          return of(idResponse as FetchResponse);
+        },
+      });
+
+    expect(await getDataSourceUsingUidOrId('222')).toStrictEqual({});
+    expect(window.location.href).toBe('/datasources/edit/xyz');
+  });
+});
+
 describe('Name exists', () => {
   const plugins = getMockPlugins(5);
 
diff --git a/public/app/features/datasources/state/actions.ts b/public/app/features/datasources/state/actions.ts
index d8d8d296ad2..9b773f042f9 100644
--- a/public/app/features/datasources/state/actions.ts
+++ b/public/app/features/datasources/state/actions.ts
@@ -138,7 +138,7 @@ export function loadDataSource(uid: string): ThunkResult<void> {
 /**
  * Get data source by uid or id, if old id detected handles redirect
  */
-async function getDataSourceUsingUidOrId(uid: string): Promise<DataSourceSettings> {
+export async function getDataSourceUsingUidOrId(uid: string | number): Promise<DataSourceSettings> {
   // Try first with uid api
   try {
     const byUid = await lastValueFrom(
@@ -157,7 +157,7 @@ async function getDataSourceUsingUidOrId(uid: string): Promise<DataSourceSetting
   }
 
   // try lookup by old db id
-  const id = parseInt(uid, 10);
+  const id = typeof uid === 'string' ? parseInt(uid, 10) : uid;
   if (!Number.isNaN(id)) {
     const response = await lastValueFrom(
       getBackendSrv().fetch<DataSourceSettings>({
@@ -167,6 +167,12 @@ async function getDataSourceUsingUidOrId(uid: string): Promise<DataSourceSetting
       })
     );
 
+    // If the uid is a number, then this is a refresh on one of the settings tabs
+    // and we can return the response data
+    if (response.ok && typeof uid === 'number' && response.data.id === uid) {
+      return response.data;
+    }
+
     // Not ideal to do a full page reload here but so tricky to handle this
     // otherwise We can update the location using react router, but need to
     // fully reload the route as the nav model page index is not matching with
diff --git a/public/app/features/datasources/state/navModel.ts b/public/app/features/datasources/state/navModel.ts
index 1a32966e4ec..382d8643871 100644
--- a/public/app/features/datasources/state/navModel.ts
+++ b/public/app/features/datasources/state/navModel.ts
@@ -69,9 +69,9 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat
     navModel.children!.push({
       active: false,
       icon: 'database',
-      id: `datasource-cache-${dataSource.id}`,
+      id: `datasource-cache-${dataSource.uid}`,
       text: 'Cache',
-      url: `datasources/edit/${dataSource.id}/cache`,
+      url: `datasources/edit/${dataSource.uid}/cache`,
       hideFromTabs: !pluginMeta.isBackend || !config.caching.enabled,
     });
   }