Research how to integrate TRPC v10 with Fresh

[bjesuiter]

Hi there!

I was looking into building something with fresh and thought, that TRPC would be nice to handle some data fetching in my islands.

This thread should capture my research into integrating TRPC with fresh, since i realized, this is somewhat more complicated than i originally thought.

For reference, heres my initial issue for this: #864

And here is my repo for trying to integrate trpc v10 and fresh: https://github.com/jbscratch/trpc10-in-fresh

[bjesuiter]

First Try - Using the trpc createExpressMiddleware function with fresh

1. TRPC has adapters for some runtime environments: Adapter Source Code

2. Esp. interesting to me is the express middleware adapter Source Code, bc. it can be plugged right into a deno server with the same req/res type structure, like opine

3. In opine, using the createExpressMiddleware function works flawlessly, with trpc v9.27 as well as the v10 beta:

   • Example for opine with trpc v9.27
   • Example for opine with trpc v10 Beta
   • Credits to @samifouad for the original PoC Repo!

4. I tried to plug this express request handler into a simple routes/api/trpc.ts file, for adapting the fresh handler function to the express handler from createExpressMiddleware:

https://github.com/jbscratch/trpc10-in-fresh/blob/2022-10-26-first-try-createExpressMiddleware/routes/api/trpc.ts

import { HandlerContext } from "$fresh/server.ts";
import { trpcExpressMiddleware } from "@/src/trpc/server.ts";

export const handler = (_req: Request, _ctx: HandlerContext): Response => {
  trpcExpressMiddleware.apply(_req, {
    // TODO: How to mock response object correctly?
    send: () => {
    },
  });
  return new Response("Not yet defined");
};

The problem here is the wildly different Request - Response structure between express and Deno.
Deno simply returns a new Response, but express middlewares call res.send().
For this I would need a little help from @lucacasonato or other team members:
How would you adapt these two worlds?

[bjesuiter]

Generally speaking, this seems to be the only issue left with the trpc integration: How to get the trpc routes into the main router?

• Writing the server works (from typescript linting standpoint):
  https://github.com/jbscratch/trpc10-in-fresh/blob/2022-10-26-first-try-api-route-fix/src/trpc/server.ts
• Writing the client also works (from typescript linting standpoint):
  https://github.com/jbscratch/trpc10-in-fresh/blob/2022-10-26-first-try-api-route-fix/src/trpc/client.ts
• Writing an island, which should use the trpc query also works from a typing standpoint: https://github.com/jbscratch/trpc10-in-fresh/blob/2022-10-26-first-try-api-route-fix/islands/TrpcPlayground.tsx

Only the query call errors out, since the trpc client can't connect to the trpc server.

[bjesuiter]

realized, that my trpc route was under /api/trpc and not /trpc.
Fixed that with: https://github.com/jbscratch/trpc10-in-fresh/commit/a16cc49a520d6a47bd02b74e6826dc0bb25821dc

[bjesuiter]

First locally working version - 1.0.0

Try it

1. Checkout https://github.com/jbscratch/trpc10-in-fresh/tree/1.0.0
2. Run deno task start
3. GoTo http://localhost:8000
4. Click the Button: "Fire TRPC Query"
5. Inspect the network panel & the sourcecode for all these components

The Logic

I built it like this

1. Start an opine server (deno express clone) besides the fresh server
   1. Running fresh on port 8000
   2. Running opine with trpc on port 3000
2. Configuring the trpc client to directly use the trpc endpoint on opine (Port 3000)

The Drawbacks

Starting two servers (e.g. two Deno.listen() calls) in one script does not work in deno-deploy, bc. they only allow one call to Deno.listen().

I would also agree that having two separate servers is kind of clunky and should be avoided.
However, to let the request from the fresh handler on localhost:8000/trpc be resolved by trpc router,
trpc misses some primitives exports to let me pass a request to the trpc router.

Also a problem there: The standalone adapter of TRPC is based on the Node HTTP Request and Response Typings, which would not be correct for deno.
This may be solved with the new npm: integrations, but they are unstable right now and they may not fix the problem in this case.

[bjesuiter]

New Idea: Maybe I can use the fetch adapter of trpc to avoid these different request types,
since deno is fully compatible with fetch.

https://github.com/trpc/trpc/tree/next/packages/server/src/adapters/fetch

[bjesuiter]

2.0.0 - Second locally working version

I found a second way to make trpc work in fresh.
This snapshot can be found here: https://github.com/jbscratch/trpc10-in-fresh/tree/2.0.0

The Logic

1. Update the server.ts like described by the trpc fetch adapter developed for cloudflare workers.
   Instructions: https://trpc.io/docs/v10/fetch

2. Write a fresh route at /routes/trpc/[...path].ts, with two request handlers for GET and POST.
   Instructions: https://fresh.deno.dev/docs/getting-started/custom-handlers

   Note: The [...path].ts is required for fresh to pass the full path after /trpc to the trpc handler

3. Call the fetchRequestHandler from @trpc/server/adapters/fetch for both handlers like this:

   import { HandlerContext, Handlers } from "$fresh/server.ts";
   import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
   import { appRouter } from "@/src/trpc/server.ts";
   import { createContext } from "@/src/trpc/fetch-context.ts";
   
   export const handler: Handlers = {
      GET(_req: Request, ctx: HandlerContext) {
         return fetchRequestHandler({
            endpoint: "/trpc",
            req: _req,
            router: appRouter,
            createContext,
         });
      },
      POST(_req: Request, ctx: HandlerContext) {
         return fetchRequestHandler({
            endpoint: "/trpc",
            req: _req,
            router: appRouter,
            createContext,
         });
      },
   };
   
   

Small Problem

It's not running on deno-deploy yet due to hardcoded url in trpc client.

[bjesuiter]

2.1.0 - First Version on Deno Deploy

I fixed the issue with the hardcoded url by using window.location.origin.
The app does now run in deno-deploy: https://trpc10-in-fresh.deno.dev/

CAUTION! This needs proper feature detection, bc. globalThis.location is NOT available in the deno deploy server environment!

The Code:

/**
 * This guard check for the availability of 'location' is necessary,
 * since location is not defined in global scope on server and crashes on deno deploy.
 */
let host;
if (globalThis.location) {
  console.log("Origin: ", location?.origin);
  host = location?.origin;
}

export const trpc = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: `${host}/trpc`,
    }),
  ],
});

[bjesuiter]

For anyone interested, I finished my blogpost about tRPC + fresh today:

https://blog.codemonument.com/2022-11-03-trpc-in-fresh-islands

[lionel-rowe]

For anyone else that stumbles upon this thread, looks like the blog post URL has been updated to https://blog.codemonument.com/posts/2022-11-03-trpc-in-fresh-islands