diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/src/clients/ChartClient.ts b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/src/clients/ChartClient.ts
index daddfa1b20fc..fe1bcb57a4f6 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/src/clients/ChartClient.ts
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/src/clients/ChartClient.ts
@@ -3,7 +3,6 @@ import {
   SupersetClient,
   SupersetClientInterface,
   RequestConfig,
-  Json,
   SupersetClientClass,
 } from '@superset-ui/connection';
 import { QueryFormData, Datasource } from '@superset-ui/query';
@@ -52,11 +51,10 @@ export default class ChartClient {
     if ('sliceId' in input) {
       const promise = this.client
         .get({
-          endpoint: `/api/v1/formData/?slice_id=${input.sliceId}`,
+          endpoint: `/api/v1/form_data/?slice_id=${input.sliceId}`,
           ...options,
         } as RequestConfig)
-        .then(response => response.json as Json)
-        .then(json => json.form_data as QueryFormData);
+        .then(response => response.json as QueryFormData);
 
       /*
        * If formData is also specified, override API result
@@ -88,7 +86,8 @@ export default class ChartClient {
 
       return this.client
         .post({
-          endpoint: useLegacyApi ? '/superset/explore_json/' : '/api/v1/query/',
+          headers: { 'Content-Type': 'application/json' },
+          endpoint: useLegacyApi ? '/superset/explore_json/' : '/api/v1/chart/data',
           postPayload: {
             [useLegacyApi ? 'form_data' : 'query_context']: buildQuery(formData),
           },
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/test/clients/ChartClient.test.ts b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/test/clients/ChartClient.test.ts
index ed6a32aceae8..bee82f430b43 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/test/clients/ChartClient.test.ts
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/test/clients/ChartClient.test.ts
@@ -9,6 +9,7 @@ import {
 } from '../../src';
 import { SliceIdAndOrFormData } from '../../src/clients/ChartClient';
 import { LOGIN_GLOB } from '../fixtures/constants';
+import { sankeyFormData } from '../fixtures/formData';
 
 describe('ChartClient', () => {
   let chartClient: ChartClient;
@@ -40,25 +41,12 @@ describe('ChartClient', () => {
   describe('.loadFormData({ sliceId, formData }, options)', () => {
     const sliceId = 123;
     it('fetches formData if given only sliceId', () => {
-      fetchMock.get(`glob:*/api/v1/formData/?slice_id=${sliceId}`, {
-        form_data: {
-          granularity: 'minute',
-          viz_type: 'line',
-        },
-      });
+      fetchMock.get(`glob:*/api/v1/form_data/?slice_id=${sliceId}`, sankeyFormData);
 
-      return expect(chartClient.loadFormData({ sliceId })).resolves.toEqual({
-        granularity: 'minute',
-        viz_type: 'line',
-      });
+      return expect(chartClient.loadFormData({ sliceId })).resolves.toEqual(sankeyFormData);
     });
     it('fetches formData from sliceId and merges with specify formData if both fields are specified', () => {
-      fetchMock.get(`glob:*/api/v1/formData/?slice_id=${sliceId}`, {
-        form_data: {
-          granularity: 'minute',
-          viz_type: 'line',
-        },
-      });
+      fetchMock.get(`glob:*/api/v1/form_data/?slice_id=${sliceId}`, sankeyFormData);
 
       return expect(
         chartClient.loadFormData({
@@ -69,6 +57,7 @@ describe('ChartClient', () => {
           },
         }),
       ).resolves.toEqual({
+        ...sankeyFormData,
         granularity: 'second',
         viz_type: 'bar',
       });
@@ -103,7 +92,7 @@ describe('ChartClient', () => {
       getChartBuildQueryRegistry().registerValue('word_cloud', (formData: QueryFormData) =>
         buildQueryContext(formData),
       );
-      fetchMock.post('glob:*/api/v1/query/', {
+      fetchMock.post('glob:*/api/v1/chart/data', {
         field1: 'abc',
         field2: 'def',
       });
@@ -139,7 +128,7 @@ describe('ChartClient', () => {
         }),
       );
 
-      fetchMock.post('glob:*/api/v1/query/', () =>
+      fetchMock.post('glob:*/api/v1/chart/data', () =>
         Promise.reject(new Error('Unexpected all to v1 API')),
       );
 
@@ -219,13 +208,11 @@ describe('ChartClient', () => {
   describe('.loadChartData({ sliceId, formData })', () => {
     const sliceId = 10120;
     it('loadAllDataNecessaryForAChart', () => {
-      fetchMock.get(`glob:*/api/v1/formData/?slice_id=${sliceId}`, {
-        form_data: {
-          granularity: 'minute',
-          viz_type: 'line',
-          datasource: '1__table',
-          color: 'living-coral',
-        },
+      fetchMock.get(`glob:*/api/v1/form_data/?slice_id=${sliceId}`, {
+        granularity: 'minute',
+        viz_type: 'line',
+        datasource: '1__table',
+        color: 'living-coral',
       });
 
       fetchMock.get('glob:*/superset/fetch_datasource_metadata?datasourceKey=1__table', {
@@ -233,7 +220,7 @@ describe('ChartClient', () => {
         schema: 'staging',
       });
 
-      fetchMock.post('glob:*/api/v1/query/', {
+      fetchMock.post('glob:*/api/v1/chart/data', {
         lorem: 'ipsum',
         dolor: 'sit',
         amet: true,