Version

5.0.3

Reproduction link

https://github.com/penpenpng/colada-loader-bug-repro

Steps to reproduce

npm install
npm run dev

And click the case1 link.

What is expected?

I am looking for one of the following:

• If my implementation is invalid, a recommended way to achieve sequential, individually cached API calls using Data Loaders.
• If the documentation regarding Nested Loaders is misleading, an update to the docs.
• If this is a bug in the Colada Loader implementation, a fix for the context loss.

What is actually happening?

Navigation fails with the warning [Vue warn]: inject() can only be used inside setup() or functional components. when using nested Colada Loaders.

In my application, I need to call two APIs during page initialization. The second call depends on the result of the first one, so they must be executed sequentially. I also want these API calls to be cached individually by Pinia Colada.

I defined the loaders as follows:

// Dummy APIs
const getNext = async (x: number | string) => {
  return new Promise<number>((resolve) => {
    setTimeout(() => {
      resolve(Number(x) + 1);
    }, 100);
  });
};

const NEXT_QUERY_KEY = (x: number | string) => ["next", x];

// Data Loaders
export const useNextLoader = defineColadaLoader({
  key: (route) => NEXT_QUERY_KEY(route.params.value),
  query: (route) => getNext(route.params.value),
});

export const useNextNextLoader = defineBasicLoader(async () => {
  const next = await useNextLoader();

  const useNextNextLoader = defineColadaLoader({
    key: () => NEXT_QUERY_KEY(next),
    query: () => getNext(next),
  });

  return useNextNextLoader();
});

I assumed this was valid based on the Nested Loader constraints, and I believe defineColadaLoader shouldn't be context-dependent. However, this causes the inject() warning, likely because the Colada Loader cannot find the currentContext.

Interestingly, wrapping the first loader with withLoaderContext() seems to resolve the issue, even though the documentation suggests it shouldn't be necessary in this case:

-  const next = await useNextLoader();
+  const next = await withLoaderContext(useNextLoader());