如何用React Query Kit正确发起带参数的条件式GET请求？

当前写法的问题 #

1. 硬编码参数：你在queryFn里把postal_code固定成了12345，完全没法动态传递用户输入的邮政编码。
2. 冗余状态控制：用额外的triggerQuery状态来控制请求触发确实没必要，React Query本身可以通过参数是否有效来控制enabled。

正确实现方案 #

第一步：修改自定义Hook，支持动态传参

利用React Query Kit的queryKey传递参数，让Hook能接收外部传入的邮政编码：

import { createQuery } from "react-query-kit";
import { request } from "@/lib/proxyClient";
import { RequestError } from "@/shared/helpers/RequestError";

// 定义QueryKey的类型，明确参数结构
type QueryKeyParams = { postalCode: string };
type QueryKey = [string, QueryKeyParams];

export const useAutofillCityName = createQuery({
  primaryKey: "/api/postal-code",
  // 从queryKey中解构出动态参数
  queryFn: async ({ queryKey: [primaryKey, { postalCode }] }) => {
    try {
      const response = await request.get<any>(primaryKey, { 
        params: { postal_code: postalCode } 
      });
      return response?.data;
    } catch (err) {
      throw new RequestError(err);
    }
  },
  useErrorBoundary: false,
});

第二步：组件中调用Hook，自动触发请求

直接用用户输入的邮政编码作为参数，通过enabled控制请求时机，无需额外状态：

import { useState } from "react";
import { useAutofillCityName } from "@/hooks/useAutofillCityName";

export default function PostalCodeInput() {
  // 受控状态存储用户输入的邮政编码
  const [postalCode, setPostalCode] = useState("");

  // 传入动态参数，当邮政编码不为空时自动触发请求
  const { data: cityName, error, isLoading } = useAutofillCityName({
    queryKey: ["/api/postal-code", { postalCode }],
    enabled: !!postalCode, // 仅当postalCode有值时执行请求
  });

  return (
    <div>
      <input
        type="text"
        value={postalCode}
        onChange={(e) => setPostalCode(e.target.value.trim())}
        placeholder="输入邮政编码"
      />
      {isLoading && <p>加载中...</p>}
      {error && <p>获取失败：{error.message}</p>}
      {cityName && <p>对应城市：{cityName}</p>}
    </div>
  );
}

手动触发请求的场景（可选） #

如果需要用户点击按钮才发起请求，而不是输入后自动触发，可以关闭自动执行，调用refetch方法：

const { data: cityName, error, isLoading, refetch } = useAutofillCityName({
  queryKey: ["/api/postal-code", { postalCode }],
  enabled: false, // 默认不自动执行
});

// 点击按钮触发请求
<button 
  onClick={() => refetch()} 
  disabled={!postalCode}
>
  查询城市
</button>

关键说明 #

• 缓存区分：React Query会根据完整的queryKey缓存数据，不同的邮政编码会生成独立的缓存条目，避免数据混淆。
• 自动依赖追踪：当postalCode变化时，queryKey更新，React Query会自动重新发起请求（如果enabled为true）。

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