1
const { data } = useQuery({
2
  // ^ 这里会自动推断为 number | undefined
3
  queryKey: ["test"],
4
  queryFn: () => Promise.resolve(5),
5
})

1
useMutation<A, B, C, D>(...)

1
export const useApprovalInstancePage = (
2
  params: Ref<ApprovalInstancesPageRequest> | ApprovalInstancesPageRequest,
3
  options?: {
4
    enabled?: Ref<boolean> | boolean
5
    refetchInterval?: number
6
  },
7
) => {
8
  return useQuery({
9
    queryKey: computed(() => approvalInstanceKeys.INSTANCE_PAGE(unref(params))),
10
    queryFn: () => approvalService.getInstancePage(unref(params)),
11
    enabled: computed(() => unref(options?.enabled ?? true)),
12
    refetchInterval: options?.refetchInterval,
13
    staleTime: 30 * 1000,
14
    placeholderData: (previousData) => previousData,
15
  })
16
}

1
["approval", "instances", "detail", 101]
2
["approval", "instances", "page", { page: 1, size: 10 }]

1
["role", "detail", roleId, "permissions"]

1
["userRole", "assignedUsers", { roleId }]
2
["userRole", "assignedRoles", { userId }]
3
["membership", "detail", { userId, roleId }]

1
["file", "get", { ids: [...ids] }]

1
["file", "get", { ids: [a, b].sort((x, y) => x - y) }]

1
queryClient.setQueryData(roleKeys.detail(role.id), role)

1
const MAX_QUERY_RETRY_COUNT = 2
2
const RETRYABLE_CLIENT_STATUS_CODES = new Set([408, 429])
3

4
function isRetryableHttpStatus(status: number): boolean {
5
  return status >= 500 || RETRYABLE_CLIENT_STATUS_CODES.has(status)
6
}
7

8
function resolveErrorStatus(error: unknown): number | undefined {
9
  if (error instanceof BusinessError) {
10
    return error.status
11
  }
12

13
  if (axios.isAxiosError(error)) {
14
    const problemDetails = error.response?.data as RFC7807Response<unknown> | undefined
15
    return error.response?.status ?? problemDetails?.status
16
  }
17

18
  return undefined
19
}
20

21
function isRetryableNetworkError(error: unknown): boolean {
22
  if (!axios.isAxiosError(error)) {
23
    return false
24
  }
25

26
  if (error.request && !error.response) {
27
    return true
28
  }
29

30
  return error.code === "ECONNABORTED"
31
}
32

33
function shouldRetryQueryError(failureCount: number, error: unknown): boolean {
34
  if (error instanceof Error && error.name === "CanceledError") {
35
    return false
36
  }
37

38
  const status = resolveErrorStatus(error)
39
  const retryableError =
40
    typeof status === "number"
41
      ? isRetryableHttpStatus(status)
42
      : isRetryableNetworkError(error)
43

44
  return retryableError && failureCount < MAX_QUERY_RETRY_COUNT
45
}

1
const globalSuccessHandler = (
2
  data: SuccessPayload,
3
  _variables: unknown,
4
  _context: unknown,
5
  query?: AppQuery,
6
  mutation?: AppMutation,
7
) => {
8
  const target = query ?? mutation
9
  if (!target) {
10
    return
11
  }
12

13
  const toastOnSuccessConfig = target.meta?.toastOnSuccess
14

15
  // best practice: success toast 默认关闭，仅显式开启才提示。
16
  if (toastOnSuccessConfig === undefined || toastOnSuccessConfig === false) {
17
    return
18
  }
19

20
  if (typeof toastOnSuccessConfig === "function") {
21
    if (query) {
22
      const handler = toastOnSuccessConfig as QuerySuccessToastHandler
23
      notification.success(handler(data, query))
24
      return
25
    }
26

27
    if (mutation) {
28
      const handler = toastOnSuccessConfig as MutationSuccessToastHandler
29
      notification.success(handler(data, mutation))
30
    }
31

32
    return
33
  }
34

35
  if (typeof toastOnSuccessConfig === "object" && toastOnSuccessConfig) {
36
    notification.success(toastOnSuccessConfig as NaiveNotificationOptions)
37
    return
38
  }
39

40
  if (toastOnSuccessConfig === true) {
41
    const successDetail = (() => {
42
      if (!data || typeof data !== "object") {
43
        return undefined
44
      }
45

46
      if ("config" in data && "data" in data) {
47
        return (data as AxiosResponse<RFC7807Response<unknown>>).data?.detail
48
      }
49

50
      if ("detail" in data) {
51
        return (data as RFC7807Response<unknown>).detail
52
      }
53

54
      return undefined
55
    })()
56

57
    notification.success({
58
      title: $t("common.status.success"),
59
      content: successDetail ?? $t("common.status.success"),
60
      duration: 5000,
61
      keepAliveOnHover: true,
62
    })
63
  }
64
}

1
import { hashKey, type QueryKey } from "@tanstack/query-core"
2
import { createRequestId } from "@/app/infrastructure/request/request-id"
3

4
const queryRequestIdPool = new Map<string, string>()
5
const toQueryHash = (queryKey: QueryKey): string => hashKey(queryKey)
6

7
export const getOrCreateQueryRequestId = (queryKey: QueryKey): string => {
8
  const queryHash = toQueryHash(queryKey)
9
  const cached = queryRequestIdPool.get(queryHash)
10
  if (cached) {
11
    return cached
12
  }
13

14
  const requestId = createRequestId()
15
  queryRequestIdPool.set(queryHash, requestId)
16
  return requestId
17
}
18

19
export const clearQueryRequestId = (queryKey: QueryKey): void => {
20
  queryRequestIdPool.delete(toQueryHash(queryKey))
21
}