LaunchThat.App•2y ago

[HOW TO?] Call trpc endpoints from vanilla nextJs api routes

Spinoff from an og thread here: https://discordapp.com/channels/867764511159091230/1032301198990135347 HI! I am wanting to do the same thing...call a trpc route from within a nextjs public api endpoint. I am using a fresh t3-turbo-with-clerk project which has trpc in packages/api (@acme/api) here is my apps/nextjs/src/pages/api/post.ts file

import { NextApiRequest, NextApiResponse } from "next";
import { appRouter } from "@acme/api";
import { getHTTPStatusCodeFromError } from "@trpc/server/http";
import { TRPCError } from "@trpc/server";

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const caller = appRouter.createCaller({});

  try {
    const result = await caller.post.all();
    res.status(200).json(result);
  } catch (e) {
    console.error(e);
    const code = e instanceof TRPCError ? getHTTPStatusCodeFromError(e) : 500;
    res.status(code).json({ error: e });
  }
};

export default handler;

import { NextApiRequest, NextApiResponse } from "next";
import { appRouter } from "@acme/api";
import { getHTTPStatusCodeFromError } from "@trpc/server/http";
import { TRPCError } from "@trpc/server";

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const caller = appRouter.createCaller({});

  try {
    const result = await caller.post.all();
    res.status(200).json(result);
  } catch (e) {
    console.error(e);
    const code = e instanceof TRPCError ? getHTTPStatusCodeFromError(e) : 500;
    res.status(code).json({ error: e });
  }
};

export default handler;

10 Replies

LaunchThat.AppOP•2y ago

i am getting a type error on

const caller = appRouter.createCaller({});

const caller = appRouter.createCaller({});

Argument of type '{}' is not assignable to parameter of type '{ auth: SignedInAuthObject | SignedOutAuthObject; prisma: PrismaClient<Prisma.PrismaClientOptions, never, Prisma.RejectOnNotFound | Prisma.RejectPerOperation | undefined>; }'.

Argument of type '{}' is not assignable to parameter of type '{ auth: SignedInAuthObject | SignedOutAuthObject; prisma: PrismaClient<Prisma.PrismaClientOptions, never, Prisma.RejectOnNotFound | Prisma.RejectPerOperation | undefined>; }'.

and when i load the page i get a json error:

{"error":{"code":"INTERNAL_SERVER_ERROR","name":"TRPCError"}}

{"error":{"code":"INTERNAL_SERVER_ERROR","name":"TRPCError"}}

Can someone assist me with the issue? I know I could use https://github.com/jlalmes/trpc-openapi to expose routes, I just wanted to get a basic example working first and then look into that. I am only exposing routes atm for testing purposes from what I can see, const caller = appRouter.createCaller({}); needs a ctx parameter. my @acme/api/index.ts file has

export type { AppRouter } from "./src/router";
export { appRouter } from "./src/router";

export { createContext } from "./src/context";
export type { Context } from "./src/context";

export type { AppRouter } from "./src/router";
export { appRouter } from "./src/router";

export { createContext } from "./src/context";
export type { Context } from "./src/context";

Nick•2y ago

Have you looked at our nextjs docs?

Nick•2y ago

https://trpc.io/docs/nextjs/introduction

Next.js Integration | tRPC

tRPC ❤️ Next.js

LaunchThat.AppOP•2y ago

yes, i have been flipping through them all day https://trpc.io/docs/server/server-side-calls#example-for-a-nextjs-api-endpoint

Nick•2y ago

You shouldn't need createCaller We have serverside helpers Problem looks like you're not actually creating the necessary ctx object but you shouldn't need to do it here

LaunchThat.AppOP•2y ago

the documentation explains using createCaller for nextjs api endpoints via that link above. Why wouldnt I need it? I have used the SSG helper in a pages/post/[id].tsx page, but didnt think that was the correct way to use it in an API route per the trpc documentation

Nick•2y ago

Got it, I'm not really a user of next, but yes looks like we do recommend that in some situations You'll need to call your createContext function {} is not enough

LaunchThat.AppOP•2y ago

ok, and in that function it expects some parameters (auth). However isnt the context object already set up inside @acme/api somewhere? Here is my pages/dashboard page where I load the posts into a flashlist:

import { HomeScreen as FeatureHomeScreen } from "@acme/app/features/home/screen";
import MainLayout from "@acme/app/layouts/MainLayout";
export default function HomeScreen() {
  return <FeatureHomeScreen />;
}

