tRPCのv9からv10にmigrateするときのclientのハマりどころ

tRPCがv9からv10で大幅な変更があった。
幸いにもinterop()という互換機能があり、マイグレーションガイドも十分にあるのでほとんど書き換えずに処理できる。

ただ一点、clientの書き方は若干混乱があり、ハマりどころが存在していたのでその点についての覚書き

v9の記法のまま利用したい場合は、createTRPCProxyClientではなくcreateTRPCClientを変更する

clientの利用方法として、v9では下記のように記述する。

const getTrpcClient = () => {
  return createTRPCClient<AppRouter>({
    url: `/api/trpc/`
  })
}

利用側はこのような感じで利用する

const client = getTrpcClient()
client.query("greeting", "tom")

マイグレーションガイドでは、useTrpcProxyClientを利用するように案内されている

const getTrpcProxyClient = () => {
  return createTRPCProxyClient<AppRouterV10>({
    links: [
      httpBatchLink({
        url: `/api/trpc/`
      })
    ]
  })
}

しかしこの記述の場合、下記のようにclientの利用記法を変更しなければならない。

const client = getTrpcProxyClient()
client.greeting.query("tom")

また、createTRPCProxyClientを利用した場合、interop()したルーターは型補完が効かないようだった

解決法：createTRPCClientの引数を変更する

v9でinterop()したルーターをそのままの記法で利用するには、createTRPCClientをそのまま使う必要がある。

const getTrpcClient = () => {
  return createTRPCClient<MergedAppRouter>({
    // url: `/api/trpc/`
    links: [
      httpBatchLink({
        url: `/api/trpc/`
      })
    ]
  })
}

URLのオプションは消え、linksの形でcreateTRPCProxyClientと同様のパラメータを渡すと互換性を保った状態で動作し、型補完も効くようになる。
createTRPCClientはdeprecatedになっているのでVSCode上では取り消し線が出るが、一旦の互換処理としては十分だろう。