How can i wait before my first fetch is done before running the second nothing is working

[unreal thunder]

const { data: location, pending: isLocationPending } = await useFetch(
  `https://api.ipgeolocation.io/ipgeo?apiKey=${apiKey}`,
  {
    key: "location",
    server: false,
    onResponse({ response }) {
      eventStore.params.country = response._data.country_code2;
      eventStore.params.countryLong = response._data.country_name;
      execute()
    },
  }
);
 

const { data: events, pending, execute } = await useLazyFetch(
  `${config.public.BACKEND_URL}/events/public?term=${queryState.value.term}&page_size=${queryState.value.page_size}&page=${queryState.value.page}&country=${queryState.value.country}`,
  {
    key: "events",
    watch: [queryState],
    server: false,
    immediate: false,
    onRequest({ request, options }) {
      // Set the request headers
      console.log(1, eventStore.params.country);
    },
  }
);```

[onyx quail]

You can make sure it's not pending before next fetch

[unreal thunder]

If it was wrapped inside if , then i couldnt access the data

Is it not there way to do it with immediate or these things?

[onyx quail]

You could set immediate to false and also watch for when the value changes

But is there a reason you need to chain the requests in stead of making them together?

[unreal thunder]

So short story, first request makes api call to an endpoint that users location details and based on that the second request knows which countries events to display

I will try the immediate one

[onyx quail]

Why not combine the functionalities?

Obtain user location details => return events filtered by said details

[unreal thunder]

I dont know exactly how that would look as code?, In axios you can do something like Promise.All. I am trying to useFetch here so I could have keys and caching

[onyx quail]

You can filter in the api endpoint

You get user details and send it to an endpoint

Inside the endpoint you filter events based on the details