跳到主要内容

查询与变更

@vef-framework-react/core 重导出了 TanStack React Query，并提供了 VEF 专属的类型包装和预配置的 QueryClient。

createQueryClient​

创建带有 mutation cache 和默认选项的 QueryClient。

import { createQueryClient } from "@vef-framework-react/core";

const queryClient = createQueryClient({
  staleTime: 5_000,
  gcTime: 300_000,
  showSuccessMessage: message => notification.success(message)
});

QueryClientOptions​

选项类型默认值说明
staleTimenumber5000数据过期时间（毫秒）
gcTimenumber300000非活跃查询垃圾回收时间（毫秒）
showSuccessMessage(msg) => void—变更成功消息回调

useQuery​

import { useQuery } from "@vef-framework-react/core";

const result = useQuery({
  queryKey: [findUserPage.key, searchParams],
  queryFn: findUserPage
});

useMutation​

import { useMutation } from "@vef-framework-react/core";

const mutation = useMutation({
  mutationKey: [createUser.key],
  mutationFn: createUser,
  meta: {
    invalidates: [[findUserPage.key]],
    shouldShowSuccessFeedback: true
  }
});

Mutation Meta 扩展​

VEF 在 TanStack 的 MutationMeta 基础上扩展了两个字段：

字段类型说明
invalidatesQueryKey[]变更成功后需要失效的查询键
shouldShowSuccessFeedbackboolean是否显示成功消息（默认：true）

useInfiniteQuery​

import { useInfiniteQuery } from "@vef-framework-react/core";

const result = useInfiniteQuery({
  queryKey: [findUserPage.key, searchParams],
  queryFn: findUserPage,
  initialPageParam: 1,
  getNextPageParam: (lastPage, pages) => pages.length + 1
});

useQueries​

import { useQueries } from "@vef-framework-react/core";

const results = useQueries({
  queries: [
    { queryKey: [findUserPage.key, params1], queryFn: findUserPage },
    { queryKey: [findRoleList.key], queryFn: findRoleList }
  ]
});

useMutationState​

import { useMutationState } from "@vef-framework-react/core";

const states = useMutationState({
  filters: { mutationKey: [createUser.key] }
});

useIsFetching 和 useIsMutating​

检查全局 fetch/mutation 状态的底层 hook。大多数情况下，优先使用 @vef-framework-react/hooks 中的 useHasFetching 和 useHasMutating，它们接受类型化的查询/变更键。

keepPreviousData​

import { keepPreviousData } from "@vef-framework-react/core";

useQuery({
  queryKey: [findUserPage.key, searchParams],
  queryFn: findUserPage,
  placeholderData: keepPreviousData
});

skipQueryToken​

import { skipQueryToken } from "@vef-framework-react/core";

useQuery({
  queryKey: [findUserPage.key, searchParams],
  queryFn: searchParams ? findUserPage : skipQueryToken
});

matchQuery 和 matchMutation​

用于缓存操作中过滤查询和变更的辅助函数：

import { matchQuery, matchMutation } from "@vef-framework-react/core";

类型导出​

类型说明
UseQueryResult<TData>useQuery 的结果类型
DefinedUseQueryResult<TData>初始数据已定义时的结果类型
UseQueryOptions<TQueryFnData, TData, TParams>useQuery 的选项类型
DefinedInitialDataOptions初始数据始终存在时的选项类型
UndefinedInitialDataOptions初始数据可能不存在时的选项类型
UseInfiniteQueryOptionsuseInfiniteQuery 的选项类型
UseMutationResult<TData, TParams>useMutation 的结果类型
QueryKeyHashFunction自定义查询键哈希函数类型
PlaceholderDataFunctionplaceholderData 回调类型
RefetchOptionsrefetch() 的选项类型
StaleTimestaleTime 选项类型
MutationMeta扩展后的变更元数据类型
QueryMeta查询元数据类型
SkipQueryTokenskipQueryToken 的类型