neoney Posts

neoney

•Created by neoney on 3/14/2025 in #❓-help

state change not triggering refetch

I have this query in my app:

const [filter, setFilter] = useState({
    value: "",
    property: "coupon",
  });

  const [sorting, setSorting] = useState([
    {
      id: "createdAt",
      desc: false,
    },
  ]);

  const trpc = useTRPC();
  const queryCoupons = useInfiniteQuery(
    trpc.coupons.list.infiniteQueryOptions(
      {
        limit: pageSize,
        filter,
        direction: sorting[0]?.desc ? "backward" : "forward",
      },
      {
        getNextPageParam: (lastPage) => lastPage.nextCursor,
        getPreviousPageParam: (_firstPage, allPages) => {
          const firstPageCursor = allPages[0]?.result[0]?.createdAt;
          return firstPageCursor;
        },
      },
    ),
  );

const [filter, setFilter] = useState({
    value: "",
    property: "coupon",
  });

  const [sorting, setSorting] = useState([
    {
      id: "createdAt",
      desc: false,
    },
  ]);

  const trpc = useTRPC();
  const queryCoupons = useInfiniteQuery(
    trpc.coupons.list.infiniteQueryOptions(
      {
        limit: pageSize,
        filter,
        direction: sorting[0]?.desc ? "backward" : "forward",
      },
      {
        getNextPageParam: (lastPage) => lastPage.nextCursor,
        getPreviousPageParam: (_firstPage, allPages) => {
          const firstPageCursor = allPages[0]?.result[0]?.createdAt;
          return firstPageCursor;
        },
      },
    ),
  );

When I change the filter parameter, the query refetches as usual. However, when I change sorting[0].desc, it just doesn't. I've also tried to manually refetch it in a useEffect, but it just fetches with the stale input. I tried refactoring the direction logic into a useMemo that just returns the string - that does nothing. Again, I can confirm with a useEffect that the sorting direction does indeed change. It's also kinda weird that it works for filter and not direction.

6 replies

TtRPC

•Created by neoney on 10/26/2023 in #❓-help

Access procedures with same names and same parameters, but in different routers, generically

My trpc structure looks something like this:

trpc
  - router1
    - routerX
      - proc1
  - router2
    - routerX
      - proc1

trpc
  - router1
    - routerX
      - proc1
  - router2
    - routerX
      - proc1

Basically, I have multiple routers, but they all have pretty much the same signatures - they always have mostly the same parameters, but the return types are different for some. I can't currently do anything like trpc[router].routerX.proc1.useQuery(), because Typescript throws an error - Each member of the union type [...] has signatures, but none of these signatures are compatible with each other. I can kinda work around it like this:

    type Params =
      | Parameters<typeof trpc.router1.routerX.proc1.useQuery>
      | Parameters<typeof trpc.router2.routerX.proc1.useQuery>;

    type Returned =
      | ReturnType<typeof trpc.router1.routerX.proc1.useQuery>
      | ReturnType<typeof trpc.router2.routerX.proc1.useQuery>;

    type Fn = (...args: Params) => Returned;

    return trpc[router].routerX.proc1.useQuery as Fn;

    type Params =
      | Parameters<typeof trpc.router1.routerX.proc1.useQuery>
      | Parameters<typeof trpc.router2.routerX.proc1.useQuery>;

    type Returned =
      | ReturnType<typeof trpc.router1.routerX.proc1.useQuery>
      | ReturnType<typeof trpc.router2.routerX.proc1.useQuery>;

    type Fn = (...args: Params) => Returned;

    return trpc[router].routerX.proc1.useQuery as Fn;

But in the returned useQuery hook, the type of data is unknown.

2 replies