Nuxt•4mo ago

useFetch automatically fetching even when watch is disabled

I have the following code snippet:

const wallet = useWallet();
const block = ref<number | null>(null);

const { data, status, execute } = useFetch("/api/transcations", {
   query: {
      wallet,
      start_block: block,
   },
   immediate: false,
   watch: false,
});

const wallet = useWallet();
const block = ref<number | null>(null);

const { data, status, execute } = useFetch("/api/transcations", {
   query: {
      wallet,
      start_block: block,
   },
   immediate: false,
   watch: false,
});

Ref block is connected via v-model to input element. When I type into that element and block gets updated, it auto starts fetching. I want this to only be fetched when I manually run execute() - am I missing something?

3 Replies

kapa.ai•4mo ago

Hi @lexpeartha. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're encountering a known nuance in Nuxt's data fetching system. Even when you set watch: false and immediate: false in useFetch, if you pass reactive values (like refs or computeds) in the query option, Nuxt will still watch those values and trigger a fetch when they change. This is because the fetch options and URL are watched by default, unless you explicitly prevent it. However, as of recent Nuxt versions, setting watch: false should prevent automatic re-fetching when reactive sources change, including those in the query option. There was a fix merged to ensure that with watch: false, reactive keys (including those in query) do not trigger fetches automatically anymore (see PR). If you are still seeing this behavior, make sure you are on the latest Nuxt version. Workaround:
If you are still experiencing auto-fetching, a reliable workaround is to ensure that you pass only non-reactive values to the query option, or use a computed URL and control reactivity yourself. Alternatively, you can "freeze" the query parameters by creating a computed or plain object that only updates when you want to fetch, and then call execute() manually. Example:

const wallet = useWallet();
const block = ref<number | null>(null);

const queryParams = ref({
  wallet: wallet.value,
  start_block: block.value,
});

const { data, status, execute } = useFetch("/api/transcations", {
  query: queryParams,
  immediate: false,
  watch: false,
});

// When you want to fetch:
function fetchTransactions() {
  queryParams.value = {
    wallet: wallet.value,
    start_block: block.value,
  };
  execute();
}

const wallet = useWallet();
const block = ref<number | null>(null);

const queryParams = ref({
  wallet: wallet.value,
  start_block: block.value,
});

const { data, status, execute } = useFetch("/api/transcations", {
  query: queryParams,
  immediate: false,
  watch: false,
});

// When you want to fetch:
function fetchTransactions() {
  queryParams.value = {
    wallet: wallet.value,
    start_block: block.value,
  };
  execute();
}

Summary:
- Passing refs in query can still trigger fetches unless you are on a version where the fix is applied. - Use watch: false and ensure your query object is not reactive, or update it only when you want to fetch. - Always call execute() manually to fetch. For more details, see the related Nuxt PR and the Nuxt docs on watch and reactivity. If you are on the latest Nuxt and still see this, it may be a bug or a version-specific issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@324620229739020301> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

lexpearthaOP•4mo ago

ah, it seems it has been fixed in 3.17.3

Gaming

Programming

useFetch automatically fetching even when watch is disabled

Did you find this page helpful?