Sunny Posts - Answer Overflow

Sunny

•Created by Sunny on 8/30/2024 in #❓・help

Parse error /home/sunny/dev/app-nuxt/assets/css/main.css?direct:3596:20

Parse error /home/sunny/dev/app-nuxt/assets/css/main.css?direct:3596:20
    at parse$d (file:///home/sunny/dev/app-nuxt/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:20638:585)
    at handleModuleSoftInvalidation (file:///home/sunny/dev/app-nuxt/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:51898:23)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getCachedTransformResult (file:///home/sunny/dev/app-nuxt/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:51742:52)
    at async doTransform (file:///home/sunny/dev/app-nuxt/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:51700:20)
    at async viteTransformMiddleware (file:///home/sunny/dev/app-nuxt/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:61776:24
Click outside, press Esc key, or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.js.

Parse error /home/sunny/dev/app-nuxt/assets/css/main.css?direct:3596:20
    at parse$d (file:///home/sunny/dev/app-nuxt/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:20638:585)
    at handleModuleSoftInvalidation (file:///home/sunny/dev/app-nuxt/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:51898:23)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getCachedTransformResult (file:///home/sunny/dev/app-nuxt/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:51742:52)
    at async doTransform (file:///home/sunny/dev/app-nuxt/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:51700:20)
    at async viteTransformMiddleware (file:///home/sunny/dev/app-nuxt/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:61776:24
Click outside, press Esc key, or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.js.

i get this overlay few times while refreshing my home page. can any one please help how to solve this issue. I am new to web dev. app-nuxt/assets/css/main.css @tailwind base; @tailwind components; @tailwind utilities; in nuxt.config.ts css: [ '~/assets/css/main.css' ],

1 replies

NNuxt

•Created by Sunny on 8/25/2024 in #❓・help

How to organize query params in useFetch

I have an API with many parameters, so I am using useFetch('/api/myapi', { query: params }). The params is computed and returns all the necessary parameters to fetch the data. This works fine, but these parameters can also be changed from other components. How can I organize these parameters so that the API call automatically triggers when any of them change, but without making multiple API calls if two or more parameters are modified back-to-back? I want to avoid immediate API calls for every single change.

8 replies

NNuxt

•Created by Sunny on 8/22/2024 in #❓・help

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.

1 replies

Gaming

Programming