import { HomeScreen as FeatureHomeScreen } from "@acme/app/features/home/screen";
import MainLayout from "@acme/app/layouts/MainLayout";
export default function HomeScreen() {
  return <FeatureHomeScreen />;
}

Nick•2y ago

createContext is called by the adapter, but createCaller makes your calling code into the adapter That first parameter is the context values

LaunchThat.AppOP•2y ago

screens are located in packages/app/features (@acme/app) and here is the Homescreen linked from above file

import React from "react";

import { Link } from "solito/link";
import { Button, TouchableOpacity } from "../../design/button";
import { Text } from "../../design/typography";
import { View, SafeAreaView } from "../../design/view";

import type { AppRouter } from "@acme/api";
import type { inferProcedureOutput } from "@trpc/server";

import { trpc } from "../../utils/trpc";
import { FlashList } from "@shopify/flash-list";


export function HomeScreen() {
  const { data: postData, isLoading, error } = trpc.lesson.all.useQuery();
  .........

import React from "react";

import { Link } from "solito/link";
import { Button, TouchableOpacity } from "../../design/button";
import { Text } from "../../design/typography";
import { View, SafeAreaView } from "../../design/view";

import type { AppRouter } from "@acme/api";
import type { inferProcedureOutput } from "@trpc/server";

import { trpc } from "../../utils/trpc";
import { FlashList } from "@shopify/flash-list";


export function HomeScreen() {
  const { data: postData, isLoading, error } = trpc.lesson.all.useQuery();
  .........

trpc works fine on this page and loads the posts. Do i need to re-import clerk modules on pages/api/post to rebuild context? i would think i could import context from @acme/api, then insert it into createCaller() and yes i do believe context is the issue with my code because of the error:

Argument of type '{}' is not assignable to parameter of type '{ auth: SignedInAuthObject | SignedOutAuthObject; prisma: PrismaClient<Prisma.PrismaClientOptions, never, Prisma.RejectOnNotFound | Prisma.RejectPerOperation | undefined>; }'.

Argument of type '{}' is not assignable to parameter of type '{ auth: SignedInAuthObject | SignedOutAuthObject; prisma: PrismaClient<Prisma.PrismaClientOptions, never, Prisma.RejectOnNotFound | Prisma.RejectPerOperation | undefined>; }'.

but it is asking for ctx to have auth (clerk) and prisma, which id either have to import again or re-use from @acme/api here is another github I have also been looking at: https://github.com/trpc/trpc/issues/1724 this is code for the openapi generator that we should be able to pull some code from to assist. This is where I got the understanding that createCaller needs a ctx object and that ceateContext probably needs to be imported...but this is as far as I have got so atm in my pages/api/posts.ts i have (shorted for brevity)

.....
import { createContext } from "@acme/api/";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<ResponseData>,
) {
  const { method } = req;

  switch (method) {
    case "GET":
      try {
        const ctx = await createContext({ req, res });
        const caller = appRouter.createCaller({ ctx });
        const data = await caller.post.all();
        console.log(data);
...

.....
import { createContext } from "@acme/api/";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<ResponseData>,
) {
  const { method } = req;

  switch (method) {
    case "GET":
      try {
        const ctx = await createContext({ req, res });
        const caller = appRouter.createCaller({ ctx });
        const data = await caller.post.all();
        console.log(data);
...

and I am still getting error

Argument of type '{ ctx: { auth: SignedInAuthObject | SignedOutAuthObject; prisma: PrismaClient<Prisma.PrismaClientOptions, never, Prisma.RejectOnNotFound | Prisma.RejectPerOperation | undefined>; }; }' is not assignable to parameter of type '{ auth: SignedInAuthObject | SignedOutAuthObject; prisma: PrismaClient<Prisma.PrismaClientOptions, never, Prisma.RejectOnNotFound | Prisma.RejectPerOperation | undefined>; }'.

Argument of type '{ ctx: { auth: SignedInAuthObject | SignedOutAuthObject; prisma: PrismaClient<Prisma.PrismaClientOptions, never, Prisma.RejectOnNotFound | Prisma.RejectPerOperation | undefined>; }; }' is not assignable to parameter of type '{ auth: SignedInAuthObject | SignedOutAuthObject; prisma: PrismaClient<Prisma.PrismaClientOptions, never, Prisma.RejectOnNotFound | Prisma.RejectPerOperation | undefined>; }'.

[HOW TO?] Call trpc endpoints from vanilla nextJs api routes

Did you find this page helpful?