TanStack Solid-Query查询参数更新失效问题求助

问题原因 #

你的代码里，createQuery 的第二个参数直接传了静态对象 { query: { name: name() } }，这里的 name() 只会在组件首次渲染时执行一次。哪怕后续输入框更新了 name 信号，这个配置对象不会重新生成，导致请求携带的始终是初始的 undefined。而查询键用了响应式函数，所以能触发重新请求，但参数没跟上。

修复方案 #

把查询参数的配置改成函数形式，让它每次触发查询时都能获取最新的 name 信号值：

import { For, Match, Switch, createSignal } from "solid-js";
import { MedServiceItem } from "./MedServiceItem";
import { useLocale } from "@/features/locale/locale.context";
import { BiRegularSearchAlt } from "solid-icons/bi";
import { apiClient } from "@/api/api-client";

export const MedServiceList = () => {
  const locale = useLocale();

  const [name, setName] = createSignal<string>();

  const servicesQuery = apiClient.medServices.getAll.createQuery(
    () => ["services", name()],
    // 将查询参数配置改为函数，确保每次请求都获取最新的name值
    () => ({ query: { name: name() } })
  );

  return (
    <div class="flex flex-col gap-6">
      <div>
        <div
          class="flex items-center  border-[0.5px] border-gray-600 rounded-sm 
          h-[2.5rem] w-[16rem] p-2 gap-2"
        >
          <BiRegularSearchAlt class="text-white scale-150" />
          <input
            type="text"
            class="bg-transparent flex-1 text-white shadow-lg"
            placeholder={locale.t("filterServiceName")}
            onInput={(e) => {
              setName(e.target.value);
            }}
          />
        </div>
      </div>
      <Switch>
        <Match when={servicesQuery.isLoading}>
          <div class="flex justify-center items-center h-full">
            <p class="text-white">加载中...</p>
          </div>
        </Match>
        <Match when={servicesQuery.isError && servicesQuery.error}>
          <p class="text-white">错误: {servicesQuery.error?.body as string}</p>
        </Match>
        <Match when={servicesQuery.isSuccess}>
          <div class="flex flex-col gap-4">
            <For each={servicesQuery.data?.body}>
              {(ser) => <MedServiceItem medService={ser} />}
            </For>
          </div>
        </Match>
      </Switch>
    </div>
  );
};

关键说明 #

• TanStack Query（包括Solid-Query）中，当需要让查询配置跟随响应式变量更新时，必须把配置项写成函数，这样每次查询触发时都会重新执行函数，获取最新的变量值。
• 原代码中查询键已经用了响应式函数，所以能正确触发重新请求，但参数配置没做响应式处理，导致参数不更新。改成函数后，参数会和查询键同步更新。

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