useFetch refresh not working when params change

Environment

Nuxt CLI v3.0.0-rc.4 18:15:14 RootDir: /Users/samedwardes/git/embeddedapp/webapp-frontend 18:15:15 Nuxt project info: 18:15:15

---

• Operating System: Darwin
• Node Version: v18.2.0
• Nuxt Version: 3.0.0-rc.4
• Package Manager: npm@8.9.0
• Builder: vite
• User Config: modules, runtimeConfig
• Runtime Modules: @nuxtjs/tailwindcss@5.1.2, @formkit/nuxt@1.0.0-beta.8
• Build Modules: -

---

👉 Report an issue: https://github.com/nuxt/framework/issues/new 18:15:15

👉 Suggest an improvement: https://github.com/nuxt/framework/discussions/new

👉 Read documentation: https://v3.nuxtjs.org

Reproduction

The example from the docs works.

<script setup>
const page = ref(1);

const { data: users, pending, refresh, error } = await useFetch(() => `users?page=${page.value}&take=6`, { baseURL: config.API_BASE_URL }
);

function previous(){
  page.value--;
  refresh();
}

function next() {
  page.value++;
  refresh();
}
</script>

When I pass page into the params option it does not work.

<script setup>
const page = ref(1);

const { data: users, pending, refresh, error } = await useFetch(() => `users`, {
  baseURL: config.API_BASE_URL ,
  params: { 
    page: page.value,
    take: 6
  }
}
);

function previous(){
  page.value--;
  refresh();
}

function next() {
  page.value++;
  refresh();
}
</script>

The API is still called again, but always with page set to a value of 1.

Describe the bug

The API is still called again, but always with page set to a value of 1.

Additional context

Is this expected behaviour, or is this a bug?

Logs

No response

[ddavid67]

there should be a way to automaticaly refetch based on a reactive search params this is already the current behevior with the first parameter of usefetch even refresh() does not provide a way to inject new params

what is the purpose of the watch option if the refresh will not catch new values ?

[danielroe]

This is how Vue reactivity works - the value is frozen in time when you call useFetch: see https://github.com/nuxt/framework/issues/4970. If you want to keep it reactive, you can use useAsyncData and provide a custom fetcher function. Something like this: https://stackblitz.com/edit/github-c4jssa.