Typescript does not recognize undefined return value of non-lazy imported pinia colada loader.

[JarvisH]

Am not sure if I am doing something wrong but according to the documentation:

When using a loader in a non-page component, you must export the loader from the page components where it is used. If you only import and use the loader in a regular component, the router will not recognize it and won't trigger or await it during navigation.

A loader which looks like this:

const useMetadataData = defineColadaLoader({
  query: () => graphQLClient.request(getMetadataDocument),
  key: ['metadata'],
  staleTime: Infinity
})

and ist exported from a page component like this:

// /pages/metadata/[id].vue
<script lang="ts">
  import useMetadataData from '@/loaders/use-metadata-data'
  export { useMetadataData }
<script>

to then be finally imported into a component like this:

import { useMetadataData } from '@/pages/metadata/[id].vue'
const { data } = useMetadataData()

is not properly recognized by typescript. data.value is undefined until the promise is resolved, but it is only marked as undefined by typescript if the loader has lazy:true set.

Note that the component in question is not a child of the page component where the loader is exported.

[posva]

It sounds like the component that consumes the data loader is used and mounted before the navigation takes places and therefore before the data loading

[JarvisH]

That is correct. I am not sure if it is even intended to work this way as the documentation is not entirely clear on the subject. I understood the documentation to mean, that any component can use a data-loader from a page-component, but if I am interpreting your answer correctly, it means that only nested child components of pages can use them, i.e. the Page component needs to be mounted for it to work?

And I should note, mounting the component does trigger the loader except it is done lazily, which is fine and expected, but as mentioned in the above comment, the types do not match up.

[posva]

It’s not about the route component mounting first. It’s about the navigation happening and finishing before any component using the data loader (including the route component) mounts

it works too, but you should mark the loader as lazy

[JarvisH]

Thank you!