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	❌ Failed (Inspect)			May 27, 2024 9:56pm
og-image	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 27, 2024 9:56pm
trpc-next-app-dir	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 27, 2024 9:56pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
www	⬜️ Ignored (Inspect)	Visit Preview		May 27, 2024 9:56pm

[github-actions]

Diagnostics Comparison

Numbers

Metric	PR	next
Files	798	798 (➖ 0)
Lines of Library	40,640	40,640 (➖ 0)
Lines of Definitions	120,659	120,269 (🔺 390)
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,223	176,015 (🔺 208)
Symbols	109,586	109,477 (🔺 109)
Types	89	89 (➖ 0)
Instantiations	0	0 (➖ 0)
Memory used	171,917	173,836 (🔽🟢 -1,919)
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.245	4.282 (🔽🟢 -0.04)
min (s)	4.245	4.282 (🔽🟢 -0.04)
avg (s)	4.245	4.282 (🔽🟢 -0.04)
median (s)	4.245	4.282 (🔽🟢 -0.04)
length	1	1 (➖ 0)

unstable timings

Unstable

Timings are not reliable in here

Metric	PR	next
I/O Read time	0.04	0.04 (➖ 0)
Parse time	0.69	0.68 (🔺 0.01)
ResolveTypeReference time	0.03	0.03 (➖ 0)
ResolveModule time	0.11	0.1 (🔺 0.01)
ResolveLibrary time	0.02	0.02 (➖ 0)
Program time	1.03	1.01 (🔺 0.02)
Bind time	0.42	0.42 (➖ 0)
Total time	1.45	1.43 (🔺 0.02)

[413n]

Love this feature!
May I ask if you have already thought if this prefetching helpers could be mixed with the new experimental_caller on the procedures? Since presumably there is no appRouter with the experimental_caller, I was curious to know if this could be feasible

[juliusmarminge]

Love this feature!

May I ask if you have already thought if this prefetching helpers could be mixed with the new experimental_caller on the procedures? Since presumably there is no appRouter with the experimental_caller, I was curious to know if this could be feasible

You need the router for the client component to be able to fetch