How do I diagnose strange data-loader behaviour?

[pete-intranel]

Hi, I'm unable to work out why I'm getting various weird behaviours with both basic loaders and colada loaders while adding to an existing project. I tried to create a minimal reproduction, but it works fine, so something is different but I can't work out what. Hopefully someone can help point me in the right direction?!

For instance, here is my loader:

import { getProjects } from '@/api/projects.api'
import { parsePageQuery, parsePageSizeQuery } from '@/utils/parsing'

export const useProjects = defineColadaLoader('/projects', {
  key: (to) => ['projects', { page: parsePageQuery(to.query.page), pageSize: parsePageSizeQuery(to.query.pageSize) }],
  query: async (to) => {
    const page = parsePageQuery(to.query.page)
    const pageSize = parsePageSizeQuery(to.query.pageSize)
    const projects = await getProjects({ page, pageSize })
    console.info(`Returning project count: ${projects?.items?.length}`)
    return projects
  },
  staleTime: 5000,
  lazy: false,
})

I get undefined during the data loading (in this example, the pageSize param has changed). I'm watching data and isLoading and outputting to the console:

const { data: projects, isLoading, error, reload } = useProjects()
watch (projects, data => console.info(`DataLoader: data: ${data?.items?.length}`))
watch (isLoading, loading => console.info(`DataLoader: isLoading: ${loading}`))

And this is what I see:

Querying page '1' with size '2'
ProjectList.vue:59 DataLoader: data: undefined
ProjectList.vue:62 DataLoader: isLoading: true
projects.ts:13 Returning project count: 2
ProjectList.vue:59 DataLoader: data: 2
ProjectList.vue:62 DataLoader: isLoading: false

Before isLoading is set to true, data is set to undefined. Just before isLoading is set to false, the data is updated with the new result. This behaviour repeats as I navigate to another page of data:

Querying page '2' with size '2'
ProjectList.vue:59 DataLoader: data: undefined
ProjectList.vue:62 DataLoader: isLoading: true
projects.ts:13 Returning project count: 2
ProjectList.vue:59 DataLoader: data: 2
ProjectList.vue:62 DataLoader: isLoading: false

I saw this mentioned in another discussion (561) by @posva, but I can't work out what I'm looking for. I can't find any dataloader hooks in either the working project or the failing one so I assume I'm looking in the wrong place:

Try inspecting with vite inspect the generated files of vue-router/auto-routes. It's difficult to help without a reproduction

Note that this code works perfectly, as expected, when I create a new project from scratch, hence I need to dig deep to find out why I'm seeing this (and other) behaviour.

[posva]

From the code sample, it looks like your API returns undefined. I can offer paid support to help debug this directly in your project

[pete-intranel]

Thanks for the quick response. It doesn't return undefined as you can see in the console output:

Returning project count: 2

And that comes from

console.info(`Returning project count: ${projects?.items?.length}`)

The only thing that is undefined is the data in the data-loader until it is committed, and then it is available..

[posva]

Ah then it means you are not exporting the data loader from the page component

[pete-intranel]

Thanks for taking a look.
It is exported from the .vue page that uses it, and it's reacting fine to navigation. I'm using useRouteQuery from vueuse to change the query params.

1. The query is initiated, as you can see in the logs, with Querying page '2' with size '2'
2. But then data goes to undefined: DataLoader: data: undefined
3. Then isLoading goes to true
4. Then the query completes: Returning project count: 2
5. Then the new data is committed: DataLoader: data: 2
6. Then isLoading goes to false

I'm using this for pagination, and interestingly, once I've visited all the pages, it then works correctly. So:

1. I refresh (F5) with ?page=1&pageSize=2
2. Click next page: ?page=2&pageSize=2 and I get the weird behaviour described above
3. Click next page: ?page=3&pageSize=2 and I get the weird behaviour described above
4. Click previous page: ?page=2&pageSize=2 and now it works ok.

I'm happy to try to debug this with a little help to get started. I don't think it is anything simple as it's mostly working. Perhaps the Colada cache thinks there are items with the key already?

[pete-intranel]

I'm trying to spot differences between the app that works correctly and the one that doesn't, and so far this is all I can find.

In the working app, I can see my loader query in entry.
Below is the image of the one that doesn't work. No entry and an empty entries. This is resolved via load(route, router, void 0, parentEntry, true) further down, but there are no nested loaders so this seems a bit strange?

[pete-intranel]

And I believe I've found what's probably the root cause and it is documented as:

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.

I was exporting it from a component within a 'Page Component'. I assume therefore the definition of a 'Page Component' is a component directly associated with a route? If that is true, perhaps a bit more clarification in the documentation could help others?

But worse than that, it was kind of working in a reduced way, rather than to Fail-Fast. Is there some way to detect a bad configuration like this and throw a helpful exception? Somehow it's being detected as a nested loader without a parent, which is possibly the reason for the weird behaviour?

The documentation states "the router will not recognize it and won't trigger" but this particular part is apparently not true in my case.

Hopefully my ranting is useful? Thanks.

[posva]

The documentation is accurate in this case: it didn’t trigger on navigation. A component within a page component is not a page component. I find that self explanatory…