Trying to create an application in hilla(vaadin), which will list product and their details. For categorizing the product need to store the information related to category, but the issue facing while trying to list the category in a hilla/vaadin grid. From the endpoint returning a list of category and in the store consumed the list and try to display in the grid. While trying to run the application getting th error as "

Type 'Promise<void>' is missing the following properties from type

"

@Nonnull is specified in response of the list and in method still getting error

Below is the endpoint class

@Endpoint
@AnonymousAllowed
public class ProductEndpoint {

    private InterProductService productService;

    @Autowired
    public ProductEndpoint(InterProductService productService) {
        this.productService = productService;
    }

    public List<ProductDataList> fetchAllProducts() {
        return this.productService.fetchProducts("");
    }

    public @Nonnull List<@Nonnull ProductCategoryDataList> fetchAllProdCategory() {
        return this.productService.fetchProductCategory("");
    }

    @Nonnull
    public EndpointResponse saveCatgeory(@Nonnull CategoryDetails categoryDetails) {
        return this.productService.saveCategory(categoryDetails);
    }

}

Below is the store

export class ProductStore {
    constructor() {
        makeAutoObservable(
            this);
        this.fetchProductCatgeory();
    }

    async saveProductCategory(prodCategory: CategoryDetails) {
        const responseData = await ProductEndpoint.saveCatgeory(prodCategory);
        return responseData;
    }

    async fetchProductCatgeory() {
        const prodCatData = await ProductEndpoint.fetchAllProdCategory();
        runInAction(() => {
            return prodCatData;
        });
    }

}

Store class specific to that module of product and catgeory

export class CategoryListRegisterViewStore {

    categoryList: ProductCategoryDataList[] = [];

    constructor() {
        makeAutoObservable(
            this,
            {
                categoryList: observable.shallow,
            }
        );
        this.loadProductCategory();
    }

    loadProductCategory() {
        //return appStore.tricampCrmProductStore.fetchProductCatgeory();
        const prodCategory = appStore.tricampCrmProductStore.fetchProductCatgeory();
        runInAction(() => {
            this.categoryList = prodCategory;
        });
    }

    saveProductCategory(categoryDetails: CategoryDetails) {
        return appStore.tricampCrmProductStore.saveProductCategory(categoryDetails);
    }
}

export const categoryListRegisterViewStore = new CategoryListRegisterViewStore();

Html page with grid code is below

<vaadin-grid theme="row-stripes" .items="${categoryListRegisterViewStore.loadProductCategory}" >

<vaadin-grid-column header="Action" frozen-to-end auto-width flex-grow="0" ${columnBodyRenderer(this.actionRenderer,
    [])}>
</vaadin-grid-column>

Tried multiple methods like returning from the method directly but getting different error like AllItem is not iterate. While inspect the promise also came "undefined". So maybe i did some mistake, expecting someone can support to fix the issue

CodePudding user response：

There are multiple issues in your code:

1. The grid's items property is bound to the method for loading the categories. You should bind it to the categories loaded from that method, which should be stored in categoryListRegisterViewStore.categoryList:

<vaadin-grid theme="row-stripes" .items="${categoryListRegisterViewStore.categoryList}" > 

2. The CategoryListRegisterViewStore.loadProductCategory method tries to assign the result of fetchProductCatgeory, which returns a Promise, to the categoryList property, which is of type ProductCategoryDataList[]. That's where you're getting the type error from. You should wait for the promise to resolve and then store the result of the promise:

    async loadProductCategory() {
        const prodCategory = await appStore.tricampCrmProductStore.fetchProductCatgeory();
        runInAction(() => {
            this.categoryList = prodCategory;
        });
    }

3. Finally, the fetchProductCatgeory method is flawed. It doesn't return the result of the endpoint call, because you wrapped the return into a runInAction. Instead, just directly return the promise from the endpoint call:

    fetchProductCatgeory() {
        return ProductEndpoint.fetchAllProdCategory();
    }

At this point you might consider removing that method entirely and directly using the endpoint in loadProductCategory instead.