Nuxt•4mo ago

multiple queries in useFetch how to batch update the queries so that api hit only once

I am new to nuxt i and working on it from last 2 months. I am using useFetch to fetch data

const { data, error, status, refresh, } = await searchStore.searchComprehensive({})  // uses useFetch

const { data, error, status, refresh, } = await searchStore.searchComprehensive({})  // uses useFetch

now i am watching for query parameter change and lets say i change the url in browser from page=1 to page=5 here is the code

watch(
  () => route.query, // Watch the query object
  (newQuery) => {
    console.log('Query params changed:', newQuery);
    if (searchStore.keyword !== `${route.query.q}`) {
      searchStore.map.clear()
    }
    if (route.query.q) {
      searchStore.keyword = `${route.query.q}`
      searchStore.pageNum = newQuery.page ? parseInt(newQuery.page as string) : 1
      const hasSearchAfter = searchStore.map.has(searchStore.pageNum - 1);
      if (hasSearchAfter) {
        searchStore.searchAfter = searchStore.map.get(searchStore.pageNum - 1) ?? "";
      }
      if (searchStore.pageNum === 1) {
        searchStore.searchAfter = "";
      } else if (hasSearchAfter === false) {
        searchStore.searchAfter = "na";
      }
    }
  },
  { immediate: true, deep: true } // Options to trigger immediately and watch deeply
);

watch(
  () => route.query, // Watch the query object
  (newQuery) => {
    console.log('Query params changed:', newQuery);
    if (searchStore.keyword !== `${route.query.q}`) {
      searchStore.map.clear()
    }
    if (route.query.q) {
      searchStore.keyword = `${route.query.q}`
      searchStore.pageNum = newQuery.page ? parseInt(newQuery.page as string) : 1
      const hasSearchAfter = searchStore.map.has(searchStore.pageNum - 1);
      if (hasSearchAfter) {
        searchStore.searchAfter = searchStore.map.get(searchStore.pageNum - 1) ?? "";
      }
      if (searchStore.pageNum === 1) {
        searchStore.searchAfter = "";
      } else if (hasSearchAfter === false) {
        searchStore.searchAfter = "na";
      }
    }
  },
  { immediate: true, deep: true } // Options to trigger immediately and watch deeply
);

now the issue is as soon as pageNum gets change it hit the api and again when searchAfter change it again hit the api now i don't want to call the api twice. i want to update both pageNum and searchAfter then want to hit the api only once pageNum , keyword, searchAfter all the reactive.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

multiple queries in useFetch how to batch update the queries so that api hit only once