Astro trpc client handler

[trpc].ts

import { appRouter } from 'server'
import type { APIContext } from 'astro'
import { resolveHTTPResponse } from '@trpc/server'
import type { HTTPHeaders } from '@trpc/client'

/**
 * Handles trpc query client requests.
 *
 * @param {APIContext} - Astro API Context
 * @returns {Promise<Response>} - trpc response
 *
 * @beta
 */
async function httpHandler({ request, params }: APIContext): Promise<Response> {
  const query = new URL(request.url).searchParams

  const requestBody = request.method === 'GET' ? {} : await request.json()

  const { status, headers, ...response } = await resolveHTTPResponse({
    async createContext() {
      // CreateContext
    },
    router: appRouter,
    path: params.trpc as string,
    req: {
      query,
      method: request.method,
      headers: request.headers as unknown as HTTPHeaders,
      body: requestBody,
    },
  })

  return new Response(response.body, {
    headers: headers as HeadersInit,
    status,
  })
}

export const post = httpHandler

export const get = httpHandler

add it to pages/api/trpc/

To call it in an Astro page do:

---
import type { AppRouter } from 'server'
import { createTRPCClient } from '@trpc/client'

const client = createTRPCClient<AppRouter>({
  url: `${Astro.url.origin}/api/trpc`,
})

const response = await Promise.all([
  client.query('getUser', 'foobar'),
  client.mutation('createUser', { name: 'testing' }),
])

const [user] = response
---

👀 damn nice, thanks

which server are you calling AppRouter from?