VueCraft NPM

TanStack Query ​

<ErrorBoundary>'s retry()/reset() only re-render the tree. A useQuery() that already failed doesn't care — it stays in its cached error state and, with throwOnError set, re-throws that same stale error on the very next render, before its query function ever runs again. @tanstack/react-query solves this with QueryErrorResetBoundary; @tanstack/vue-query has no equivalent primitive, so vue-error-boundary-kit/tanstack-query provides one.

useQueryErrorReset():

ts
import { useQueryErrorReset } from 'vue-error-boundary-kit/tanstack-query'
vue
<script setup lang="ts">
const resetErroredQueries = useQueryErrorReset()
</script>

<template>
  <ErrorBoundary :before-reset="resetErroredQueries">
    <template #default>
      <UserProfile :id="userId" />
      <!-- uses useQuery({ ..., throwOnError: true }) -->
    </template>
    <template #fallback="{ error, retry }">
      <ErrorState :message="error.message" @retry="retry" />
    </template>
  </ErrorBoundary>
</template>

useQueryErrorReset(options?) returns a synchronous callback that resets every query currently in an error state (queryClient.resetQueries({ predicate: (query) => query.state.status === 'error' })) — wire it into beforeReset so it runs right before the boundary's own re-render, and the retried query actually refetches instead of instantly failing again.

Options ​

queryClient ​

QueryClient · default: useQueryClient() from context

id ​

string · default: —

Forwarded to useQueryClient() for multi-client setups.

internalErrorPrefix ​

string · default: '[vue-error-boundary-kit]'

@tanstack/vue-query is an optional peer dependency — never imported unless you import this entry point.