T
TanStack•3w ago
deep-jade

Errors are being thrown twice with suspense: true, typings for data shouldn't be undefined

The parent is something like this: 
<script lang="ts" setup>
import { queuePostFlushCb } from 'vue'
const errors = ref<Error[]>([])

onErrorCaptured((error) => {
  // onErrorCaptured is invoked in Vue’s "error propagation" phase, which happens outside of the normal component update cycle.
  // If you mutate your state right there, the scheduler can miss it.
  queuePostFlushCb(() => {
    // schedules *after* Vue has finished updating everything
    errors.value.push(error)
  })
  // stop further propagation
  return false
})
</script>
<template>
  <v-main class="ma-4">
    <v-alert
      v-for="(error, i) in errors"
      :key="i"
      closable
      :text="error.message"
      title="Ops!"
      type="error"
      variant="tonal"
      @click:close="errors.splice(i, 1)"
    />

    <Suspense>
      <router-view />
      <template #fallback> Loading... </template>
    </Suspense>
  </v-main>
</template>
<script lang="ts" setup>
import { queuePostFlushCb } from 'vue'
const errors = ref<Error[]>([])

onErrorCaptured((error) => {
  // onErrorCaptured is invoked in Vue’s "error propagation" phase, which happens outside of the normal component update cycle.
  // If you mutate your state right there, the scheduler can miss it.
  queuePostFlushCb(() => {
    // schedules *after* Vue has finished updating everything
    errors.value.push(error)
  })
  // stop further propagation
  return false
})
</script>
<template>
  <v-main class="ma-4">
    <v-alert
      v-for="(error, i) in errors"
      :key="i"
      closable
      :text="error.message"
      title="Ops!"
      type="error"
      variant="tonal"
      @click:close="errors.splice(i, 1)"
    />

    <Suspense>
      <router-view />
      <template #fallback> Loading... </template>
    </Suspense>
  </v-main>
</template>
This is the page which is going to be rendered inside router-view: 
const { data, suspense } = useQuery({
  queryKey: ['/endpoint', route.params.id] as const,
  queryFn: async ({ signal, queryKey: [url, id] }) => { [...] },
  throwOnError: true,
  suspense: true,
  retry: 0
})

await suspense()

if (data.value == null) throw new Error('undefined data')
const { data, suspense } = useQuery({
  queryKey: ['/endpoint', route.params.id] as const,
  queryFn: async ({ signal, queryKey: [url, id] }) => { [...] },
  throwOnError: true,
  suspense: true,
  retry: 0
})

await suspense()

if (data.value == null) throw new Error('undefined data')
The parent page captures the same error twice: one of which from await suspense(). Is there any way to avoiding catching the same error twice? Also when using suspense: true I expect data to not possibly be undefined but according to the typings that's not the case. Shouldn't the typings get rid of the union with undefined whenever you use suspense: true?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?