Data Loader does not reload data when only used outside of page component #535
Description
I don't know if this is expected behavior, but according to the docs, it should be possible to use a Data Loader outside page components. However, doing so seems to break the Smart Refreshing feature as described in the RFC, as the data does not get reloaded when navigating to another page when the Data Loader is not used in any page component. Adding the Data Loader's import/export to the page component, and then using it in non-page components seems to be the current workaround.
I've got the following Data Loader:
import { defineBasicLoader } from 'unplugin-vue-router/data-loaders/basic';
import { ApiSdk } from '@my-project/api-sdk';
const api = new ApiSdk();
const getCustomerOrders = async (customerId: string) => {
const response = await api.customers.orders(customerId);
if (response.status !== 'success') return [];
return response.data;
};
export const useCustomerOrders = defineBasicLoader(
'/customers/[customerId]',
async (route) => getCustomerOrders(route.params.customerId),
);The Data Loader is used like this in my <OrdersList> component (simplified example), which is then used in my page component for the /customer/[customerId] route (/customers/[customerId]/index.vue):
<script lang="ts">
import { useCustomerOrders } from '../../Loaders/customerOrders';
export { useCustomerOrders };
</script>
<script setup lang="ts">
const { data: orders } = useCustomerOrders();
</script>
<template>
<List>
<Order v-for="order in orders" :key="order.id" :order />
</List>
</template>When I navigate for the first time to the /customer/[customerId] page (with customerId = C0001), the orders for customer C0001 will load properly. However, when I then navigate to /customer/C0002, it'll still display the orders from customer C0001, and the networking tab of the DevTools also doesn't show a new request to the /orders endpoint of the API. When doing a hard refresh of the page (Cmd + R), while on /customer/C0002, it'll now fetch the orders from C0002, but not the orders of C0001 when navigating to that page again.
In the situation above, the Loader is only added to the OrdersList component, which is then used on the /customers/[customerId] page (file-based routing). While this does not reload the data on subsequent navigation, the problem does seem to get fixed by adding the Loader's import/export to the specific page file where the component is used. So, for example, by adding this to the /customers/[customerId]/index.vue page component:
<script lang="ts">
import { useCustomerOrders } from '../../Loaders/customerOrders';
export { useCustomerOrders };
</script>the <OrdersList> component on that page will now have the proper data that gets reloaded when navigating to another [customerId].