TanStack Start Basics Part 2: Connecting to Your Directus Backend

Our frontend has been static so far — today we connect it to the real Directus backend built earlier in this series. By the end of this video, we're pulling live product data straight from our database using the official Directus SDK. You'll learn how to: ✅ Install and configure the Directus SDK in a TanStack Start app ✅ Define TypeScript types that match your Directus collections ✅ Fix the classic "Record string, any" typing error with a Schema type ✅ Build your first real data-fetching function with readItems ✅ Fetch data two different ways: TanStack Query vs. route loaders — and know when to use each ✅ Render a live products grid pulling directly from Directus This series follows a real project from the ground up. If you haven't watched the Directus backend series or Part 1 of this frontend series (TanStack Start setup), start there — this video builds directly on both. ⏱ TIMESTAMPS 0:00 – Intro 0:48 – Installing the Directus SDK 1:25 – Creating the Directus helper 2:35 – Defining our first type 4:00 – Writing our first fetch function 5:00 – Fixing the Schema error 6:50 – TanStack Query setup 10:20 – Building the Products component 15:55 – The second way: route loaders 19:35 – Recap & what's next 20:33 - Outro 🔗 LINKS Directus Basics series (backend):    • DIRECTUS COLLECTIONS EXPLAINED — Directus ...   TanStack Start Basics Part 1 (setup):    • TanStack Start Basics Part 1: Face On - Pu...   Written tutorial version on Dev.to: https://dev.to/wadethomastt/tanstack-... Northern Range Digital: https://northernrangedigital.com Set up Directus on local machine:    • React Router Framework & Directus Installa...   If you found this useful, subscribe for more Directus, TanStack Start, and full-stack web development tutorials. #TanStackStart #TanStackQuery #React #Directus #TypeScript