How to have both trpc and API handler?

[GabriFila]

Hello,
I would like to setup a project that exposes both trpc and http api routes. I would like to use trpc to read/write data from/to the server and the api endpoints to authenticate using BetterAuth.

I started from the trpc example but when I tried to add the api I couldn't make it work.

This is a stackblitz I created (at this commit) that shows my attempt. Sadly the api routes is interpreted as a route of the app not as an http route.

I am no expert in vinxi but I also tried to add something like

    {
      type: "http",
      name: "api",
      base: "/api",
      handler: "./app/api.ts",
      target: "server",
      plugins: () => [],
    }

to the routers array of the createApp of vinxi in the app.config.ts but it didn't work.

Any help or guidance is very much appreciated, thank you!

[davidtedmanjones]

Did you figure this out?

[ram0973]

Could you please share your api handler: "./app/api.ts" ?
I am trying to write this too

import {
  createStartAPIHandler,
  defaultAPIFileRouteHandler,
} from '@tanstack/react-start/api'
import { eventHandler, toWebRequest } from 'vinxi/http'
import { toWebHandler } from 'vinxi/server'

const apiHandler = createStartAPIHandler(defaultAPIFileRouteHandler)

export default eventHandler(async (event: any) => {
  return apiHandler(???)???
})

[ram0973]

Here solution:
https://github.com/CarlosZiegler/fullstack-start-template/tree/main

[GabriFila]

Hello @davidtedmanjones

I managed to expose a tRPC endpoint at /api/trpc by creating the file app/routes/api/trpc/$.ts with:

import { createAPIFileRoute } from '@tanstack/react-start/api'
import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
import { initTRPC } from '@trpc/server'

const t = initTRPC.create()

const POSTS = [
  { id: '1', title: 'First post' },
  { id: '2', title: 'Second post' },
  { id: '3', title: 'Third post' },
  { id: '4', title: 'Fourth post' },
  { id: '5', title: 'Fifth post' },
  { id: '6', title: 'Sixth post' },
  { id: '7', title: 'Seventh post' },
  { id: '8', title: 'Eighth post' },
  { id: '9', title: 'Ninth post' },
  { id: '10', title: 'Tenth post' },
]

const appRouter = t.router({
  hello: t.procedure.query(() => 'Hello world!'),
  posts: t.procedure.query(async (_) => {
    await new Promise((resolve) => setTimeout(resolve, 1000))
    return POSTS
  }),
  post: t.procedure.input(String).query(async (req) => {
    await new Promise((resolve) => setTimeout(resolve, 500))
    return POSTS.find((p) => p.id === req.input)
  }),
})

export type AppRouter = typeof appRouter


export const APIRoute = createAPIFileRoute('/api/trpc/$')({
  GET: ({ request, params }) => {
    return fetchRequestHandler({
        endpoint: '/api/trpc',
        req: request,
        router: appRouter,
        createContext() {
          return {}
        },
      })
  },
  POST: ({ request, params }) => {
    return fetchRequestHandler({
        endpoint: '/api/trpc',
        req: request,
        router: appRouter,
        createContext() {
          return {}
        },
      })
  },
})

I did not tested it deeply and it is not written in the best way but when I tried it it worked as expected.

I ended up ditching tRPC for my project and instead use Tanstack Start server functions.

Hope this helps with your issue!

[davidtedmanjones]

Thanks for this. I ended up doing the same re server functions!