So in my database data gets refreshed every minute(data actually updates, I checked) and then I display this data on the page. Data gets fetched when I switch between pages and when I manually refresh the page as it should, but if I sit on one page for example 5 min, data does not get refreshed on the page side even tho data updates in the database.
Is it possible to refresh fetch data let's say every minute when user is active on page, without hitting refresh button all the time?
I fetch data using useFetch(), but I don't use any additional parameters because I don't need them. In documentation specifically says, that params have to change in order to get refresh work.
var {data: fixture, refresh, pending, error} = await useFetch('/api/getFixture')``
I've tried something like that:
function refreshing(){
refresh
console.log("refreshing")
}
setInterval(() => refreshing(), 10000);
The function gets executed but the data does not refresh because if I understand correctly, there was no change in params right? I also tried using:
refreshNuxtData()
which should "execute" fetch again, but no luck either.
Thank you and best regards,
The code that I'm using
<script setup>
import { useIntervalFn } from '@vueuse/core' // VueUse helper, install it
const { pending, data, error, refresh } = await useFetch('https://jsonplaceholder.typicode.com/todos/1')
useIntervalFn(() => {
console.log(`refreshing the data again ${new Date().toISOString()}`)
refresh() // will call the 'todos' endpoint, just above
}, 3000) // call it back every 3s
</script>
<template>
<div v-if="!pending">
<pre>{{ data }}</pre>
</div>
</template>
Those are the settings that I've used on Netlify
The app is behaving properly as you can see in the console + network tab
Not sure what is not working on your side, but this is the actual way of using a setInterval in Nuxt3.
If you want to force the refresh, you can do that with a single line (using useFetch
's refresh
)
<button @click="refresh">force</button>