メインコンテンツにスキップ
バージョン: 11.x

v10 から v11 への移行

情報

これは、バージョン 11 を表す現在の進行中の作業です。

  • 機能は安定しており、本番環境で使用できますが、11.0.0 に到達するまでは、パッチ間で小さな破壊的 API 変更を行う可能性があります。
  • パッケージは npm で next タグで公開されています

インストール/アップグレード​

npm install @trpc/server@next @trpc/client@next @trpc/react-query@next @trpc/next@next @tanstack/react-query@latest @tanstack/react-query-devtools@latest

逆時系列の変更履歴​

これはドラフトドキュメントです。v11 リリースに近づくにつれて、適切なガイドに更新されます。あなたにとって作業が必要となる唯一の大きな点は、TanStack Query を v5.0.0 に更新する必要があることです。

resolveHTTPRequest は、Fetch API を使用する resolveRequest に置き換えられました (めったに破壊的ではない)​

関数 resolveHTTPRequest は、Fetch API を使用する resolveRequest に置き換えられました - Request / Response。

これは HTTP アダプターにとっては破壊的な変更ですが、ユーザーとしては影響がないはずです。

アダプターを構築している場合は、コード内のアダプターの動作方法を確認し、Discord でお気軽にヘルプを求めてください。

TRPCRequestInfo が更新されました (めったに破壊的ではない)​

入力は、プロシージャで要求されたときに遅延して具体化されるようになりました。つまり、tRPC が createContext を呼び出すときに、入力とプロシージャの型は利用できなくなりました。

info.calls[index].getRawInput() を呼び出すことで、入力にアクセスできます。

実験的なフォームデータサポートがすべて置き換えられました (めったに破壊的ではない)​

これは、実験的なフォームデータ機能を使用した場合にのみ影響します

  • experimental_formDataLink - httpLink を使用
  • experimental_parseMultipartFormData - 不要になりました
  • experimental_isMultipartFormDataRequest - 不要になりました
  • experimental_composeUploadHandlers - 不要になりました
  • experimental_createMemoryUploadHandler - 不要になりました
  • experimental_NodeOnDiskFile および experimental_createFileUploadHandler - この最初のリリースではサポートされていません。ディスクにデータを保持する必要がある場合は、問題を提起してください
  • experimental_contentTypeHandlers - 不要になりましたが、新しいデータ型でコミュニティが必要な場合は戻ってくる可能性があります

examples/next-formdata で新しいアプローチを確認できます

Procedure._def._output_in / Procedure._def._input_in を Procedure._def.$types に移動しました (非破壊的)​

これは tRPC の内部にとっては破壊的な変更ですが、ユーザーとしては影響がないはずです。

コードで Procedure._def._output_in または Procedure._def._input_in を直接使用していない限り、何もする必要はありません。

明示的な Content-Type チェック (非破壊的)​

POST リクエストを実行するときに、Content-Type ヘッダーの明示的なチェックを行うようになりました。これは、予期される Content-Type と一致しない Content-Type でリクエストを送信すると、415 Unsupported Media Type エラーが発生することを意味します。

tRPC クライアントはすでに content-type ヘッダーを送信しているため、tRPC を手動で呼び出す場合のみ、潜在的な破壊的変更となります。

メソッドのオーバーライドのサポートを追加 (めったに破壊的ではない)​

これにより、プロシージャの HTTP メソッドをオーバーライドして、常に POST で送信し、例えば最大 URL 長に関するいくつかの制限を回避できます。

#3910 を閉じます

双方向の無限クエリのサポートを追加 (非破壊的)​

useInfiniteQuery() を参照してください

inferProcedureBuilderResolverOptions<T> ヘルパーを追加 (非破壊的)​

プロシージャビルダーリゾルバーのオプションを推論するためのヘルパーを追加します。これは、さまざまなプロシージャで再利用可能な関数を作成する場合に役立ちます。

使用方法のリファレンスについては、こちらのテストを参照してください

TypeScript がこの移行をガイドします

データトランスフォーマーを使用する場合のみ適用されます。

tRPC クライアントを初期化するときではなく、links 配列でデータトランスフォーマーを設定するようになりました。

HTTP リンクがある場合は、トランスフォーマーを使用している場合は transformer: superjson を追加する必要があります

