Administration: Why is repository.search called every few seconds?

Question

I want to override the order listing and add a new row to it which makes a search call. So far so good, but I dont understand why repositiory.search is called every few seconds. It doesnt matter if I put the search call in a method or as computed it is always called after a few seconds over and over?!?

import template from './sw-order-list.html.twig';

const { Component } = Shopware;
const { Criteria } = Shopware.Data;

Component.override('sw-order-list', {
    template,

    created() {
        this.repository = this.repositoryFactory.create('order_customer');
    },

    computed: {
        orderColumns() {
            const columns = this.$super('orderColumns');

            columns.push({
                property: 'customerOrdersCount',
                label: 'Test',
                allowResize: true,
                sortable: false,
                align: 'left'
            });

            const criteria = new Criteria(this.page, this.limit);
            const repository = this.repositoryFactory.create('order_customer');

            this.orders.forEach(function (entry) {
                criteria.addFilter(Criteria.equals('customer.id', entry.orderCustomer.customerId));
                const response = repository.search(criteria).then((result) => {                    
                    console.log(response);
                });
            });

            return columns;
        },
    },
});

If I remove the search call, it is only called once.

Answer 1

Just think for a second what you're doing here. You have a computed property orderColumns, which is reactive depending on the state of the same property of the superclass. You're pushing a new object to the columns array, the computed property of the superclass changes and as such the reactivity of your override's computed property is triggered. It's an endless loop and you keep executing the handler, pushing a new object into the columns each time.

Simply check if the column is already included and return early.

if (columns.filter(column => column.property === 'customerOrdersCount').length > 0) {
    return columns;
}

columns.push({
    property: 'customerOrdersCount',
    // ...
});

return columns;

I would further move the rest of the handler, as it is not really depending on the columns and computed properties aren't suited to making API requests with their reactive behavior. Maybe consider overriding the getList method instead.

async getList() {
    await this.$super('getList');

    const criteria = new Criteria(this.page, this.limit);
    const repository = this.repositoryFactory.create('order_customer');
    
    // ...
}