Nuxt 3 - How to refresh fetched data every n minutes

Question

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,

Hi, please give a try to that one: https://stackoverflow.com/a/74697681/8816585 — kissu, Dec 12 '22 at 23:58
Unfortunately it does not work for me, it executes the function after 60 seconds but refresh() does nothing — Lolek, Dec 13 '22 at 17:40

score 2 · Accepted Answer · answered Dec 13 '22 at 18:26

Here is my Github repo and the hosted app on Netlify.

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>

Hmm, interesting, thank you very much. If I use your example it works as it should — Lolek, Dec 13 '22 at 18:41
@Lolek no, nothing related to dev/production. Something else is not behaving properly. Be sure to be using the stable `v3.0.0` of Nuxt, not having any errors in your console + no middleware or weird plugins. — kissu, Dec 13 '22 at 18:44

Nuxt 3 - How to refresh fetched data every n minutes

1 Answers1

Linked