Nuxt 3 : useAsyncData et $fetch ne fonctionnent qu'une seule fois

Question

J'utilise nuxt 3 dans un projet et je souhaite faire une requête vers un fichier dactylographié dans le répertoire /server/api/. Mais quand je fais ça dans le fichier app.vue :

<script setup lang="ts">
const createPerson = async () => {
    console.log('create person')
    const data = await useAsyncData('createPerson', () => $fetch('/api/file', {
        method: 'POST',
        headers: useRequestHeaders(['cookie']),
        body: JSON.stringify({
            lastname: fields.value.lastname,
            firstname: fields.value.firstname,
            age: fields.value.age,
            x: fields.value.x,
            y: fields.value.y,
            bio: fields.value.bio
        })
    }))
    console.log(data)
}
</script>

Quand j'appelle cette fonction createPerson :

<button @click="createPerson">Apply</button>

Mon application ne récupère "/api/file" qu'une seule fois et ne le récupère pas. Si j'utilise la fonction d'actualisation fournie par useAsyncData, j'ai deux récupérations lorsque vous cliquez sur le bouton pour la première fois et une récupération après cela.

Answer 1

Pour répondre à votre question, vous devez ajouter une clé pour utiliser AsyncData afin de forcer une actualisation sur votre demande. La raison pour laquelle la récupération ne se produit pas est que createPerson reste inchangé en tant que clé, donc aucune récupération n'est effectuée. Il vous suffit donc de générer une clé aléatoire en utilisant votre méthode useAsyncData préférée

<script setup lang="ts">
    const createPerson = async () => {
        console.log('create person')
        const data = await useAsyncData(RANDOM_KEY, () => $fetch('/api/file', {
            method: 'POST',
            headers: useRequestHeaders(['cookie']),
            body: JSON.stringify({
                lastname: fields.value.lastname,
                firstname: fields.value.firstname,
                age: fields.value.age,
                x: fields.value.x,
                y: fields.value.y,
                bio: fields.value.bio
            })
        }))
        console.log(data)
    }
    </script>

Vous avez également la possibilité d'utiliser la fonction d'actualisation sans vous soucier des touches. Consultez cette documentation https://nuxt.com/docs/getting-started/data-fetching#refreshing-data