chore: react-query v5 + trpc v11

apps/web/package.json

@@ -23,7 +23,6 @@
     "@openstatus/emails": "workspace:*",
     "@openstatus/error": "workspace:*",
     "@openstatus/header-analysis": "workspace:*",
-    "@openstatus/next-monitoring": "0.0.4",
     "@openstatus/notification-discord": "workspace:*",
     "@openstatus/notification-emails": "workspace:*",
     "@openstatus/notification-pagerduty": "workspace:*",
@@ -41,12 +40,14 @@
     "@t3-oss/env-nextjs": "0.7.0",
     "@tailwindcss/container-queries": "0.1.1",
     "@tailwindcss/typography": "0.5.10",
+    "@tanstack/react-query": "^5.59.0",
+    "@tanstack/react-query-devtools": "^5.59.0",
     "@tanstack/react-table": "8.10.3",
     "@tremor/react": "3.17.4",
-    "@trpc/client": "10.45.2",
-    "@trpc/next": "10.45.2",
-    "@trpc/react-query": "10.45.2",
-    "@trpc/server": "10.45.2",
+    "@trpc/client": "11.0.0-rc.553",
+    "@trpc/next": "11.0.0-rc.553",
+    "@trpc/react-query": "11.0.0-rc.553",
+    "@trpc/server": "11.0.0-rc.553",
     "@unkey/api": "0.23.0",
     "@upstash/qstash": "2.6.2",
     "@upstash/redis": "1.22.1",

apps/web/src/app/layout.tsx

@@ -5,7 +5,6 @@ import { Inter } from "next/font/google";
 import LocalFont from "next/font/local";
 
 import { Toaster } from "@/components/ui/sonner";
