useInfiniteScroll utility of Vueuse is fetching same items again

Question

Here is a reproducable stackblitz - https://stackblitz.com/edit/nuxt-starter-jlzzah?file=components/users.vue

What's wrong? - My code fetches 15 items, and with the bottom scroll event it should fetch another 15 different items but it just fetches same items again.

I've followed this bottom video for this implementation, it's okay in the video but not okay in my stackblitz code: https://www.youtube.com/watch?v=WRnoQdIU-uE&t=3s&ab_channel=JohnKomarnicki

The only difference with this video is that he's using axios while i use useFetch of nuxt 3.

Answer 1

Nuxt3's useFetch uses caching by default. Use initialCache: false option to disable it:

const getUsers = async (limit, skip) => {
  const { data: users } = await useFetch(
    `https://dummyjson.com/users?limit=${limit}&skip=${skip}`,
    {
      initialCache: false,
    }
  );

  //returning fetched value
  return users.value.users;
};

But you probably should use plain $fetch instead of useFetch in this scenario to avoid caching:

const getUsers = async (limit, skip) => {
  const { users } = await $fetch(
    `https://dummyjson.com/users?limit=${limit}&skip=${skip}`
  );

  //returning fetched value
  return users;
};