Use objects instead of strings for operation names

[vjpr]

I want to be able to cmd+click in my IDE to navigate to the query/mutation definition.

So I want to use something other than a string.

import {hello} from ...
const hello = trpc.useQuery([hello, {text: 'client'}])

export const hello = 'hello'

export const appRouter = trpc.router().query(hello, {
  input: z
    .object({
      text: z.string().nullish(),
    })
    .nullish(),
  async resolve(req) {
    return 'hi'
  },
})

But doing this without using a type makes webpack need to bring my whole backend into my frontend bundle.

Is there a recommended way to do this?

[vjpr]

So moving export const hello = 'hello' to a separate file solves things.

[KATT]

That's a cool solution - haven't thought of that myself before! Does require you to trusting the build step to remove anything else for you though :)