broox
broox
PostsComments
NNuxt
Created by broox on 12/18/2024 in #❓・help
Help issuing consecutive api requests, where the second is dependent on the first
yea, i read that earlier. thanks for the tips.
15 replies
NNuxt
Created by broox on 12/18/2024 in #❓・help
Help issuing consecutive api requests, where the second is dependent on the first
for now, i solved this by splitting the queries into a parent page that almost exclusively just fetches the album via one composable... and then pushing all the other logic, including the composable that loads the photos into child component.
15 replies
NNuxt
Created by broox on 12/18/2024 in #❓・help
Help issuing consecutive api requests, where the second is dependent on the first
right now, the best way for this to work, in my mind is to move the second composable to a child component and attempt to send relevant metadata up to the parent... but i am also having issues with the parent rendering that data on the server side.
15 replies
NNuxt
Created by broox on 12/18/2024 in #❓・help
Help issuing consecutive api requests, where the second is dependent on the first
it does feel weird that await does not truly await the first query to complete when immediate is true. but i guess it makes sense
15 replies
NNuxt
Created by broox on 12/18/2024 in #❓・help
Help issuing consecutive api requests, where the second is dependent on the first
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, immediate: false });

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

watch((album), (newAlbum: Album | null) => {
  if (newAlbum?.id) {
    fetchPhotos();
  }
}, { immediate: true });
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, immediate: false });

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

watch((album), (newAlbum: Album | null) => {
  if (newAlbum?.id) {
    fetchPhotos();
  }
}, { immediate: true });
this works, but not on SSR. as expected, i suppose.
15 replies
NNuxt
Created by broox on 12/18/2024 in #❓・help
Help issuing consecutive api requests, where the second is dependent on the first
moving the second composable into a child component has seemingly been the most reliable way for me issue the 2 requests, however sharing the state from the child component to the parent has been unreliable on the server side. i can play with immediate and watch to execute the second query once i am sure album_id is set
15 replies
NNuxt
Created by broox on 12/18/2024 in #❓・help
Help issuing consecutive api requests, where the second is dependent on the first
word, i understood that it used useFetch and $fetch (ofetch) under the hood, but it has worked reliably for me with SSR thus far. the only place i'm having trouble is where i have dependent requests, and the main reason that i would like to use my composables is that they handle pagination, caching, etc, and i call them from many different places.
15 replies
NNuxt
Created by broox on 12/18/2024 in #❓・help
Help issuing consecutive api requests, where the second is dependent on the first
why is that? doesn't useLazyFetch use useFetch on the server side, but allows navigation to feel snappier on the client side while data is loading?
15 replies
NNuxt
Created by broox on 12/18/2024 in #❓・help
Help issuing consecutive api requests, where the second is dependent on the first
i tried moving the useGetPhotos call into a child component that is rendered on the page to isolate it. this seemed to work, however i want some data from the useGetPhotos call to be available on the parent page via SSR (e.g. the composable status and a photoCount that is returned by the API call). i tried various approaches to acheiving this, using provide/inject, defineExpose, etc. but was running into weirdness where these values were not rendered on the server. they were available on the client though.
15 replies
NNuxt
Created by broox on 12/18/2024 in #❓・help
Help issuing consecutive api requests, where the second is dependent on the first
nice portishead shirt 🙂 and if i understand correctly, i cannot conditionally call my useGetPhotos composable in a watch statement. is there a way to do this while using my composables?
15 replies