Andrew Comments

Andrew

Posts Comments

TtRPC

•Created by david on 6/26/2024 in #❓-help

All backend imports becoming accessible on frontend?

Ooooof yep just confirmed that VS Code just imports from the backend package. Whyyyy 😭

10 replies

TtRPC

•Created by david on 6/26/2024 in #❓-help

All backend imports becoming accessible on frontend?

Oh I haven't tried in VS Code tbh, I work with WebStorm so the intellisense logic may be different (though usually it's the same)...

10 replies

TtRPC

•Created by david on 6/26/2024 in #❓-help

All backend imports becoming accessible on frontend?

I've been pretty surprised by how blase the internet has been about making the backend server package a dependency of the frontend with tRPC. It seems quite risky to accidentally pull in sensitive backend code. Here's what we did: 1. Add as the backend package as a TS project reference, and use a special path so it's easy to know:

{
  "compilerOptions": {
    "paths": {
      "special-secret-trpc-type-sharing-path": ["../backend/src/trpc/router"],
    }
  },
  "references": [{ "path":  "../backend" }]
}

{
  "compilerOptions": {
    "paths": {
      "special-secret-trpc-type-sharing-path": ["../backend/src/trpc/router"],
    }
  },
  "references": [{ "path":  "../backend" }]
}

2. Then in your frontend code:

import type { AppRouter } from "special-secret-trpc-type-sharing-path";

// We need to create an explicit type, so it can be shared as an annotation in other modules.
// Without it, type checking and code navigation breaks.
export type TRPCClient = ReturnType<typeof createTRPCClient<AppRouter>>;

export const trpcClient = createTRPCClient<AppRouter>({ ... })

import type { AppRouter } from "special-secret-trpc-type-sharing-path";

// We need to create an explicit type, so it can be shared as an annotation in other modules.
// Without it, type checking and code navigation breaks.
export type TRPCClient = ReturnType<typeof createTRPCClient<AppRouter>>;

export const trpcClient = createTRPCClient<AppRouter>({ ... })

3. Don't add the backend package to your frontend package.json. This means when you write out the type manually, TS knows what to do with it, but intellisense won't try to serve up exports from backend when you're in the frontend code. It feels incredibly jank and hacky, but so far it seems to be working.

10 replies

TtRPC

•Created by Andrew on 6/24/2024 in #❓-help

Find Usages of a procedure do not show client calls.

Thanks for the response! Interestingly, finding references on list: works on VS Code, but not on WebStorm. For WS it appears to do nothing at all. A slight wrench in that approach is we're planning to spread the module in, like this:

import * as ping from "./api/ping";

export const appRouter = router({
  ping: router({ ...ping }),
});

import * as ping from "./api/ping";

export const appRouter = router({
  ping: router({ ...ping }),
});

Not a dealbreaker, and we could change that, but we're hoping to cut back on boilerplate for defining new endpoints. I'm curious if anyone's found an approach that works for WebStorm?

4 replies