tanstack/solid-query query param update state problem

Question

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()],

    { 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);
              console.log(name());
            }}
          />
        </div>
      </div>
      <Switch>
        <Match when={servicesQuery.isLoading}>
          <div class="flex justify-center items-center h-full">
            <p class="text-white">isLoading</p>
          </div>
        </Match>
        <Match when={servicesQuery.isError && servicesQuery.error}>
          <p class="text-white">Error: {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>
  );
};

i want update the state of query param of the name when the user input in the text input but it does not work, the state update successfully and the request send again when the user input on the text input but the query param of the name still undefinded

i want to make the request send again by the solid-query when the user enter input in the text input and sent it as an query param for the name/

Answer 1

i found the solution:

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

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

  const [serviceName, setServiceName] = createSignal<string>("");
  const [serviceCode, setServiceCode] = createSignal<string>("");

  const servicesQuery = apiClient.medServices.getAll.createQuery(
    () => ["services", serviceName(), serviceCode()],
    {
      query: {
        get name() {
          return serviceName();
        },
        get code() {
          return serviceCode();
        },
      },
    }
  );

  return (
    <div class="flex flex-col gap-6">
      <div class="flex gap-2">
        <div
          class="flex items-center border-[0.5px] border-gray-600 rounded-sm 
          shadow-lg 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 w-full"
            placeholder={locale.t("filterServiceName")}
            onInput={(e) => {
              setServiceName(e.target.value);
            }}
          />
        </div>
        <div
          class="flex items-center  border-[0.5px] border-gray-600 rounded-sm 
          shadow-lg 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 w-full"
            placeholder={locale.t("filterServiceCode")}
            onInput={(e) => {
              setServiceCode(e.target.value);
            }}
          />
        </div>
      </div>
      <Switch>
        <Match when={servicesQuery.isLoading}>
          <div class="flex justify-center items-center h-full">
            <p class="text-white">isLoading</p>
          </div>
        </Match>
        <Match when={servicesQuery.isError && servicesQuery.error}>
          <p class="text-white">Error: {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>
  );
};