jherr / trpc-on-the-app-router

Code for the tRPC on the App Router video

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

trpc-on-the-app-router's Issues

onError

this is a cool example, thanks!

is there a recommended way to globally handle trpc errors on the frontend?

e.g. i want to show a toast when a BAD_REQUEST error comes in?

i know the setup with the next adapter, but is there a similar approach for the createTRPCReact adapter?

When using a production build the initial data does not change after the build

When using a production build the initial data does not change after the build

you can see in the video the bugs it creates

trpc.problam.mp4

this only happens during the production build, not in the dev

Getting cors error when I try to access the list of todos

tried to tweak the next.config file, and/or add middleware for all cors origins and no luck at all.

Appreciate any suggestions as I have googled far and wide.

How to create nested routes?

When I try to create a nested route, it gives me an error.

const nestedRouter = router({
  greet: publicProcedure.query(() => "nested hello world"),
});


export const appRouter = router({
  greet: publicProcedure.query(async()=> "hello world"),
  nested: nestedRouter,
});

When I go to http://localhost:3000/api/trpc/greet it works, but not when I go to
http://localhost:3000/api/trpc/nested/greet. The error is

404
This page could not be found.

How can I make nested routes work with app dir?

nit: Possible misleading context definition in `createCaller`?

Thanks!

First of all, thank you for arguably the only NextJS 14 w/ App router + tRPC with an SSR example on the whole of the internets 🎉 !

Ok, on to the nit:

The createCaller function is designed to take in a context object (or a function that returns a context object), but here you are passing in a terminating link in links. It doesn't appear 1/ that this terminating link is used anywhere in the example codebase or 2/ that passing in a terminating link here would even be advisable.

For trpc newbs like me, this one could be misleading, unless I'm missing some magic here?

Thoughts?

trpc-on-the-app-router/src/app/_trpc/serverClient.ts

Lines 5 to 11 in 7455d30

	export const serverClient = appRouter.createCaller({
	links: [
	httpBatchLink({
	url: "http://localhost:3000/api/trpc",
	}),
	],
	});

Seems it would be better to pass in a context with say, the current session info from an auth provider, or a db connection reference, or just an {}?

createCaller impossible to use with context that requires NextRequest

I tried using this example to create a caller for my app which had both drizzle and clerk in the context, but it was impossible to make authed calls without the req/NextRequest object, so I tried replacing it with createTRPCProxyClient and it worked just fine like so:

const serverClient = createTRPCProxyClient<AppRouter>({
  transformer,
  links: [
    httpBatchLink({
      url: "http://localhost:3000/api/trpc",
    }),
  ],
});

I also had to add the req to the handler in the api route file like so:

const handler = (req: Request) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext: () => createContext({ req }),
  });

With my createContext looking like this

export const createContextInner = async ({ auth }: AuthContextProps) => {
  return {
    auth,
    db,
  };
};

export const createTRPCContext = async ({ req }: { req: Request }) => {
  // @ts-ignore
  return await createContextInner({ auth: getAuth(req) });
};

Still this example is incredible and I'm very grateful that you came up with it, incredible work!!

Missing package drizzle-orm

Module not found: Can't resolve 'drizzle-orm/sqlite-core'

Easily fixed by adding package...

TRPCClientError: "input" needs to be an object when doing a batch call

Steps to reproduce:

Clone, npm install, run dev

When adding text and clicking submit button, we get the following error:
TRPCClientError: "input" needs to be an object when doing a batch call...