每当我的组件状态发生变化时，即使我将启用设置为 false，UseQuery 也会重新获取

Question

我有这个自定义挂钩，用于获取多个请求

import dashboardApi from '@api/dashboardApi'
import { queryKeys } from '@constants/queryKeys'
import { TOP_PROJECT_SORT } from '@models/projectCost'
import { UseQueryOptions, UseQueryResult, useQuery } from '@tanstack/react-query'
import { NotifyService } from '@utils/notify'
import { AxiosError } from 'axios'

function useGetExportPDFData(
  queryOptions?: UseQueryOptions<any, any, any, any>,
): UseQueryResult<any, any> {
  // if top member mode is custom time range, then don't pass query and cal API of previous data
  const requests = [
    dashboardApi.getTopProjects({
      sortBy: TOP_PROJECT_SORT.AverageCost,
      order: 'desc',
      limit: '6',
    }),
  ]

  return useQuery(
    [queryKeys.account],
    async () => {
      return await Promise.all(requests)
    },
    {
      enabled: false,
      onError: (error: AxiosError) => {
        NotifyService.error(error)
      },
      ...queryOptions,
    },
  )
}

export default useGetExportPDFData

问题是每当 2 jotai 状态发生变化（topMemberTimeRange 和 customDateRange）时，它也会再次重新获取，尽管我确实将启用设置为 false，但我只想在调用重新获取时触发此操作。如何做到这一点？

import MainPageLayout from '@components/layout/MainPageLayout'
import PersonalRevenueHeader from '@features/personal-revenue/components/PersonalRevenueHeader'
import { TopMemberMode } from '@features/personal-revenue/constant'
import useGetExportPDFData from '@features/personal-revenue/hooks/useGetExportPDFData'
import { RevenuetMember, TableRevenueMember, TopMemberResponse } from '@models/personalRevenue'
import { calculatePercentageChange } from '@utils/common'
import { useAtom } from 'jotai'
import _ from 'lodash'
import { Outlet } from 'react-router-dom'
import pdf from './pdf'
import { customTimeRange, topMemberTimeRangeQuery } from './store'

function PersonalRevenue() {
  const [topMemberTimeRange] = useAtom(topMemberTimeRangeQuery)
  const [customDateRange] = useAtom(customTimeRange)
  const { refetch } = useGetExportPDFData({
    enabled: false,
    refetchOnWindowFocus: false,
    refetchOnMount: false,
  })
  return (
    <MainPageLayout
      title="PERSONAL REVENUE"
      header={<PersonalRevenueHeader exportData={exportPDF} />}
    >
      <Outlet />
    </MainPageLayout>
  )
}

Answer 1

const requests = [
  dashboardApi.getTopProjects({
    sortBy: TOP_PROJECT_SORT.AverageCost,
    order: 'desc',
    limit: '6',
  }),
]

这段代码位于钩子的主体中，这意味着它位于组件的主体中。因此，每次组件渲染时，您都会调用

getTopProjects(/*...*/)

。

您需要将此代码移动到查询函数中：

return useQuery(
  [queryKeys.account],
  async () => {
    const requests = [
      dashboardApi.getTopProjects({
        sortBy: TOP_PROJECT_SORT.AverageCost,
        order: "desc",
        limit: "6",
      }),
    ];
    return await Promise.all(requests);
  },
  {
    enabled: false,
    onError: (error: AxiosError) => {
      NotifyService.error(error);
    },
    ...queryOptions,
  },
);