T
TanStack•11mo ago
metropolitan-bronze

Enabled is true and devtools show data in the data explorer but data is empty in the component

I currently have this in the useQuery hook: enabled: computed(() => !import.meta.server && table.value?.isPending === false), where table is the ref value of a table component that is initialized in the current component to ref() and passed as ref= prop. If I remove the computed() I still have this issue. Query explorer in the devtools shows Query.options.enabled is true. If I set enabled to just !import.meta.server it works fine. Is there some issue with using a component ref value? I have confirmed that the query I am having issues with is the one I am viewing in the devtools, I have manually printed the pending and data value in the template to test so I can confirm this is not a rendering issue with one of my components.
9 Replies
metropolitan-bronze
metropolitan-bronzeOP•11mo ago
Also this only happens when the table component takes longer to load due to its v-if waiting for another usequery hook to finishing pending. So if that query is quick, this problematic query loads fine. But if the table is stuck pending for a bit then it loads, this problematic query seems to never finish
manual-pink
manual-pink•11mo ago
Is table you're referring to @tanstack/vue-table?
metropolitan-bronze
metropolitan-bronzeOP•11mo ago
No it’s a vuetify table
manual-pink
manual-pink•11mo ago
Can you show some code?
metropolitan-bronze
metropolitan-bronzeOP•11mo ago
                <v-card color="blue-grey-lighten-4">
                            <v-card-text>
                              <DataChargeTable
                                ref="chargesPanelAllTable"
                                elevation="2"
                                rounded
                                show-ticket
                                show-bom
                                show-select
                                hide-footer
                                :job="id"
                                @update:selected="updateSelected"
                              ></DataChargeTable>
...



                      <v-divider
                        v-if="isPending"
                        class="mx-6"
                      ></v-divider>
                      isPending: {{ isPending }}
                      data: {{ data }}
                      <v-skeleton-loader
                        v-if="ticketsDataIsPending"
                        color="grey-lighten-3"
                        type="list-item-three-line"
                      ></v-skeleton-loader>

                      <div
                        v-for="(ticket, i) in data?.results"
                        :key="ticket.id"
                      >
                        <v-divider
                          class="mx-6"
                        ></v-divider>


const chargesPanelAllTable = ref(true)
const { data, isPending } = useQuery({
    enabled: computed(() => !import.meta.server && table.value?.isPending === false),
    queryKey: ['tickets', { deleted: 'False', job__id: id }],
    queryFn: ({ queryKey }) => {
      return $fetch(`${useAppConfig().urls.app}/api/${queryKey[0]}/?minimal&deleted=${queryKey[1].deleted}&job__id=${queryKey[1].job__id}`)
    },
})
                <v-card color="blue-grey-lighten-4">
                            <v-card-text>
                              <DataChargeTable
                                ref="chargesPanelAllTable"
                                elevation="2"
                                rounded
                                show-ticket
                                show-bom
                                show-select
                                hide-footer
                                :job="id"
                                @update:selected="updateSelected"
                              ></DataChargeTable>
...



                      <v-divider
                        v-if="isPending"
                        class="mx-6"
                      ></v-divider>
                      isPending: {{ isPending }}
                      data: {{ data }}
                      <v-skeleton-loader
                        v-if="ticketsDataIsPending"
                        color="grey-lighten-3"
                        type="list-item-three-line"
                      ></v-skeleton-loader>

                      <div
                        v-for="(ticket, i) in data?.results"
                        :key="ticket.id"
                      >
                        <v-divider
                          class="mx-6"
                        ></v-divider>


const chargesPanelAllTable = ref(true)
const { data, isPending } = useQuery({
    enabled: computed(() => !import.meta.server && table.value?.isPending === false),
    queryKey: ['tickets', { deleted: 'False', job__id: id }],
    queryFn: ({ queryKey }) => {
      return $fetch(`${useAppConfig().urls.app}/api/${queryKey[0]}/?minimal&deleted=${queryKey[1].deleted}&job__id=${queryKey[1].job__id}`)
    },
})
@wlnt
metropolitan-bronze
metropolitan-bronzeOP•11mo ago
also getting this error
No description
metropolitan-bronze
metropolitan-bronzeOP•11mo ago
I added a delay in the computed function and it seems to stack overflow when the computed value becomes true/query becomes enabled. its weird if the page loads with this already enabled theres no stackoverlow. there doesnt seem to be any circular dependency const ticketsQueryEnabled = ref(false); setTimeout(() => { ticketsQueryEnabled.value = true; }, 10000); i did this and it seems just having the query enabled a few seconds after load causes the stackoverflow
manual-pink
manual-pink•11mo ago
I don't see anything really obvious from your code sample. Hard to tell why are you hitting this issue tbh useAppConfig within queryFn is odd, but again idk what's this function does internally. If it's a composable, then it should be outside of useQuery
metropolitan-bronze
metropolitan-bronzeOP•11mo ago
thats just a nuxt tool to get a string value from the config. removing that doesnt change anything ok i just removed all instances of data and isPending from my template and it fixed it. so I think the issue is with something else going on in the template rendering

Did you find this page helpful?