Optimization of API calls on dynamic conditions

By using cachedValue it is possible to ensure that services that are used multiple times in a form can be called only once.

let cachedRow = null;
 const fetchData = () => {
 if (cachedRow) {
 return cachedRow;
 }
 cachedRow = new Promise((resolve, reject) => {
 return Api.request.get(`/dyn-table/TAS-configCO/values`).then(data => {
 resolve(data);
 }).catch(error => {
 console.error('There was a problem with the fetch operation:', error);
 reject(error);
 });
 });
 return cachedRow;
 }
 let cachedTableDepartments = null
 const fetchDepartmentsTable = (table) => {
 if (cachedTableDepartments) {
 return cachedTableDepartments;
 }
 cachedTableDepartments = new Promise((resolve, reject) => {
 return Api.request.get(`/dyn-table/${table}/values?total_count=false`).then(data => {
 resolve(data);
 }).catch(error => {
 console.error('There was a problem with the fetch operation:', error);
 reject(error);
 });
 });
 return cachedTableDepartments;
 }

Use in condition:

let isCompanyRelationshipHidden = false;
 let department = null;
 hideVarOn('companyRelationship', () => {
 if (vSync('contractDepartment') && department === vSync('contractDepartment')) return isCompanyRelationshipHidden;
 department = vSync('contractDepartment')
 return fetchData().then(payload => {
 let {
 items
 } = payload;
 items = items.filter(item => {
 return item.dtv_index === id;
 })
 const dtDepartments = items[0]?.col_7;
 const canRepresent = items[0]?.col_10
 if (canRepresent !== 'True' || !vSync('contractDepartment')) {
 isCompanyRelationshipHidden = true
 return true;
 }
 const department = references.contractDepartment.getValue();
 return fetchDepartmentsTable(dtDepartments).then(payload => {
 const {
 items
 } = payload;
 const canRepresent = items.find(item => item.dtv_index === department)?.col_2;
 isCompanyRelationshipHidden = canRepresent !== 'True';
 return canRepresent !== 'True'
 })
 })
 })