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

[juliusmarminge]

More integrated version of t3-oss/create-t3-turbo#877

adds a wrapped proxy around createCaller that puts the promise into a server-side QueryClient. devs can then choose to wrap some client component that needs some server prefetched data with the <HydrateClient> component. no network requests will be made from client components until the prefetched data goes stale:

https://utfs.io/f/8278fdc7-572e-4b14-9f10-5f9fece747bb-yl67w4.15.58.mp4

you choose if you want to await the promise or not depending on if you also need to use the data in the RSC. if you void it, rendering wont be blocked until a useSuspenseQuery consumes the promise

This gives the same behavior as the ReactQueryStreamedProvider, but you can do authed procedures since there's no fetching in client componetns, even on the server, so no need to hack the RSC headers into the CC which causes some weird security concerns

CleanShot.2024-03-07.at.23.03.56.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
next-prisma-starter	✅ Ready (Inspect)	Visit Preview		Jun 9, 2024 10:40am
og-image	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 9, 2024 10:40am
trpc-next-app-dir	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 9, 2024 10:40am
www	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 9, 2024 10:40am

[github-actions]

Diagnostics Comparison

Numbers

Metric	PR	next
Files	797	799 (🔽🟢 -2)
Lines of Library	40,640	40,640 (➖ 0)
Lines of Definitions	120,519	120,880 (🔽🟢 -361)
Lines of TypeScript	4,967	4,967 (➖ 0)
Lines of JavaScript	0	0 (➖ 0)
Lines of JSON	0	0 (➖ 0)
Lines of Other	0	0 (➖ 0)
Identifiers	176,216	176,745 (🔽🟢 -529)
Symbols	109,586	109,956 (🔽🟢 -370)
Types	89	89 (➖ 0)
Instantiations	0	0 (➖ 0)
Memory used	174,494	177,915 (🔽🟢 -3,421)
Assignability cache size	0	0 (➖ 0)
Identity cache size	0	0 (➖ 0)
Subtype cache size	0	0 (➖ 0)
Strict subtype cache size	0	0 (➖ 0)

Timings and averages

Metric	PR	next
max (s)	4.343	4.302 (🔺 0.04)
min (s)	4.343	4.302 (🔺 0.04)
avg (s)	4.343	4.302 (🔺 0.04)
median (s)	4.343	4.302 (🔺 0.04)
length	1	1 (➖ 0)

unstable timings

Unstable

Timings are not reliable in here

Metric	PR	next
I/O Read time	0.05	0.04 (🔺 0.01)
Parse time	0.69	0.71 (🔽🟢 -0.02)
ResolveTypeReference time	0.03	0.03 (➖ 0)
ResolveModule time	0.11	0.12 (🔽🟢 -0.01)
ResolveLibrary time	0.02	0.02 (➖ 0)
Program time	1.03	1.04 (🔽🟢 -0.01)
Bind time	0.42	0.43 (🔽🟢 -0.01)
Total time	1.45	1.47 (🔽🟢 -0.02)

[juliusmarminge]

this patch is implemented upstream here: TanStack/query#7538