Types not being shared with the frontend

Hello, I am currently trying to follow a guide to setup a new project and encountering this error in the client:

Property 'greet' does not exist on type 'TRPCClient<CreateRouterInner<RootConfig<{ ctx: { event: APIGatewayProxyEvent; apiVersion: string; user: string | undefined; }; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { ...; }>>'.ts(2339)

Property 'greet' does not exist on type 'TRPCClient<CreateRouterInner<RootConfig<{ ctx: { event: APIGatewayProxyEvent; apiVersion: string; user: string | undefined; }; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { ...; }>>'.ts(2339)

both projects have ts strict mode enabled. the same versions of trpc, and i installed the server package on the client

Solution:

switching to createTRPCProxyClient solved this problem

Jump to solution

4 Replies

scrubdaddyOP•6mo ago

here is the code that is producing the error:

import type { AppRouter } from "../../../lambda/api-handler/src/index";
import { createTRPCClient, httpBatchLink } from "@trpc/client";
const client = createTRPCClient<AppRouter>({
    links: [
        httpBatchLink({
            url: AWS_API_GATEWAY_URL + "/api",
        }),
    ],
});
    const q = await client.greet.query({ name: "Erik" });

import type { AppRouter } from "../../../lambda/api-handler/src/index";
import { createTRPCClient, httpBatchLink } from "@trpc/client";
const client = createTRPCClient<AppRouter>({
    links: [
        httpBatchLink({
            url: AWS_API_GATEWAY_URL + "/api",
        }),
    ],
});
    const q = await client.greet.query({ name: "Erik" });

the backend code is directly copied from one of the examples:

import { initTRPC } from "@trpc/server";
import type { CreateAWSLambdaContextOptions } from "@trpc/server/adapters/aws-lambda";
import { awsLambdaRequestHandler } from "@trpc/server/adapters/aws-lambda";
import type { APIGatewayProxyEvent } from "aws-lambda";
import { z } from "zod";

function createContext({
  event,
  context,
}: CreateAWSLambdaContextOptions<APIGatewayProxyEvent>) {
  return {
    event: event,
    apiVersion: (event as { version?: string }).version ?? "1.0",
    user: event.headers["x-user"],
  };
}
type Context = Awaited<ReturnType<typeof createContext>>;

const t = initTRPC.context<Context>().create();

const publicProcedure = t.procedure;
const router = t.router;

const appRouter = router({
  greet: publicProcedure
    .input(z.object({ name: z.string() }))
    .query(({ input, ctx }) => {
      return `Greetings, ${input.name}. x-user?: ${ctx.user}.`;
    }),
});

export type AppRouter = typeof appRouter;

export const handler = awsLambdaRequestHandler({
  router: appRouter,
  createContext,
});

import { initTRPC } from "@trpc/server";
import type { CreateAWSLambdaContextOptions } from "@trpc/server/adapters/aws-lambda";
import { awsLambdaRequestHandler } from "@trpc/server/adapters/aws-lambda";
import type { APIGatewayProxyEvent } from "aws-lambda";
import { z } from "zod";

function createContext({
  event,
  context,
}: CreateAWSLambdaContextOptions<APIGatewayProxyEvent>) {
  return {
    event: event,
    apiVersion: (event as { version?: string }).version ?? "1.0",
    user: event.headers["x-user"],
  };
}
type Context = Awaited<ReturnType<typeof createContext>>;

const t = initTRPC.context<Context>().create();

const publicProcedure = t.procedure;
const router = t.router;

const appRouter = router({
  greet: publicProcedure
    .input(z.object({ name: z.string() }))
    .query(({ input, ctx }) => {
      return `Greetings, ${input.name}. x-user?: ${ctx.user}.`;
    }),
});

export type AppRouter = typeof appRouter;

export const handler = awsLambdaRequestHandler({
  router: appRouter,
  createContext,
});

could this have something to do with rootdir?

scrubdaddyOP•6mo ago

on the backend, I can export a simple type to the frontend and it works. i can also see the greet property:

scrubdaddyOP•6mo ago

however when I import the AppRouter type on the frontend, it appears to be a blank version with no routes

Solution

scrubdaddy•6mo ago

switching to createTRPCProxyClient solved this problem

Types not being shared with the frontend

Did you find this page helpful?