-import { OpenStatusProvider } from "@openstatus/next-monitoring";
 
 import {
   defaultMetadata,
@@ -14,6 +13,7 @@ import {
 } from "@/app/shared-metadata";
 import { TailwindIndicator } from "@/components/tailwind-indicator";
 import { ThemeProvider } from "@/components/theme-provider";
+import { TRPCReactQueryProvider } from "@/trpc/rq-client";
 import Background from "./_components/background";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -47,9 +47,11 @@ export default function RootLayout({
         } ${calSans.variable}`}
       >
         <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
-          <Background>{children}</Background>
-          <Toaster richColors closeButton />
-          <TailwindIndicator />
+          <TRPCReactQueryProvider>
+            <Background>{children}</Background>
+            <Toaster richColors closeButton />
+            <TailwindIndicator />
+          </TRPCReactQueryProvider>
         </ThemeProvider>
       </body>
     </html>

apps/web/src/trpc/client.ts

@@ -1,12 +1,10 @@
-import { createTRPCProxyClient, loggerLink } from "@trpc/client";
-import superjson from "superjson";
+import { createTRPCClient, loggerLink } from "@trpc/client";
 
 import type { AppRouter } from "@openstatus/api";
 
 import { endingLink } from "./shared";
 
-export const api = createTRPCProxyClient<AppRouter>({
-  transformer: superjson,
+export const api = createTRPCClient<AppRouter>({
   links: [
     loggerLink({
       enabled: (opts) =>

apps/web/src/trpc/query-client.ts

@@ -0,0 +1,24 @@
+import {
+  QueryClient,
+  defaultShouldDehydrateQuery,
+} from "@tanstack/react-query";
+import superjson from "superjson";
+
+export function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 30 * 1000,
+      },
+      dehydrate: {
+        serializeData: superjson.serialize,
+        shouldDehydrateQuery: (query) =>
+          defaultShouldDehydrateQuery(query) ||
+          query.state.status === "pending",
+      },
+      hydrate: {
+        deserializeData: superjson.deserialize,
+      },
+    },
+  });
+}

apps/web/src/trpc/rq-client.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import type { AppRouter } from "@openstatus/api";
+import type { QueryClient } from "@tanstack/react-query";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { createTRPCReact } from "@trpc/react-query";
+import { useState } from "react";
+import { makeQueryClient } from "./query-client";
+import { endingLink } from "./shared";
+
+export const api = createTRPCReact<AppRouter>();
+let clientQueryClientSingleton: QueryClient;
+function getQueryClient() {
+  if (typeof window === "undefined") {
+    // Server: always make a new query client
+    return makeQueryClient();
+  }
+  // Browser: use singleton pattern to keep the same query client
+  // biome-ignore lint/suspicious/noAssignInExpressions: <explanation>
+  return (clientQueryClientSingleton ??= makeQueryClient());
+}
+
+export function TRPCReactQueryProvider(
+  props: Readonly<{
+    children: React.ReactNode;
+  }>,
+) {
+  // NOTE: Avoid useState when initializing the query client if you don't
+  //       have a suspense boundary between this and the code that may
+  //       suspend because React will throw away the client on the initial
+  //       render if it suspends and there is no boundary
+  const queryClient = getQueryClient();
+  const [trpcClient] = useState(() =>
+    api.createClient({
+      links: [
+        endingLink({
+          headers: {
+            "x-trpc-source": "client",
+          },
+        }),
+      ],
+    }),
+  );
+  return (
+    <api.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        {props.children}
+        <ReactQueryDevtools initialIsOpen={false} />
+      </QueryClientProvider>
+    </api.Provider>
+  );
+}

apps/web/src/trpc/rq-server.ts

@@ -0,0 +1,30 @@
+import "server-only";
+
+import { auth } from "@/lib/auth";
+import { type AppRouter, appRouter, t } from "@openstatus/api";
+import type { Context } from "@openstatus/api/src/trpc";
+import { db } from "@openstatus/db";
+import { createHydrationHelpers } from "@trpc/react-query/rsc";
+import { cache } from "react";
+import { makeQueryClient } from "./query-client";
+
+const createContextCached = cache(
+  async (...args: unknown[]): Promise<Context> => {
+    const session = await auth();
+
+    return {
+      req: undefined,
+      db,
+      session,
+    };
+  },
+);
+
+// IMPORTANT: Create a stable getter for the query client that
+//            will return the same client during the same request.
+export const getQueryClient = cache(makeQueryClient);
+const caller = t.createCallerFactory(appRouter)(createContextCached);
+export const { trpc: api, HydrateClient } = createHydrationHelpers<AppRouter>(
+  caller,
+  getQueryClient,
+);

apps/web/src/trpc/server.ts

@@ -1,13 +1,11 @@
-import { createTRPCProxyClient, loggerLink } from "@trpc/client";
+import { createTRPCClient, loggerLink } from "@trpc/client";
 import { headers } from "next/headers";
-import superjson from "superjson";
 
 import type { AppRouter } from "@openstatus/api";
 
 import { endingLink } from "./shared";
 
-export const api = createTRPCProxyClient<AppRouter>({
-  transformer: superjson,
+export const api = createTRPCClient<AppRouter>({
   links: [
     loggerLink({
       enabled: (opts) =>

apps/web/src/trpc/shared.ts

@@ -2,6 +2,7 @@ import type { HTTPBatchLinkOptions, HTTPHeaders, TRPCLink } from "@trpc/client";
 import { httpBatchLink } from "@trpc/client";
 
 import type { AppRouter } from "@openstatus/api";
+import superjson from "superjson";
 
 const getBaseUrl = () => {
   if (typeof window !== "undefined") return "";
@@ -18,7 +19,9 @@ export const endingLink = (opts?: {
   ((runtime) => {
     const sharedOpts = {
       headers: opts?.headers, // REMINDER: fails when trying to `getTotalActiveMonitors()`
-    } satisfies Partial<HTTPBatchLinkOptions>;
+      transformer: superjson,
+      // biome-ignore lint/suspicious/noExplicitAny: FIXME: remove any
+    } satisfies Partial<HTTPBatchLinkOptions<any>>;
 
     const edgeLink = httpBatchLink({
       ...sharedOpts,

packages/api/index.ts

@@ -8,6 +8,7 @@ export { createTRPCContext, createInnerTRPCContext } from "./src/trpc";
 export { t } from "./src/trpc";
 
 export type { AppRouter } from "./src/root";
+export { appRouter } from "./src/root";
 
 /**
  * Inference helpers for input types

packages/api/package.json

@@ -14,8 +14,8 @@
     "@openstatus/error": "workspace:*",
     "@openstatus/tinybird": "workspace:*",
     "@t3-oss/env-core": "0.7.0",
-    "@trpc/client": "10.45.2",
-    "@trpc/server": "10.45.2",
+    "@trpc/client": "11.0.0-rc.553",
+    "@trpc/server": "11.0.0-rc.553",
     "nanoid": "5.0.7",
     "nanoid-dictionary": "5.0.0-beta.1",
     "next": "14.2.4",

packages/api/src/root.ts

@@ -2,5 +2,5 @@ import { edgeRouter } from "./edge";
 import { lambdaRouter } from "./lambda";
 import { mergeRouters } from "./trpc";
 
-const appRouter = mergeRouters(edgeRouter, lambdaRouter);
+export const appRouter = mergeRouters(edgeRouter, lambdaRouter);
 export type AppRouter = typeof appRouter;

packages/api/src/trpc.ts

@@ -1,4 +1,4 @@
-import { TRPCError, type inferAsyncReturnType, initTRPC } from "@trpc/server";
+import { TRPCError, initTRPC } from "@trpc/server";
 import type { NextRequest } from "next/server";
 import superjson from "superjson";
 import { ZodError } from "zod";
@@ -65,7 +65,7 @@ export const createTRPCContext = async (opts: {
   });
 };
 
-export type Context = inferAsyncReturnType<typeof createTRPCContext>;
+export type Context = Awaited<ReturnType<typeof createTRPCContext>>;
 
 /**
  * 2. INITIALIZATION
@@ -190,7 +190,7 @@ export const formdataMiddleware = t.middleware(async (opts) => {
   if (!formData) throw new TRPCError({ code: "BAD_REQUEST" });
 
   return opts.next({
-    rawInput: formData,
+    input: formData,
   });
 });
 /**