Nuxt•2y ago

useAsyncData doesnt refetch the data

i got this code

page Media.vue

const route = useRoute()

const folderName = computed(() => route.query.folder || 'default')

const { fetchMedia } = useMediaLibrary()
const { data: Media, refresh: refreshMedia } = await useAsyncData(list-media-${folderName.value !== '' ? folderName.value : 'default'}, () => fetchMedia(folderName.value), { watch: [folderName] })

const route = useRoute()

const folderName = computed(() => route.query.folder || 'default')

const { fetchMedia } = useMediaLibrary()
const { data: Media, refresh: refreshMedia } = await useAsyncData(list-media-${folderName.value !== '' ? folderName.value : 'default'}, () => fetchMedia(folderName.value), { watch: [folderName] })

composable method

   const fetchMedia = async (name: MaybeRef<string> = 'default') => {
        const folderName = toValue(name);
        return Promise.all([mediaRepo.getAllFolder(folderName == 'default' ? '' : folderName, headers), mediaRepo.getAllFile(folderName, headers)])

    };

   const fetchMedia = async (name: MaybeRef<string> = 'default') => {
        const folderName = toValue(name);
        return Promise.all([mediaRepo.getAllFolder(folderName == 'default' ? '' : folderName, headers), mediaRepo.getAllFile(folderName, headers)])

    };

My probleme is every time i click on a click folder in a my Ui this change the route.query.folder example : folder="default" => folder="pages"
But i dont know why the data its not refeched despite folderName change(verified with a watch) and the watch on my useAsyncData
the only query cache i saw its the first so when i arrive in the page its the "list-media-default"
I need to reload the page to see the new result

Nuxt•2y ago

magius

useAsyncData doesnt refetch the data

i got this code

page Media.vue

const route = useRoute()

const folderName = computed(() => route.query.folder || 'default')

const { fetchMedia } = useMediaLibrary()
const { data: Media, refresh: refreshMedia } = await useAsyncData(list-media-${folderName.value !== '' ? folderName.value : 'default'}, () => fetchMedia(folderName.value), { watch: [folderName] })

const route = useRoute()

const folderName = computed(() => route.query.folder || 'default')

const { fetchMedia } = useMediaLibrary()
const { data: Media, refresh: refreshMedia } = await useAsyncData(list-media-${folderName.value !== '' ? folderName.value : 'default'}, () => fetchMedia(folderName.value), { watch: [folderName] })

composable method

   const fetchMedia = async (name: MaybeRef<string> = 'default') => {
        const folderName = toValue(name);
        return Promise.all([mediaRepo.getAllFolder(folderName == 'default' ? '' : folderName, headers), mediaRepo.getAllFile(folderName, headers)])

    };

   const fetchMedia = async (name: MaybeRef<string> = 'default') => {
        const folderName = toValue(name);
        return Promise.all([mediaRepo.getAllFolder(folderName == 'default' ? '' : folderName, headers), mediaRepo.getAllFile(folderName, headers)])

    };

useAsyncData doesnt refetch the data

Similar Threads

useAsyncData doesnt refetch the data

Similar Threads

Similar Threads

Similar Threads