Nuxt•15mo ago•

14 replies

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()

useLazyFetch()

. The first fetches an

album

album

slug

slug

, and the second fetches

photos

photos

using the

album.id

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

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

album_id

is not being passed into the

useGetPhotos

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.

Nuxt•15mo ago•

14 replies

broox

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

useLazyFetch()

useLazyFetch()

. The first fetches an

album

album

slug

slug

, and the second fetches

photos

photos

using the

album.id

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

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

album_id

is not being passed into the

useGetPhotos

useGetPhotos

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads