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>;
}

2 Replies

Alan_sztOP•8mo ago

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;
};

Alan_sztOP•4mo ago

https://trpc.io/docs/client/vanilla/infer-types#inferring-input--output-types

Inferring Types | tRPC

It is often useful to access the types of your API within your clients. For this purpose, you are able to infer the types contained in your AppRouter.

How to get access to the types generated by the server in the frontend (React)?

Did you find this page helpful?