tRPC version 11 now integrates tightly with TanStack Query. Let's try it out on TanStack Start and find out how to query both inside and outside the React context.

Code: https://github.com/jherr/start-trpc/tree/main/start-trpc-pt-1

Part 1: What you're watching now
Part 2: Coming soon

👉 ProNextJS Course: https://pronextjs.dev
👉 Don't forget to subscribe to this channel for more updates: https://bit.ly/2E7drfJ
👉 Discord server signup: https://discord.gg/ddMZFtTDa5
👉 VS Code theme and font? Night Wolf [black] and BitstromWera Nerd Font Mono
👉 Terminal Theme and font? oh-my-posh with custom prompt and BitstromWera Nerd Font Mono

00:00 Introduction
00:19 Setting Up TanStack Start
02:05 Installing tRPC
02:33 Configuring tRPC
04:12 Connecting tRPC to Start
05:24 Infinite Red
07:03 Connecting to React
07:47 Configuring TanStack Query
10:27 Our First Query
11:54 Fetching During SSR
12:41 Parameterized Queries
14:05 tRPC Outside of React
15:59 Outroduction

Jack Herrington

tRPC version 11 introduces seamless integration with TanStack Query, making it easier to integrate into TanStack Start applications. This guide provides a step-by-step tutorial on setting up and using tRPC within a TanStack Start app, including initializing tRPC, creating endpoints, and using them efficiently within the client-side components. It further demonstrates server-side rendering, prefetching data, and using tRPC calls outside the React context, enhancing both performance and SEO.

tRPC v11 with TanStack Query on TanStack Start! Part 1