useFetch of Nuxt 3 sends same request during refresh instead of updating URL

Question

I try to do a simple thing: At route change, refetch data.

Here is my link:

<li v-for="category in categories" :key="category.id" class="mb-1">
  <NuxtLink :to="{ query: { cat: category.slug } }">
    {{category.title}}
  </NuxtLink>
</li>

And my request:

<script setup>
const route = useRoute()

const { data:categories } = await useFetch('http://127.0.0.1:8000/api/tasks/category/', {
  key: route.fullPath, 
  initialCache: false
})
const { data:tasks, refresh } = await useFetch(`http://127.0.0.1:8000/api/tasks/?cat=${route.query.cat}`, {
  key: `tasks:${route.query.cat}`, 
  initialCache: false
})

watch(() => route.query.cat, () => refresh())

</script>

So, at click, url is well changed:

http://localhost:3000/tasks?cat=category1
http://localhost:3000/tasks?cat=category3
http://localhost:3000/tasks?cat=category2

But requests are the same (from Django DRF backend):

GET http://127.0.0.1:8000/api/tasks/?cat=category1
GET http://127.0.0.1:8000/api/tasks/?cat=category1
GET http://127.0.0.1:8000/api/tasks/?cat=category1

It seems that it keeps the first category, even with initialCache: false

Answer 1

useFetch is "freezing" the API URL, the changes you make to the string directly will not be reflected. If you want to add parameters to your API URL, as an alternative to using a function, you can use the query option of useFetch. This option is reactive, that is when the ref with your route is changing, the query will reflect this update.

For your case, this will work:

const cat = ref('your_value')

const { data:tasks, refresh } = await useFetch('http://127.0.0.1:8000/api/tasks', {
  query: { cat }
})

This results in http://127.0.0.1:8000/api/tasks?cat=your_value

You don't need to mess with the key option, as the key will be auto generated, and you can also leave the cache alone.

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