fix(client-vue3): Avoid Maximum recursive updates exceeded

Author: AyHaski

packages/cubejs-client-vue3/src/QueryBuilder.js

@@ -381,19 +381,27 @@ export default {
         };
 
         this.chartType = chartType || this.chartType;
-        this.pivotConfig = ResultSet.getNormalizedPivotConfig(
+        let pivot = ResultSet.getNormalizedPivotConfig(
           validatedQuery,
           pivotConfig !== undefined ? pivotConfig : this.pivotConfig
         );
-        this.copyQueryFromProps(validatedQuery);
+        if (!equals(pivot, this.pivotConfig)) {
+          this.pivotConfig = pivot;
+        }
+
+        if (!areQueriesEqual(this.prevValidatedQuery, validatedQuery)) {
+          this.copyQueryFromProps(validatedQuery);
+        }
       }
 
       // query heuristics should only apply on query change (not applied to the initial query)
       if (this.prevValidatedQuery !== null) {
         this.skipHeuristics = false;
       }
 
-      this.prevValidatedQuery = validatedQuery;
+      if (!areQueriesEqual(this.prevValidatedQuery, validatedQuery)) {
+        this.prevValidatedQuery = validatedQuery;
+      }
       return validatedQuery;
     },
   },

packages/cubejs-client-vue3/tests/unit/QueryBuilder.spec.js

@@ -928,6 +928,80 @@ describe('QueryBuilder.vue', () => {
         expect(wrapper.vm.pivotConfig).toEqual(expectedPivotForLine);
         expect(wrapper.vm.chartType).toBe('line');
       });
+      it('should not reassign validatedQuery if it has not changed', async () => {
+        const cube = createCubeApi();
+        jest
+          .spyOn(cube, 'request')
+          .mockImplementation(fetchMock(load))
+          .mockImplementationOnce(fetchMock(meta));
+
+        const wrapper = shallowMount(QueryBuilder, {
+          propsData: {
+            cubeApi: cube,
+            query: {
+              measures: ['Orders.count'],
+              timeDimensions: [
+                {
+                  dimension: 'Orders.createdAt',
+                },
+              ],
+            },
+          },
+        });
+
+        const initialValidatedQuery = {
+          measures: ['measure1'],
+          dimensions: ['dimension1'],
+        };
+        wrapper.setData({ prevValidatedQuery: initialValidatedQuery });
+
+        wrapper.setData({
+          measures: [{ name: 'measure1' }],
+          dimensions: [{ name: 'dimension1' }],
+        });
+
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.vm.prevValidatedQuery.measures).toEqual(initialValidatedQuery.measures);
+        expect(wrapper.vm.prevValidatedQuery.dimensions).toEqual(initialValidatedQuery.dimensions);
+      });
+
+      it('should reassign validatedQuery if it has changed', async () => {
+        const cube = createCubeApi();
+        jest
+          .spyOn(cube, 'request')
+          .mockImplementation(fetchMock(load))
+          .mockImplementationOnce(fetchMock(meta));
+
+        const wrapper = shallowMount(QueryBuilder, {
+          propsData: {
+            cubeApi: cube,
+            query: {
+              measures: ['Orders.count'],
+              timeDimensions: [
+                {
+                  dimension: 'Orders.createdAt',
+                },
+              ],
+            },
+          },
+        });
+        const initialValidatedQuery = {
+          measures: ['measure1'],
+          dimensions: ['dimension1'],
+        };
+        wrapper.setData({ prevValidatedQuery: initialValidatedQuery });
+
+        wrapper.setData({
+          measures: [{ name: 'measure2' }],
+          dimensions: [{ name: 'dimension1' }],
+        });
+
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.vm.prevValidatedQuery.measures).not.toEqual(initialValidatedQuery.measures);
+        expect(wrapper.vm.prevValidatedQuery.dimensions).toEqual(initialValidatedQuery.dimensions);
+      });
     });
     describe('orderMembers', () => {
       it('does not contain time dimension if granularity is set to none', async () => {
@@ -1001,6 +1075,48 @@ describe('QueryBuilder.vue', () => {
             ])
         );
       });
+      it('calls copyQueryFromProps if query is changed', async () => {
+        const cube = createCubeApi();
+        jest
+          .spyOn(cube, 'request')
+          .mockImplementation(fetchMock(load))
+          .mockImplementationOnce(fetchMock(meta));
+
+        const copyQueryFromProps = jest.spyOn(QueryBuilder.methods, 'copyQueryFromProps');
+
+        const wrapper = shallowMount(QueryBuilder, {
+          propsData: {
+            cubeApi: cube,
+            query: {
+              measures: ['Orders.count'],
+              timeDimensions: [
+                {
+                  dimension: 'Orders.createdAt',
+                },
+              ],
+            },
+          },
+        });
+        await flushPromises();
+
+        await wrapper.vm.$nextTick();
+        expect(wrapper.vm.measures.length).toEqual(1);
+        expect(wrapper.vm.measures[0].name).toEqual('Orders.count');
+
+        await wrapper.vm.$nextTick();
+
+        expect(copyQueryFromProps).toHaveBeenCalled();
+        expect(copyQueryFromProps).toHaveBeenCalledTimes(1);
+        const initialValidatedQuery = {
+          measures: ['measure1'],
+          dimensions: ['dimension1'],
+        };
+        wrapper.setData({ prevValidatedQuery: initialValidatedQuery });
+        await wrapper.vm.$nextTick();
+
+        expect(copyQueryFromProps).toHaveBeenCalledTimes(2);
+        copyQueryFromProps.mockRestore();
+      });
     });
   });
 });