broox Posts - Answer Overflow

broox

•Created by broox on 12/18/2024 in #❓・help

Help issuing consecutive api requests, where the second is dependent on the first

Hi y'all. I'm having a heck of a time figuring out the best way to issue 2 consecutive API calls on a nuxt3 page where the second call is dependent on data from the first. It's important to me that all of the data be rendered via SSR, and also fetched lazily when browsing on the client. I've got 2 custom composables that wrap useLazyFetch(). The first fetches an album by slug, and the second fetches photos using the album.id. For example:

const { data: album, error: albumError, status: albumStatus } = await useGetAlbum(route.params.album as string);

const photoInput = reactive({ album_id: album.value?.id as number, page });

const { data: photoData, error: photoError, status: photoStatus } = await useGetPhotos(toRefs(photoInput));

const { data: album, error: albumError, status: albumStatus } = await useGetAlbum(route.params.album as string);

const photoInput = reactive({ album_id: album.value?.id as number, page });

const { data: photoData, error: photoError, status: photoStatus } = await useGetPhotos(toRefs(photoInput));

I thought that await would allow them to operate consecutively, and they often do... but I'm running into rare instances where the value of the album_id is not being passed into the useGetPhotos call... as if the first query has not completed before the second is kicked off. I've also tried fetching this data in various other ways that i can explain further, but am very curious about the recommended approach for issuing subsequent queries like this.

15 replies

Gaming

Programming