Nuxt•8mo ago

useFetch and queries will not re-fetch with watch array of reactive values

const route = useRoute();

const page = ref<number>(0);
const category = ref<string>(route.query.category?.toString() || "");

const {
  data: servers,
  refresh: refreshServers,
  pending: servers_pending,
} = useFetch("/api/v1/stuff/fetch/feed", {
  query: { page: page.value, category: category.value },
  watch: [page, category],
});

const route = useRoute();

const page = ref<number>(0);
const category = ref<string>(route.query.category?.toString() || "");

const {
  data: servers,
  refresh: refreshServers,
  pending: servers_pending,
} = useFetch("/api/v1/stuff/fetch/feed", {
  query: { page: page.value, category: category.value },
  watch: [page, category],
});

Any help is appreciated 😄

8 Replies

netwrxOP•8mo ago

There are also weird behaviours where it sometimes works, and it duplicates the request with a cancelled status (really jank)

manniL•8mo ago

category should either be a computed or using toRef (see https://www.youtube.com/watch?v=sccsXulqMX8) query: { page: page.value, category: category.value } could be a simple computed or passing query: { page, category },, then you don't need the watch

Alexander Lichter

YouTube

Avoid losing Reactivity in your Vue Application

🔄 Reactivity is a crucial and and concept when building any kind of Vue application. But especially with the Composition API, I see more and more people having trouble with Reactivity and ensure that the "reactivity chain" will be kept up throughout various composables and components. In this video, I want to highlight typical issues with ref's ...

netwrxOP•8mo ago

Could you explain a bit more on what should be done? Passing the ref's instead of the direct value of them sort of work, but the query's category doesn't change from the ref. Maybe I'm misunderstanding something. I skimmed thru the video a little bit

manniL•8mo ago

if you have a ref or a computed, you should be able to pass it to useFetch's query, also covered in https://www.youtube.com/watch?v=0X-aOpSGabA

Alexander Lichter

YouTube

useAsyncData vs. useFetch 🤯

🪄 Data fetching is essential in every application - also when using Nuxt. Luckily, useAsyncData and useFetch are provided by the framework to make data fetching a breeze. But how do they work? Which should you use? And why are there TWO? All that will be answered in this video 🙌🏻 Key points: 🎛️ What data composables are! 🔄 $fetch as fetching fu...

netwrxOP•8mo ago

Yeah, they are both ref's, but my issue isn't solved

useFetch("/api/v1/stuff/fetch/feed", {
  query: { page, category },
  watch: [category],
});

useFetch("/api/v1/stuff/fetch/feed", {
  query: { page, category },
  watch: [category],
});

(i tried watching category, but either way, it doesn't work) Ah There was no reactivity in category, had to use a computed function call. Appreciate it! But now I'm getting duplicated calls @manniL / TheAlexLichter

manniL•8mo ago

maybe because you misuse it? 🤔 watch shouldn't be necessary btw maybe that's why

manniL•8mo ago

or because of https://www.youtube.com/watch?v=njsGVmcWviY

Alexander Lichter

YouTube

You are using useFetch WRONG! (I hope you don't)

💪🏻 useFetch is a mighty composable to fetch data in your Nuxt.js application. It can do so many things, from updating state to refreshing calls easily and even data caching is possible. But often I see that people misuse useFetch because it is so tempting to use all the features, even when you shouldn't. In this video I show the most common mist...

netwrxOP•8mo ago

That helped! Now it's only being duplicated if the response is an error

const page = ref<number>(0);
const category = computed(() => route.query.category);

const { data: stuff, pending: stuff_pending } = useFetch(
  "/api/v1/stuff/fetch/feed",
  {
    query: { page, category },
  }
);

const page = ref<number>(0);
const category = computed(() => route.query.category);

const { data: stuff, pending: stuff_pending } = useFetch(
  "/api/v1/stuff/fetch/feed",
  {
    query: { page, category },
  }
);

If it helps, the only place those ref's are being changed is here

const go_to_page = async (num: number) => {
  console.log("page change");
  page.value = num;
};

const go_to_page = async (num: number) => {
  console.log("page change");
  page.value = num;
};

That was solved by defining retry as false

Gaming

Programming

useFetch and queries will not re-fetch with watch array of reactive values