Not fetching Supabase data

I am encountering an extremely strange issue that I haven't run into before. When I change tabs on my browser, my app is no longer responsive to data fetches. I showed a small demonstration in the video. The components themselves are just simple and calling supabase. The calls themselves never show up in the network tab which makes me think they are not actually being executed so I don't think it's related to supabase. This issue happens in dev and prod.

Here is an example of a function being called in one of the components:

const { data, pending, error } = useAsyncData(
    uniqueKey.value,
    async () => {
        console.log("Fetching iwpSchedData")
        const { data, error } = await supabase
            .from('schedule')
            .select('start, finish, activityId, activityName, activityStatus, personResponsible,' +
                'originalDuration, remainingDuration, blu, alu, rlu, predDetails, succDetails')
            .eq('package', props.iwp)
        console.log("Fetched iwpSchedData")
        if (error) {
            console.log(error)
        }
        console.log("Returning iwpSchedData")
        if (data) return data[0]
    }
)

const { data, pending, error } = useAsyncData(
    uniqueKey.value,
    async () => {
        console.log("Fetching iwpSchedData")
        const { data, error } = await supabase
            .from('schedule')
            .select('start, finish, activityId, activityName, activityStatus, personResponsible,' +
                'originalDuration, remainingDuration, blu, alu, rlu, predDetails, succDetails')
            .eq('package', props.iwp)
        console.log("Fetched iwpSchedData")
        if (error) {
            console.log(error)
        }
        console.log("Returning iwpSchedData")
        if (data) return data[0]
    }
)

I've been pulling my hair out over this issue and would really appreciate any guidance. I don't even know where to begin debugging something like this.

Update: I just tested in SSR and the issue persists.

Not fetching Supabase data

const { data, pending, error } = useAsyncData(
    uniqueKey.value,
    async () => {
        console.log("Fetching iwpSchedData")
        const { data, error } = await supabase
            .from('schedule')
            .select('start, finish, activityId, activityName, activityStatus, personResponsible,' +
                'originalDuration, remainingDuration, blu, alu, rlu, predDetails, succDetails')
            .eq('package', props.iwp)
        console.log("Fetched iwpSchedData")
        if (error) {
            console.log(error)
        }
        console.log("Returning iwpSchedData")
        if (data) return data[0]
    }
)

const { data, pending, error } = useAsyncData(
    uniqueKey.value,
    async () => {
        console.log("Fetching iwpSchedData")
        const { data, error } = await supabase
            .from('schedule')
            .select('start, finish, activityId, activityName, activityStatus, personResponsible,' +
                'originalDuration, remainingDuration, blu, alu, rlu, predDetails, succDetails')
            .eq('package', props.iwp)
        console.log("Fetched iwpSchedData")
        if (error) {
            console.log(error)
        }
        console.log("Returning iwpSchedData")
        if (data) return data[0]
    }
)

Not fetching Supabase data

Similar Threads

Not fetching Supabase data

Similar Threads

Similar Threads

Similar Threads