Nuxt•4mo ago

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.

13 Replies

PatrityOP•4mo ago

Anyone have any ideas? :/ this one is really killing me

dwol•4mo ago

You aren’t returning anything or using await https://nuxt.com/docs/api/composables/use-async-data

Nuxt

useAsyncData · Nuxt Composables

useAsyncData provides access to data that resolves asynchronously in an SSR-friendly composable.

dwol•4mo ago

‘await useAsyncData’ ‘return supabase.from…’

PatrityOP•4mo ago

It works on the initial load and returns fine until I switch pages, the supabase call is awaited and then a couple lines down I return the data.. This happens on every page of my application, for every data fetch. As you can see in the recording console.log("Fetched iwpSchedData") is also never printed after I change tabs, along with the other log. It's like its getting to the supabase call and just sitting there, never actually making the call and it only happens when I switch tabs..

dwol•4mo ago

Did you try just returning the supabase call instead of destructing it and returning the data

PatrityOP•4mo ago

yes, I just did that and awaited and the issue behaves the same

Cue•4mo ago

What is uniqueKey and why is it a ref?

PatrityOP•4mo ago

this function is loaded multiple times each time the component is loaded, unique key is computed depending on what it is looking up from the props. Each of the dropdowns from the video loads the same component and if the key is not unique, the asyncdata overwrites the other open components

const uniqueKey = computed(() => `iwpSchedData-${props.iwp}`)

const uniqueKey = computed(() => `iwpSchedData-${props.iwp}`)

Cue•4mo ago

Ah, right. Is uniqueKey used elsewhere though? Or solely for useFetch here? I ask because the key in fetch is static. So if its not used anywhere else, computed does nothing in this instance.

PatrityOP•4mo ago

solely useAsyncData. Its computed out of habbit and should never change throughout the live of the component. Do you think that could cause it?

Cue•4mo ago

I doubt it, if you're not expecting it to change, and it isn't. I thought perhaps you were expecting it to change and it may impact it, however if the prop is unique when passed in, then it should be fine. We're having to guess a lot here.. there's not much to reproduce with. And if you're struggling to create a repro, you might want to consider having someone take a look at the codebase.

PatrityOP•3mo ago

Yeah, its a complex issue that would be a lot to repro. I've worked with nuxt and supabase a lot - just never run into anything like this. I'm not looking for a magic fix, just no idea where to even begin debugging something like this. I'm sure I just used computed out of habit, there is no need for it to ever be re-evaluated throughout the lifecycle of each component instance. It does not seem like this is causing the issue though. Shot you a dm

PatrityOP•3mo ago

Issue was solved. If anyone happens to run into something similar, it ended up being related to Supabase, but my own mistakes

Gaming

Programming

Not fetching Supabase data