feat: use tRPC's new tanstack react query integration instead of the classic integration

Author: bohdancho

cli/src/installers/dependencyVersionMap.ts

@@ -30,6 +30,7 @@ export const dependencyVersionMap = {
   "@trpc/client": "^11.0.0",
   "@trpc/server": "^11.0.0",
   "@trpc/react-query": "^11.0.0",
+  "@trpc/tanstack-react-query": "^11.1.2",
   "@trpc/next": "^11.0.0",
   "@tanstack/react-query": "^5.69.0",
   superjson: "^2.2.1",

cli/src/installers/trpc.ts

@@ -17,7 +17,8 @@ export const trpcInstaller: Installer = ({
       "superjson",
       "@trpc/server",
       "@trpc/client",
-      "@trpc/react-query",
+      "@trpc/react-query", // The legacy integration package is necessary for `createHydrationHelpers`. We can remove it once https://github.com/vercel/next.js/discussions/60640 is resolved.
+      "@trpc/tanstack-react-query",
     ],
     devMode: false,
   });

cli/template/extras/src/app/_components/post-tw.tsx

@@ -1,20 +1,31 @@
 "use client";
 
+import {
+  useMutation,
+  useQueryClient,
+  useSuspenseQuery,
+} from "@tanstack/react-query";
 import { useState } from "react";
 
-import { api } from "~/trpc/react";
+import { useTRPC } from "~/trpc/react";
 
 export function LatestPost() {
-  const [latestPost] = api.post.getLatest.useSuspenseQuery();
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+
+  const { data: latestPost } = useSuspenseQuery(
+    trpc.post.getLatest.queryOptions()
+  );
 
-  const utils = api.useUtils();
   const [name, setName] = useState("");
-  const createPost = api.post.create.useMutation({
-    onSuccess: async () => {
-      await utils.post.invalidate();
-      setName("");
-    },
-  });
+  const createPost = useMutation(
+    trpc.post.create.mutationOptions({
+      onSuccess: async () => {
+        await queryClient.invalidateQueries({ queryKey: trpc.post.pathKey() });
+        setName("");
+      },
+    })
+  );
 
   return (
     <div className="w-full max-w-xs">

cli/template/extras/src/app/_components/post.tsx

@@ -1,21 +1,32 @@
 "use client";
 
+import {
+  useMutation,
+  useQueryClient,
+  useSuspenseQuery,
+} from "@tanstack/react-query";
 import { useState } from "react";
 
-import { api } from "~/trpc/react";
+import { useTRPC } from "~/trpc/react";
 import styles from "../index.module.css";
 
 export function LatestPost() {
-  const [latestPost] = api.post.getLatest.useSuspenseQuery();
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+
+  const { data: latestPost } = useSuspenseQuery(
+    trpc.post.getLatest.queryOptions()
+  );
 
-  const utils = api.useUtils();
   const [name, setName] = useState("");
-  const createPost = api.post.create.useMutation({
-    onSuccess: async () => {
-      await utils.post.invalidate();
-      setName("");
-    },
-  });
+  const createPost = useMutation(
+    trpc.post.create.mutationOptions({
+      onSuccess: async () => {
+        await queryClient.invalidateQueries({ queryKey: trpc.post.pathKey() });
+        setName("");
+      },
+    })
+  );
 
   return (
     <div className={styles.showcaseContainer}>

cli/template/extras/src/trpc/react.tsx

@@ -1,9 +1,17 @@
 "use client";
 
-import { QueryClientProvider, type QueryClient } from "@tanstack/react-query";
-import { httpBatchStreamLink, loggerLink } from "@trpc/client";
-import { createTRPCReact } from "@trpc/react-query";
+import {
+  isServer,
+  QueryClientProvider,
+  type QueryClient,
+} from "@tanstack/react-query";
+import {
+  createTRPCClient,
+  httpBatchStreamLink,
+  loggerLink,
+} from "@trpc/client";
 import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
+import { createTRPCContext } from "@trpc/tanstack-react-query";
 import { useState } from "react";
 import SuperJSON from "superjson";
 
@@ -12,17 +20,23 @@ import { createQueryClient } from "./query-client";
 
 let clientQueryClientSingleton: QueryClient | undefined = undefined;
 const getQueryClient = () => {
-  if (typeof window === "undefined") {
+  if (isServer) {
     // Server: always make a new query client
     return createQueryClient();
   }
-  // Browser: use singleton pattern to keep the same query client
+  // Browser: make a new query client if we don't already have one
+  // This is very important, so we don't re-make a new client if React
+  // suspends during the initial render. This may not be needed if we
+  // have a suspense boundary BELOW the creation of the query client
   clientQueryClientSingleton ??= createQueryClient();
 
   return clientQueryClientSingleton;
 };
 
-export const api = createTRPCReact<AppRouter>();
+const api = createTRPCContext<AppRouter>();
+
+export const useTRPC = api.useTRPC;
+export const useTRPCClient = api.useTRPCClient;
 
 /**
  * Inference helper for inputs.
@@ -42,7 +56,7 @@ export function TRPCReactProvider(props: { children: React.ReactNode }) {
   const queryClient = getQueryClient();
 
   const [trpcClient] = useState(() =>
-    api.createClient({
+    createTRPCClient<AppRouter>({
       links: [
         loggerLink({
           enabled: (op) =>
@@ -64,9 +78,9 @@ export function TRPCReactProvider(props: { children: React.ReactNode }) {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <api.Provider client={trpcClient} queryClient={queryClient}>
+      <api.TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
         {props.children}
-      </api.Provider>
+      </api.TRPCProvider>
     </QueryClientProvider>
   );
 }