I have written the below code in a +page.server.ts file:
const mediaItemComments = mediaItemComment.getByRequestId(params.id);return { request, streamed: { record, mediaItemComments, client: user.get(request.clientId) }}
This uses the getByRequestId method, defined in db.ts:
export const mediaItemComment = { getByRequestId: async(id: string) => { const ref = await db .collection('mediaItemComments') .get() const comments = ref.docs.map((doc) => ({ id: doc.id, ...doc.data() })) // todo: add ts console.log('DB.TS ran and fetched these comments: ', comments.length) return comments; }}
My page.svelte file uses this Promise as the streamedComments prop to other components:
<script> .... export let data;</script>{#each...}<Art index={i + 1} {art} streamedComments={data.streamed.mediaItemComments} {record} />{/each}
The Art component uses the SpecialCarousel component, which uses the MediaItemModal component as follows:
<script> let comments = [] onMount(async () => { try { console.log('onMount in MediaItemModal running with streamedComments', streamedComments) comments = await streamedComments } catch (error) { console.error('Failed to load comments:', error) } })</script>
Sometimes, the Promise resolves to only have 8 comments in it, while the other times, it only has 0 comments. When I open the app, 10% of the time it will show all the comments in the Firebase collection, while the other times it will return 0 comments in the Promise on the frontend (when I log it on the browser). However, on the db.ts file, it is always logged as returning 8 elements from the database. Not sure what's happening here. Please guide.
I see comments loading. I refresh the page. Now they no longer load. On changing code randomly by adding spaces, and refreshing, sometimes it shows the comments for 1 refresh, but then not for the other ones. Am very confused here.