Description
A current and more or less common approach is to have a DataLoader on a parent route (i.e. *TabsView.vue) and pass the fetched data as props to the dynamic child routes. This approach causes certain issues:
- Typesafety: due to the dynamic routing we lose the typesafety on the props. This is a general problem with the dynamic routes and is not directly an issue with the loaders, but the solution of this issue would resolve this problem. So we can hit two birds with one stone here.
<!-- The parent route -->
<!-- DataSource is non-blocking -->
<DataSource
...
v-slot="{ data }"
>
<RouterView
v-slot="{ Component }"
>
<!-- at this point `data` is potentially undefined, I expect an error because of the defined props in the child -->
<component
:is="Component"
:data="data"
/>
</RouterView>
</DataSource><!-- The child route -->
<script lang="ts" setup>
const props = defineProps<{
data: DataplaneOverview // <-- expects to be defined
}>()
</script>
- A loader is shown on the entire route. We have different loader variants (spinner, skeleton, ...) and it would be great to display the variants depending on the type of feature that is about the be rendered once the data is fetched.
- Single responsibility: Those parent tabs routes have the responsibility to render the tabs based on the sub-routes of the router. The responsibility to fetch data that is going to be displayed should be moved to where the data is being used. This also means less dependency between parent and child and easier changes (replacement, addition, deletion of sub-routes).
The idea is now to remove the data fetching from the wiring routes as much as possible and move the data fetching closer to the actual features - move it into the sub-routes. Due to the shared DataSource/DataLoader HTTP requests, this should not cause a tremendous increase of requests.
Also refer to the first approach and the comments in #4058. The approach in there didn't work well because it meant a lot of hacky if-statements. So the probably better approach is to tackle this bottom-up and remove the props on the child routes first.
Description
A current and more or less common approach is to have a
DataLoaderon a parent route (i.e.*TabsView.vue) and pass the fetched data as props to the dynamic child routes. This approach causes certain issues:The idea is now to remove the data fetching from the wiring routes as much as possible and move the data fetching closer to the actual features - move it into the sub-routes. Due to the shared
DataSource/DataLoaderHTTP requests, this should not cause a tremendous increase of requests.Also refer to the first approach and the comments in #4058. The approach in there didn't work well because it meant a lot of hacky if-statements. So the probably better approach is to tackle this bottom-up and remove the props on the child routes first.