VueCraft NPM

TanStack Query ​

retry()/reset() у <ErrorBoundary> только перерисовывают дерево. useQuery(), уже завершившемуся ошибкой, до этого нет дела — он остаётся в своём закэшированном состоянии ошибки и, при установленном throwOnError, при самом следующем рендере повторно выбрасывает ту же устаревшую ошибку, прежде чем его функция запроса вообще запустится заново. @tanstack/react-query решает это через QueryErrorResetBoundary; у @tanstack/vue-query нет эквивалентного примитива, поэтому его предоставляет vue-error-boundary-kit/tanstack-query.

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" />
      <!-- использует useQuery({ ..., throwOnError: true }) -->
    </template>
    <template #fallback="{ error, retry }">
      <ErrorState :message="error.message" @retry="retry" />
    </template>
  </ErrorBoundary>
</template>

useQueryErrorReset(options?) возвращает синхронный колбэк, сбрасывающий все запросы, находящиеся в состоянии ошибки (queryClient.resetQueries({ predicate: (query) => query.state.status === 'error' })), — подключите его к beforeReset, чтобы он запускался непосредственно перед собственным повторным рендером границы, и повторённый запрос действительно рефетчился, а не мгновенно проваливался снова.

Опции ​

queryClient ​

QueryClient · по умолчанию: useQueryClient() из контекста

id ​

string · по умолчанию: —

Передаётся в useQueryClient() для мультиклиентских настроек.

internalErrorPrefix ​

string · по умолчанию: '[vue-error-boundary-kit]'

@tanstack/vue-query — опциональная peer-зависимость, никогда не импортируется, если вы не импортируете эту точку входа.