feat(react-query): next-app-router example with prefetch helpers

.github/workflows/lint.yml

@@ -36,8 +36,8 @@ jobs:
       # </autofixing>
 
       # commit autofixes
-      - uses: autofix-ci/action@d3e591514b99d0fca6779455ff8338516663f7cc
-        if: ${{ failure() || success() }}
-        with:
-          commit-message: 'chore: apply lint and formatting fixes'
-          fail-fast: false
+      # - uses: autofix-ci/action@d3e591514b99d0fca6779455ff8338516663f7cc
+      #   if: ${{ failure() || success() }}
+      #   with:
+      #     commit-message: 'chore: apply lint and formatting fixes'
+      #     fail-fast: false

.github/workflows/release-tmp.yml

@@ -5,7 +5,7 @@ on:
     branches:
       # Replace this with the branch you want to release from
       # 👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇
-      - 'rethrow-next-errors'
+      - 'app-router-example'
       # 👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆
     paths:
       - '.github/workflows/release-tmp.yml'

.gitignore

@@ -7,6 +7,8 @@ dist/
 .eslintcache
 *.tsbuildinfo
 
+db.sqlite
+
 node_modules/
 package-lock.json
 yarn.lock

examples/.experimental/next-app-dir/package.json

@@ -12,7 +12,9 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^2.9.11",
-    "@tanstack/react-query": "^5.25.0",
+    "@js-temporal/polyfill": "^0.4.4",
+    "@tanstack/react-query": "^5.45.0",
+    "@tanstack/react-query-devtools": "^5.45.0",
     "@trpc/client": "npm:@trpc/client@next",
     "@trpc/next": "npm:@trpc/next@next",
     "@trpc/react-query": "npm:@trpc/react-query@next",
@@ -26,6 +28,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.43.3",
     "react-hot-toast": "^2.4.1",
+    "server-only": "^0.0.1",
     "superjson": "^1.12.4",
     "trpc-api": "link:./src/trpc",
     "typescript": "^5.4.0",

examples/.experimental/next-app-dir/src/app/page.tsx

