如何在React Query中仅手动搜索或页面变更时触发API调用？

你可以通过两种方式实现需求：阻止组件挂载时的初始API调用，仅在分页参数变更或用户点击搜索按钮时触发查询。

方案一：利用enabled状态与queryKey自动管理查询触发 #

这种方式更贴合React Query的设计理念，通过控制查询的启用状态和更新查询键来自动触发请求：

1. 添加状态存储用户确认的搜索条件，避免表单输入变更时自动触发查询
2. 通过enabled控制查询仅在用户首次搜索后启用
3. 将分页参数和已确认的搜索条件加入queryKey，分页变更时自动触发查询

const [selectedPage, setSelectedPage] = useState<number>(1);
const [resultsPerPage, setResultsPerPage] = useState<number>(2);
// 存储用户点击搜索时的过滤条件，初始为null阻止初始查询
const [confirmedFilters, setConfirmedFilters] = useState<typeof advancedFilter | null>(null);

const { data, isFetching } = useQuery<any[], Error>({
  queryKey: ['advancedSearch', confirmedFilters, selectedPage, resultsPerPage],
  // 使用已确认的过滤条件，确保分页时用的是上次搜索的参数
  queryFn: () => fetchAdvancedSearch(confirmedFilters!, selectedPage, resultsPerPage),
  // 仅当confirmedFilters存在时才允许查询
  enabled: Boolean(confirmedFilters),
});

const handleSearch = () => {
  // 保存当前表单的过滤条件，触发查询启用状态变更
  setConfirmedFilters(advancedFilter);
};

逻辑说明： #

• 组件挂载时confirmedFilters为null，enabled为false，不会触发初始API调用
• 用户点击搜索按钮后，confirmedFilters更新为当前表单值，enabled变为true，queryKey变化触发API调用
• 当selectedPage或resultsPerPage变更时，queryKey更新，结合enabled: true自动触发新的查询，使用的是上次确认的过滤条件
• 用户修改表单后，需再次点击搜索按钮才会更新confirmedFilters并触发新查询

方案二：手动监听分页变化调用refetch #

如果更倾向于手动控制查询触发时机，可以禁用自动查询，通过useEffect监听分页参数变化，在用户首次搜索后自动调用refetch：

const [selectedPage, setSelectedPage] = useState<number>(1);
const [resultsPerPage, setResultsPerPage] = useState<number>(2);
// 标记用户是否已执行过搜索
const [hasInitiatedSearch, setHasInitiatedSearch] = useState(false);

const { data, isFetching, refetch } = useQuery<any[], Error>({
  queryKey: ['advancedSearch', selectedPage, resultsPerPage],
  queryFn: () => fetchAdvancedSearch(advancedFilter, selectedPage, resultsPerPage),
  // 完全禁用自动查询
  enabled: false,
});

// 监听分页参数变化，已搜索过则自动触发查询
useEffect(() => {
  if (hasInitiatedSearch) {
    refetch();
  }
}, [selectedPage, resultsPerPage, hasInitiatedSearch, refetch]);

const handleSearch = () => {
  setHasInitiatedSearch(true);
  refetch();
};

逻辑说明： #

• enabled: false直接阻止组件挂载时的初始查询
• 用户点击搜索按钮后，标记hasInitiatedSearch为true并手动调用refetch触发首次查询
• 后续分页参数变更时，useEffect检测到变化，结合hasInitiatedSearch: true自动调用refetch
• 表单修改后，点击搜索按钮即可用新的过滤条件触发查询

内容的提问来源于stack exchange，提问作者Jorge Montejo