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;
};

Answer 2

It's not really a cache issue. useFetch is "freezing" the API URL, the changes you make to the string directly will not be reliably reflected. If you want to add parameters to your API URL, use the query option of useFetch. This option is reactive, so you can use refs and the query will update with the refs. Alternatively, you can use the provided refresh() method

const limit = ref(10)
const skip = ref(20)

const { data: users, refresh: refreshUsers } = await useFetch(
  'https://dummyjson.com/users',
  {
    query:{
      limit,
      skip
    }
  }
);

//use the data object directly to access the result
console.log(users.value)

//if you want to update users with different params later, simply change the ref and the query will update
limit.value = 23

//use refresh to manually refresh the query
refreshUsers()

This results in a first API call http://127.0.0.1:8000/api/tasks?limit=10&skip=20 and then a second with the updated values http://127.0.0.1:8000/api/tasks?limit=23&skip=20

You can leave the cache alone, as it is just a workaround, and will not work reliably.

[Updated] The useFetch() documentation is now updated as described below.

The query option is not well documented yet, as discussed in this nuxt issue. I've created a pull request on nuxt/framework to have it reflected in the documentation. Please see a full explanation below:

Using the query option, you can add search parameters to your query. This option is extended from unjs/ohmyfetch and is using ufo to create the URL. Objects are automatically stringified.

const param1 = ref('value1')
const { data, pending, error, refresh } = await useFetch('https://api.nuxtjs.dev/mountains',{
    query: { param1, param2: 'value2' }
})

This results in https://api.nuxtjs.dev/mountains?param1=value1&param2=value2