Documenting JavaScript types received from API in VueJS

Question

I'm using VueJS and have data coming as json via web API. The API is strongly typed, but in my Vue component, I don't have a good way of knowing what the types being passed are.

Given the following:

export default {
    data() {
        return {
            thisListOfThings:null,
            thatListOfThings: null
        }
    },
    components: { OtherComponents },
    mounted() {
        this.$axios.get('https://localhost:12345/home')
            .then(response => {
                this.thisListOfThings = response.data.theseThings;
                this.thatListOfThings = response.data.thoseThings;
            }
        );
    }
}

I know that these and that are only by going back to the server and looking at the API's viewmodels (or via postman or debuggers).

I think it'd be nice to have a dedicated set of classes within the frontend to describe the expected data, but I'm not sure quite how to handle it.

What would be a good pattern/approach for implementing a sort of "viewmodel" type in Vue?

Answer 1

You can use a validation library such as 'yup' to validate the schema of the object converted from the API JSON payload.

I'm not aware of having ViewModel in frontend architecture. However, in React, one uses Higher Order Components to abstract a component that implements logic to validate and populate fields and returns a presentational component that simply displays data. I'm sure there are similar patterns in Vue.js