@@ -46,12 +46,22 @@ export default async function Index() {
         </li>
         <li>
           <Link
-            href="/rsc"
+            href="/rsc-links"
             style={{
               color: 'hsla(210, 16%, 80%, 1)',
             }}
           >
-            React Server Components
+            React Server Components with new tRPC Next.js Links
+          </Link>
+        </li>
+        <li>
+          <Link
+            href="/rsc-rq-prefetch"
+            style={{
+              color: 'hsla(210, 16%, 80%, 1)',
+            }}
+          >
+            RSC + React Query
           </Link>
         </li>
         <li>

examples/.experimental/next-app-dir/src/app/post-example/page.tsx

@@ -23,7 +23,7 @@ export default async function PostPage() {
       <div style={{ display: 'flex', flexDirection: 'column' }}>
         <span>Title: {latestPost.title}</span>
         <span>Content: {latestPost.content}</span>
-        <span>Created At: {latestPost.createdAt.toISOString()}</span>
+        <span>Created At: {latestPost.createdAt.toLocaleString()}</span>
       </div>
       <form
         style={{

examples/.experimental/next-app-dir/src/app/rsc-rq-prefetch/layout.tsx

@@ -0,0 +1,5 @@
+import { TRPCReactProvider } from '~/trpc/rq-client';
+
+export default function Layout(props: Readonly<{ children: React.ReactNode }>) {
+  return <TRPCReactProvider>{props.children}</TRPCReactProvider>;
+}

examples/.experimental/next-app-dir/src/app/rsc-rq-prefetch/page.tsx

@@ -0,0 +1,18 @@
+import { HydrateClient, trpc } from '~/trpc/rq-server';
+import React from 'react';
+import { Post } from './post';
+
+export const dynamic = 'force-dynamic';
+
+export default function Home() {
+  void trpc.getLatestPost.prefetch();
+
+  return (
+    <main>
+      <h1>Latest Post</h1>
+      <HydrateClient>
+        <Post />
+      </HydrateClient>
+    </main>
+  );
+}

examples/.experimental/next-app-dir/src/app/rsc-rq-prefetch/post.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { trpc } from '~/trpc/rq-client';
+import React from 'react';
+
+export function Post() {
+  const utils = trpc.useUtils();
+  const [latestPost] = trpc.getLatestPost.useSuspenseQuery();
+
+  const { mutate: createPost } = trpc.createPost.useMutation({
+    onSuccess: async () => {
+      await utils.invalidate();
+    },
+  });
+
+  return (
+    <div>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <span>Title: {latestPost.title}</span>
+        <span>Content: {latestPost.content}</span>
+        <span>Created At: {latestPost.createdAt.toLocaleString()}</span>
+      </div>
+      <form
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 8,
+          maxWidth: 300,
+          marginTop: 16,
+        }}
+        onSubmit={(e) => {
+          e.preventDefault();
+          const data = new FormData(e.target as HTMLFormElement);
+          createPost({
+            title: data.get('title') as string,
+            content: data.get('content') as string,
+          });
+        }}
+      >
+        <input name="title" placeholder="title" />
+        <input name="content" placeholder="content" />
+        <button type="submit">Create Post!</button>
+      </form>
+    </div>
+  );
+}

examples/.experimental/next-app-dir/src/server/routers/_app.ts

@@ -1,11 +1,12 @@
+import { Temporal } from '@js-temporal/polyfill';
 import { z } from 'zod';
 import { publicProcedure, router } from '../trpc';
 
 let latestPost = {
   id: 0,
   title: 'latest post',
   content: 'hello world',
-  createdAt: new Date(),
+  createdAt: Temporal.Now.plainDateTimeISO(),
 };
 
 export const createPost = publicProcedure
@@ -18,7 +19,7 @@ export const createPost = publicProcedure
   .mutation(async (opts) => {
     latestPost = {
       id: latestPost.id + 1,
-      createdAt: new Date(),
+      createdAt: Temporal.Now.plainDateTimeISO(),
       ...opts.input,
     };
 

examples/.experimental/next-app-dir/src/server/trpc.ts

@@ -1,13 +1,13 @@
 import { experimental_createServerActionHandler } from '@trpc/next/app-dir/server';
 import { initTRPC, TRPCError } from '@trpc/server';
 import { auth } from '~/auth';
+import { transformer } from '~/trpc/shared';
 import { headers } from 'next/headers';
-import superjson from 'superjson';
 import { ZodError } from 'zod';
 import type { Context } from './context';
 
 const t = initTRPC.context<Context>().create({
-  transformer: superjson,
+  transformer,
   errorFormatter(opts) {
     const { shape, error } = opts;
     return {
@@ -23,6 +23,12 @@ const t = initTRPC.context<Context>().create({
   },
 });
 
+/**
+ * Create a server-side caller
+ * @see https://trpc.io/docs/server/server-side-calls
+ */
+export const createCallerFactory = t.createCallerFactory;
+
 export const router = t.router;
 export const publicProcedure = t.procedure;
 

examples/.experimental/next-app-dir/src/trpc/client.ts

@@ -8,8 +8,7 @@ import {
 } from '@trpc/next/app-dir/client';
 import { experimental_nextHttpLink } from '@trpc/next/app-dir/links/nextHttp';
 import type { AppRouter } from '~/server/routers/_app';
-import superjson from 'superjson';
-import { getUrl } from './shared';
+import { getUrl, transformer } from './shared';
 
 export const api = experimental_createTRPCNextAppDirClient<AppRouter>({
   config() {
@@ -19,7 +18,7 @@ export const api = experimental_createTRPCNextAppDirClient<AppRouter>({
           enabled: (op) => true,
         }),
         experimental_nextHttpLink({
-          transformer: superjson,
+          transformer,
           batch: true,
           url: getUrl(),
           headers() {
@@ -37,7 +36,7 @@ export const useAction = experimental_createActionHook<AppRouter>({
   links: [
     loggerLink(),
     experimental_serverActionLink({
-      transformer: superjson,
+      transformer,
     }),
   ],
 });

examples/.experimental/next-app-dir/src/trpc/rq-client.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import type { QueryClient } from '@tanstack/react-query';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { loggerLink, unstable_httpBatchStreamLink } from '@trpc/client';
+import { createTRPCReact } from '@trpc/react-query';
+import type { AppRouter } from '~/server/routers/_app';
+import { useState } from 'react';
+import { createQueryClient, getUrl, transformer } from './shared';
+
+export const trpc = createTRPCReact<AppRouter>();
+
+let clientQueryClientSingleton: QueryClient | undefined = undefined;
+const getQueryClient = () => {
+  if (typeof window === 'undefined') {
+    // Server: always make a new query client
+    return createQueryClient();
+  } else {
+    // Browser: use singleton pattern to keep the same query client
+    return (clientQueryClientSingleton ??= createQueryClient());
+  }
+};
+
+export function TRPCReactProvider(props: { children: React.ReactNode }) {
+  const queryClient = getQueryClient();
+
+  const [trpcClient] = useState(() =>
+    trpc.createClient({
+      links: [
+        loggerLink({
+          enabled: (op) =>
+            process.env.NODE_ENV === 'development' ||
+            (op.direction === 'down' && op.result instanceof Error),
+        }),
+        unstable_httpBatchStreamLink({
+          transformer,
+          url: getUrl(),
+          headers: { 'x-trpc-source': 'react-query' },
+        }),
+      ],
+    }),
+  );
+
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        {props.children}
+        <ReactQueryDevtools />
+      </QueryClientProvider>
+    </trpc.Provider>
+  );
+}

examples/.experimental/next-app-dir/src/trpc/rq-server.ts

@@ -0,0 +1,31 @@
+import 'server-only';
+import { createHydrationHelpers } from '@trpc/react-query/rsc';
+import { auth } from '~/auth';
+import type { Context } from '~/server/context';
+import { appRouter } from '~/server/routers/_app';
+import { createCallerFactory } from '~/server/trpc';
+import { headers } from 'next/headers';
+import { cache } from 'react';
+import { createQueryClient } from './shared';
+
+const createContext = cache(async (): Promise<Context> => {
+  const _headers = new Headers(headers());
+  _headers.set('x-trpc-source', 'rsc');
+
+  return {
+    headers: Object.fromEntries(_headers),
+    session: await auth(),
+  };
+});
+
+/**
+ * Create a stable getter for the query client that
+ * will return the same client during the same request.
+ */
+const getQueryClient = cache(createQueryClient);
+const caller = createCallerFactory(appRouter)(createContext);
+
+export const { trpc, HydrateClient } = createHydrationHelpers<typeof appRouter>(
+  caller,
+  getQueryClient,
+);

examples/.experimental/next-app-dir/src/trpc/server-http.ts

@@ -3,8 +3,7 @@ import { experimental_nextHttpLink } from '@trpc/next/app-dir/links/nextHttp';
 import { experimental_createTRPCNextAppDirServer } from '@trpc/next/app-dir/server';
 import type { AppRouter } from '~/server/routers/_app';
 import { cookies } from 'next/headers';
-import superjson from 'superjson';
-import { getUrl } from './shared';
+import { getUrl, transformer } from './shared';
 
 export const api = experimental_createTRPCNextAppDirServer<AppRouter>({
   config() {
@@ -16,7 +15,7 @@ export const api = experimental_createTRPCNextAppDirServer<AppRouter>({
         experimental_nextHttpLink({
           batch: true,
           url: getUrl(),
-          transformer: superjson,
+          transformer,
           headers() {
             return {
               cookie: cookies().toString(),

examples/.experimental/next-app-dir/src/trpc/server-invoker.ts

@@ -4,7 +4,7 @@ import { experimental_createTRPCNextAppDirServer } from '@trpc/next/app-dir/serv
 import { auth } from '~/auth';
 import { appRouter } from '~/server/routers/_app';
 import { cookies } from 'next/headers';
-import superjson from 'superjson';
+import { transformer } from './shared';
 
 /**
  * This client invokes procedures directly on the server without fetching over HTTP.
@@ -20,7 +20,7 @@ export const api = experimental_createTRPCNextAppDirServer<typeof appRouter>({
           // requests are cached for 5 seconds
           revalidate: 5,
           router: appRouter,
-          transformer: superjson,
+          transformer,
           createContext: async () => {
             return {
               session: await auth(),