fix: stable query client (t3-oss#1772)

Co-authored-by: Julius Marminge <[email protected]>

.changeset/sixty-rats-drop.md

@@ -0,0 +1,5 @@
+---
+"create-t3-app": patch
+---
+
+fix: use singleton pattern for client-side QueryClient to support `useSuspenseQuery` when there is no parent `<Suspense>`-element

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

@@ -8,10 +8,22 @@ import { useState } from "react";
 import { type AppRouter } from "~/server/api/root";
 import { getUrl, transformer } from "./shared";
 
+const createQueryClient = () => new QueryClient();
+
+let clientQueryClientSingleton: QueryClient | undefined = undefined;
+const getQueryClient = () => {
+ if (typeof window === "undefined") {
+ // Server: always make a new query client
+ return createQueryClient();
+ }
+ // Browser: use singleton pattern to keep the same query client
+ return (clientQueryClientSingleton ??= createQueryClient());
+};
+
 export const api = createTRPCReact<AppRouter>();
 
 export function TRPCReactProvider(props: { children: React.ReactNode }) {
- const [queryClient] = useState(() => new QueryClient());
+ const queryClient = getQueryClient();
 
  const [trpcClient] = useState(() =>
  api.createClient({