fix(data-loaders): allow nested loaders to run on invalidation

Fix #583

Author: posva

src/data-loaders/defineColadaLoader.spec.ts

@@ -324,5 +324,57 @@ describe(
 
       expect(getCurrentContext()).toEqual([])
     })
+
+    it('can refetch nested loaders on invalidation', async () => {
+      const nestedQuery = vi.fn(async () => [{ id: 0 }, { id: 1 }])
+      const useListData = defineColadaLoader({
+        query: nestedQuery,
+        key: () => ['list'],
+      })
+
+      const useDetailData = defineColadaLoader({
+        key: (to) => ['list', to.params.id as string],
+        async query(to) {
+          const list = await useListData()
+          const item = list.find(
+            (item) => String(item.id) === (to.params.id as string)
+          )
+          if (!item) {
+            throw new Error('Not Found')
+          }
+          return { ...item, when: Date.now() }
+        },
+      })
+
+      const component = defineComponent({
+        setup() {
+          return { ...useDetailData() }
+        },
+        template: `<p/>`,
+      })
+
+      const router = getRouter()
+      router.addRoute({
+        name: 'item-id',
+        path: '/items/:id',
+        meta: { loaders: [useDetailData] },
+        component,
+      })
+
+      const pinia = createPinia()
+
+      mount(RouterViewMock, {
+        global: {
+          plugins: [[DataLoaderPlugin, { router }], pinia, PiniaColada],
+        },
+      })
+
+      await router.push('/items/0')
+      const queryCache = useQueryCache(pinia)
+
+      await expect(
+        queryCache.invalidateQueries({ key: ['list'] })
+      ).resolves.toBeDefined()
+    })
   }
 )

src/data-loaders/defineColadaLoader.ts

@@ -168,6 +168,8 @@ export function defineColadaLoader<Data>(
     // set the current context before loading so nested loaders can use it
     setCurrentContext([entry, router, to])
 
+    const app = router[APP_KEY]
+
     if (!entry.ext) {
       // console.log(`🚀 creating query for "${key}"`)
       entry.ext = useQuery({
@@ -185,9 +187,13 @@ export function defineColadaLoader<Data>(
             }
           )
 
-          return loader(trackedRoute, {
-            signal: route.meta[ABORT_CONTROLLER_KEY]?.signal,
-          })
+          // needed for automatic refetching and nested loaders
+          // https://github.com/posva/unplugin-vue-router/issues/583
+          return app.runWithContext(() =>
+            loader(trackedRoute, {
+              signal: route.meta[ABORT_CONTROLLER_KEY]?.signal,
+            })
+          )
         },
         key: () => toValueWithParameters(options.key, entry.route.value),
         // TODO: cleanup if gc
@@ -380,6 +386,7 @@ export function defineColadaLoader<Data>(
     // fallback to the global router and routes for useDataLoaders used within components
     const router = _router || useRouter()
     const route = _route || (useRoute() as RouteLocationNormalizedLoaded)
+    const app = router[APP_KEY]
 
     const entries = router[
       LOADER_ENTRIES_KEY
@@ -399,7 +406,7 @@ export function defineColadaLoader<Data>(
       // console.log(
       //   `🔁 loading from useData for "${options.key}": "${route.fullPath}"`
       // )
-      router[APP_KEY].runWithContext(() =>
+      app.runWithContext(() =>
         // in this case we always need to run the functions for nested loaders consistency
         load(route, router, undefined, parentEntry, true)
       )
@@ -447,22 +454,22 @@ export function defineColadaLoader<Data>(
       error,
       isLoading,
       reload: (to: RouteLocationNormalizedLoaded = router.currentRoute.value) =>
-        router[APP_KEY].runWithContext(() =>
-          load(to, router, undefined, undefined, true)
-        ).then(() => entry!.commit(to)),
+        app
+          .runWithContext(() => load(to, router, undefined, undefined, true))
+          .then(() => entry!.commit(to)),
       // pinia colada
       refetch: (
         to: RouteLocationNormalizedLoaded = router.currentRoute.value
       ) =>
-        router[APP_KEY].runWithContext(() =>
-          load(to, router, undefined, undefined, true)
-        ).then(() => (entry!.commit(to), entry!.ext!.state.value)),
+        app
+          .runWithContext(() => load(to, router, undefined, undefined, true))
+          .then(() => (entry!.commit(to), entry!.ext!.state.value)),
       refresh: (
         to: RouteLocationNormalizedLoaded = router.currentRoute.value
       ) =>
-        router[APP_KEY].runWithContext(() => load(to, router)).then(
-          () => (entry!.commit(to), entry.ext!.state.value)
-        ),
+        app
+          .runWithContext(() => load(to, router))
+          .then(() => (entry!.commit(to), entry.ext!.state.value)),
       status: ext!.status,
       asyncStatus: ext!.asyncStatus,
       state: ext!.state,