ts
httpBatchLink({
  url: '/api/trpc',
  transformer: superjson, // <-- add this
});
ts
httpBatchLink({
  url: '/api/trpc',
  transformer: superjson, // <-- add this
});
ts
createTRPCNext<AppRouter>({
  // [..]
  transformer: superjson, // <-- add this
});
ts
createTRPCNext<AppRouter>({
  // [..]
  transformer: superjson, // <-- add this
});

@trpc/next ssr モードでは、ssr: true を使用したプリパスヘルパーが必要になりました (めったに破壊的ではない)​

これは、この機能を使用しているかどうかに関係なく、react-dom がインポートされていた https://github.com/trpc/trpc/issues/5378 を修正するためです。

SSR ドキュメントを参照してください

ショートハンドルーター定義のサポートを追加 (非破壊的)​

ルーターのマージ を参照してください

ts
const appRouter = router({
  // Shorthand plain object for creating a sub-router
  nested1: {
    proc: publicProcedure.query(() => '...'),
  },
  // Equivalent of:
  nested2: router({
    proc: publicProcedure.query(() => '...'),
  }),
});
ts
const appRouter = router({
  // Shorthand plain object for creating a sub-router
  nested1: {
    proc: publicProcedure.query(() => '...'),
  },
  // Equivalent of:
  nested2: router({
    proc: publicProcedure.query(() => '...'),
  }),
});

inferHandlerInput<T> および ProcedureArgs<T> を削除しました (ほとんどの場合、非破壊的)​

これらの型があなたやコードベースにとって意味がない場合は、無視してください

代わりに inferProcedureInput<TProcedure> および TRPCProcedureOptions を使用してください

useSuspenseQueries() を追加​

useSuspenseQueries を参照してください

https://github.com/trpc/trpc/pull/5226

内部ジェネリクスのリファクタリング (めったに破壊的ではない)​

内部ジェネリクスをリファクタリングし、より読みやすくしました (TODO: プロシージャビルダーソースをリンク)

React が >=18.2.0 になりました (めったに破壊的ではない)​

移行ガイドを確認してください: https://react.dokyumento.jp/blog/2022/03/08/react-18-upgrade-guide

NodeJS 18+ および最新のブラウザーが必須になりました (めったに破壊的ではない)​

FormData、File、Blob、ReadableStream の使用を追加しました。NodeJS 18 が必須になりましたが、これらはブラウザーで長年サポートされています。

  • デプロイ中にサーバーの場所が切り替わる場合、urlコールバックでPromiseを渡せる機能を追加
  • 保留中のリクエストがない場合に、WebSocketが自動的に切断される新しいlazyオプションを追加

ミドルウェアのrawInputがgetRawInputに変更 (まれに破壊的)​

内部的には（まだ）何も変更していませんが、これはtRPCで要望の多かったJSON以外のコンテンツタイプをサポートするのに役立ちます。

型の簡略化と.d.ts出力の改善​

ルーターのプロシージャは、入力と出力のみを発行するようになりました。以前は、すべてのプロシージャの完全なコンテキストオブジェクトも含まれており、例えば.d.tsで不必要な複雑さにつながっていました。

React QueryのpeerDepがv5になりました（破壊的変更）​

移行ガイドを確認してください: https://tanstack.com/query/v5/docs/framework/react/guides/migrating-to-v5

エクスポート名AbcProxyXyzがAbcXyzにリネームされました（非破壊的変更）​

プロキシ名は、v9でAbcXyzという名前を使用していたためです。これらは削除され、プロキシ名が非プロキシ名にリネームされました。例：

  • createTRPCClientはv9で非推奨となり、完全に削除されました。代わりに、createTRPCProxyClientがcreateTRPCClientにリネームされました。createTRPCProxyClientは現在、非推奨としてマークされています。

SSGヘルパー（まれに破壊的）​

  • createSSGHelpersはv9用であり、現在は削除されました。v10相当のcreateProxySSGHelpersが、代わりにcreateSSGHelpersにリネームされました。
  • createProxySSGHelpersは非推奨になりましたが、下位互換性のためにcreateSSGHelpersにエイリアスされています。
  • エクスポートされた型CreateSSGHelpersOptionsを削除しました

interopモードを削除しました（まれに破壊的）​

tRPCからinteropモードを削除しました。これは、v9からv10への移行期間を容易にするためのモードでした。このモードは長期的にサポートされる予定はなく、削除しました。