diff --git a/playground/src/pages/users/colada-loader.[id].vue b/playground/src/pages/users/colada-loader.[id].vue index 7f649a5d7..ab3d1ce19 100644 --- a/playground/src/pages/users/colada-loader.[id].vue +++ b/playground/src/pages/users/colada-loader.[id].vue @@ -26,6 +26,7 @@ const { status, error, isLoading, + asyncStatus, reload, refresh, } = useUserData() @@ -62,6 +63,8 @@ const {

status: {{ status }} + | + asyncStatus: {{ asyncStatus }}
isFetching: {{ isLoading }}

diff --git a/src/data-loaders/defineColadaLoader.ts b/src/data-loaders/defineColadaLoader.ts index c7804c8de..aed73fb5d 100644 --- a/src/data-loaders/defineColadaLoader.ts +++ b/src/data-loaders/defineColadaLoader.ts @@ -47,6 +47,12 @@ import { toLazyValue } from './createDataLoader' * Creates a data loader composable that can be exported by pages to attach the data loading to a route. This returns a * composable that can be used in any component. * + * The returned composable exposes a mix of Data Loaders state and Pinia + * Colada state. + * - `data`, `isLoading`, `error` are navigation dependent and follow data loaders behavior. + * - `status`, `asyncStatus`, `state` are Pinia Colada state and will immediately change and reflect the state of the + * query. + * * @experimental * Still under development and subject to change. See https://github.com/vuejs/rfcs/discussions/460 * @@ -383,7 +389,7 @@ export function defineColadaLoader( const { data, error, isLoading, ext } = entry - // TODO: add watchers only once + // TODO: add watchers only once alongside the entry // update the data when pinia colada updates it e.g. after visibility change watch(ext!.data, (newData) => { // only if we are not in the middle of a navigation @@ -425,8 +431,10 @@ export function defineColadaLoader( router[APP_KEY].runWithContext(() => load(to, router)).then( () => (entry!.commit(to), entry.ext!.state.value) ), - isPending: ext!.isPending, status: ext!.status, + asyncStatus: ext!.asyncStatus, + state: ext!.state, + isPending: ext!.isPending, } satisfies UseDataLoaderColadaResult // load ensures there is a pending load @@ -496,7 +504,7 @@ export interface UseDataLoaderColadaResult extends UseDataLoaderResult, Pick< UseQueryReturn, - 'isPending' | 'refetch' | 'refresh' | 'status' + 'isPending' | 'refetch' | 'refresh' | 'status' | 'asyncStatus' | 'state' > {} /**