如何在TanStack Query中实现带动态参数的查询？

1. 调整自定义Query Hook，支持手动触发 #

原有的resultQuery直接依赖组件内部状态，需要改成接收外部参数，并启用手动触发模式，同时返回用于触发查询的refetch方法：

import { useQuery } from '@tanstack/react-query';
import { getUsers } from './你的API文件路径';

export const resultQuery = (params) => {
  const { isPending, error, data, isFetching, refetch } = useQuery({
    queryKey: ["users", params.from, params.end, params.year, params.college, params.type],
    queryFn: () => getUsers(params.from, params.end, params.year, params.college, params.type),
    enabled: false, // 禁用自动触发，仅允许手动调用refetch
    refetchOnWindowFocus: false, // 可选：避免窗口聚焦时自动重新查询
  });

  return { isPending, error, data, isFetching, refetch };
};

2. 在组件中绑定点击事件触发查询 #

在你的业务组件中，将状态里的查询参数传给自定义Hook，拿到refetch后，在按钮点击事件中调用它即可：

import { useState } from 'react';
import { resultQuery } from './你的Query Hook文件路径';

const YourComponent = () => {
  const [queryParams, setQueryParams] = useState({
    from: "",
    end: "",
    year: "",
    college: "",
    type: "",
  });

  // 将当前状态参数传入Query Hook
  const { isPending, error, data, isFetching, refetch } = resultQuery(queryParams);

  const handleClick = async () => {
    // 可选：先校验参数完整性，避免无效请求
    if (!queryParams.from || !queryParams.end || !queryParams.year || !queryParams.college || !queryParams.type) {
      alert('请填写完整查询参数');
      return;
    }
    // 手动触发查询
    await refetch();
  };

  return (
    <div>
      {/* 这里放置参数输入表单，用于更新queryParams状态 */}
      <input
        type="text"
        value={queryParams.from}
        onChange={(e) => setQueryParams(prev => ({...prev, from: e.target.value}))}
        placeholder="From"
      />
      {/* 其余参数输入框同理 */}
      
      <button onClick={handleClick} disabled={isPending}>
        {isPending ? '加载中...' : '查询数据'}
      </button>

      {/* 结果展示区域 */}
      {error && <div>查询出错：{error.message}</div>}
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
};

export default YourComponent;

关键说明 #

• enabled: false：强制TanStack Query不自动执行查询，完全由手动调用refetch控制触发时机。
• queryKey包含所有参数：确保不同参数组合的查询结果会被独立缓存，避免数据混淆。
• 参数校验：点击前校验参数完整性，能减少无效的API请求，提升体验。

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