N
Nuxt•9mo ago
salomon_.

How to start fetch only when two variables in watch true?

I need to call fetch only when both values are available (not undefined) 
const {} = useAsyncData(
  'tours-available-dates',
  () =>
    getAvailableNights({
      query: {
        country_id: direction.value.value,
        departure_from_date: date.value.value,
        departure_to_date: date.value.value,
      },
    }),
  {
    immediate: false,
    server: false,
    lazy: true,
    watch: [() => date.value.value, () => direction.value.value],
  },
);
const {} = useAsyncData(
  'tours-available-dates',
  () =>
    getAvailableNights({
      query: {
        country_id: direction.value.value,
        departure_from_date: date.value.value,
        departure_to_date: date.value.value,
      },
    }),
  {
    immediate: false,
    server: false,
    lazy: true,
    watch: [() => date.value.value, () => direction.value.value],
  },
);
2 Replies
kapa.ai
kapa.ai•9mo ago
Hi @salomon_.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on your code, you're trying to fetch data only when both date.value.value and direction.value.value are available. There are a few approaches to handle this in Nuxt 3. Option 1: Use a computed property You can create a computed property that checks if both values are defined and use that in your watch array: 
const bothValuesAvailable = computed(() => 
  date.value.value !== undefined && direction.value.value !== undefined
)

const { execute } = useAsyncData(
  'tours-available-dates',
  () =>
    getAvailableNights({
      query: {
        country_id: direction.value.value,
        departure_from_date: date.value.value,
        departure_to_date: date.value.value,
      },
    }),
  {
    immediate: false,
    server: false,
    lazy: true,
    watch: [bothValuesAvailable]
  },
);
const bothValuesAvailable = computed(() => 
  date.value.value !== undefined && direction.value.value !== undefined
)

const { execute } = useAsyncData(
  'tours-available-dates',
  () =>
    getAvailableNights({
      query: {
        country_id: direction.value.value,
        departure_from_date: date.value.value,
        departure_to_date: date.value.value,
      },
    }),
  {
    immediate: false,
    server: false,
    lazy: true,
    watch: [bothValuesAvailable]
  },
);
Option 2: Use the immediate: false option with manual execution You're already using immediate: false, which prevents the request from firing immediately. You can then manually trigger the fetch when both values are available: 
const { execute } = useAsyncData(
  'tours-available-dates',
  () =>
    getAvailableNights({
      query: {
        country_id: direction.value.value,
        departure_from_date: date.value.value,
        departure_to_date: date.value.value,
      },
    }),
  {
    immediate: false,
    server: false,
    lazy: true,
  },
);

watch([() => date.value.value, () => direction.value.value], ([newDate, newDirection]) => {
  if (newDate !== undefined && newDirection !== undefined) {
    execute();
  }
});
const { execute } = useAsyncData(
  'tours-available-dates',
  () =>
    getAvailableNights({
      query: {
        country_id: direction.value.value,
        departure_from_date: date.value.value,
        departure_to_date: date.value.value,
      },
    }),
  {
    immediate: false,
    server: false,
    lazy: true,
  },
);

watch([() => date.value.value, () => direction.value.value], ([newDate, newDirection]) => {
  if (newDate !== undefined && newDirection !== undefined) {
    execute();
  }
});
This approach uses Vue's standard watch function to monitor both values and only executes the fetch when both are defined Docs > Getting-started > Data Fetching > Watch. Option 3: Use a computed URL Another approach is to use a computed URL that returns undefined when the values aren't available: 
const { data, status } = useLazyFetch(() => {
  if (date.value.value === undefined || direction.value.value === undefined) {
    return undefined; // This will prevent the fetch from executing
  }
  
  return '/your/api/endpoint';
}, {
  query: {
    country_id: direction.value.value,
    departure_from_date: date.value.value,
    departure_to_date: date.value.value,
  },
  server: false,
});
const { data, status } = useLazyFetch(() => {
  if (date.value.value === undefined || direction.value.value === undefined) {
    return undefined; // This will prevent the fetch from executing
  }
  
  return '/your/api/endpoint';
}, {
  query: {
    country_id: direction.value.value,
    departure_from_date: date.value.value,
    departure_to_date: date.value.value,
  },
  server: false,
});
This approach leverages the Computed URL feature of useFetch and useLazyFetch. The second option is probably the most straightforward for your specific use case, as it gives you explicit control over when the fetch is executed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•9mo ago
<@1029431292170874910> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?