How to get access to the types generated by the server in the frontend (React)?
In this example, how do you replace
data: any
to the correct type?
import { trpc } from "../utils/trpc";
type Props = {
onSuccess: (data: any) => void;
};
export function CreateWorker(props: Props) {
const createWorkerMutation = trpc.createWorker.useMutation();
const handleCreateWorker = () => {
createWorkerMutation.mutate(
{ data: "hello" },
{
onSuccess: (data) => props.onSuccess(data),
}
);
};
return <button onClick={handleCreateWorker}>create</button>;
}
import { trpc } from "../utils/trpc";
type Props = {
onSuccess: (data: any) => void;
};
export function CreateWorker(props: Props) {
const createWorkerMutation = trpc.createWorker.useMutation();
const handleCreateWorker = () => {
createWorkerMutation.mutate(
{ data: "hello" },
{
onSuccess: (data) => props.onSuccess(data),
}
);
};
return <button onClick={handleCreateWorker}>create</button>;
}
1 Reply
I found this. is it the good approach?
import type { AppRouter } from "../../../server";
import type { inferRouterOutputs } from "@trpc/server";
export type RouterOutputs = inferRouterOutputs<AppRouter>;
type Props = {
onSuccess: (data: RouterOutputs["createWorker"]) => void;
};
import type { AppRouter } from "../../../server";
import type { inferRouterOutputs } from "@trpc/server";
export type RouterOutputs = inferRouterOutputs<AppRouter>;
type Props = {
onSuccess: (data: RouterOutputs["createWorker"]) => void;
};