TanStackT
TanStack4mo ago
9 replies
endless-jade

type broken on useServerFn?

Sorry for the AI generated summary, but just wanted a clean reproducible version of the issue:

import { useMutation } from "@tanstack/react-query";
import { useServerFn } from "@tanstack/react-start";

type SigninInput = { email: string; password: string };
type SigninResult = { user: { id: string; name: string }; token: string };

function signin$(args: { data: SigninInput }): Promise<SigninResult> {
  return Promise.resolve({
    user: { id: "123", name: "John Doe" },
    token: "abc",
  });
}

// Case 1: Inline use — causes type issue (data is `unknown`)
const inlineCase = useMutation({
  mutationFn: useServerFn(signin$),
  onSuccess: (data) => {
    // @ts-expect-error — data is `unknown`
    console.log(data.user.id);
  },
});

inlineCase.mutate({ data: { email: "a@b.com", password: "123456" } });

// Case 2: Const-first use — fixes the type issue
const serverFn = useServerFn(signin$);

const constCase = useMutation({
  mutationFn: serverFn,
  onSuccess: (data) => {
    const idUpper = data.user.id.toUpperCase();
    console.log("constCase:", idUpper);
  },
});

constCase.mutate({ data: { email: "a@b.com", password: "123456" } });
Was this page helpful?