Improve and harden data flow #173

New Issue

2025-12-10T09:43:28+01:00

vollstock commented

2025-12-10 09:43:28 +01:00

Loading state

DB → View → Sub-Component
Sub-Component → View → DB

View recieves initial data load using Inertia
View loads further data using Axios and the REST-API
View passes data to sub-component
1. Sub-component has register of things to load and state
2. Sub-component loads additional data using Axios and the REST-API
3. When all things are loaded, loading is done
4. Only now, Watchers of data will emit update events to parent view

Something like this:

const dataRequests = [{
    url: "/api/<route1>",
    done: false,
    callback: () => { /* update some value */ }
}, {
    url: "/api/<route2>",
    done: false,
    callback: (data) => { /* update some value */ }
}]

onMounted(async () => {
    try {
        const promises = []
        
        for(const request in dataRequests) {
                promises.push(axios.get(request.url))
        }
        
        const responses = await Promise.all(promises)

        for (let i = 0; i < dataRequests.length; i++) {
            dataRequests[i][calback](responses[i].data );
            // maybe responses come in different order, though
        }
        
    } catch (error) {
        toast.error('Fehler beim Laden der Daten', error || String(error))
    }
})

const loading = computed(() => {
    return all dataRequests done
})

watch('items', () => {
    if(loading) return
    
   // ...
}, { deep: true })

Reusability

Read up whether this can be done as a reusable pattern.

# Loading state DB → View → Sub-Component Sub-Component → View → DB 1. View recieves initial data load using Inertia 2. View loads further data using Axios and the REST-API 3. View passes data to sub-component 1. Sub-component has register of things to load and state 2. Sub-component loads additional data using Axios and the REST-API 3. When all things are loaded, loading is done 4. Only now, Watchers of data will emit update events to parent view Something like this: ```ts const dataRequests = [{ url: "/api/<route1>", done: false, callback: () => { /* update some value */ } }, { url: "/api/<route2>", done: false, callback: (data) => { /* update some value */ } }] onMounted(async () => { try { const promises = [] for(const request in dataRequests) { promises.push(axios.get(request.url)) } const responses = await Promise.all(promises) for (let i = 0; i < dataRequests.length; i++) { dataRequests[i][calback](responses[i].data ); // maybe responses come in different order, though } } catch (error) { toast.error('Fehler beim Laden der Daten', error || String(error)) } }) const loading = computed(() => { return all dataRequests done }) watch('items', () => { if(loading) return // ... }, { deep: true }) ``` # Reusability Read up whether this can be done as a reusable pattern.

vollstock added this to the 0.9 milestone 2025-12-10 09:43:28 +01:00

vollstock added the Design label 2025-12-10 09:43:28 +01:00

vollstock added this to the 0.9 MVP project 2025-12-10 09:43:28 +01:00

vollstock moved this to In Progress in 0.9 MVP on 2025-12-10 09:43:38 +01:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Tooloop/Caramel-CRM#173