Connecting TanStack Start to Directus with the SDK — Type-Safe Data Fetching in One File

If you're using Directus as your headless CMS and TanStack Start for your frontend, you don't need to write manual fetch calls or build your own auth headers. The Directus SDK handles all of it cleanly. Here's how I structure a single directus.ts file that covers authentication, typed data fetching, filtering, CRUD operations and file uploads. Installing the SDK npm install @directus/sdk Setting Up the Client Create the client once and export it. Passing your schema type as a generic is what unlocks end-to-end type safety across every request. import type { Product, Navigation, CartItem, Order } from '@/types'; import { authentication, createDirectus, rest, readItems, createItem, updateItem, deleteItem, readMe, updateMe, deleteUser, uploadFiles, registerUser as registerUserDirectus, } from '@directus/sdk'; const directusUrl = import.meta.env.VITE_DIRECTUS_URL ?? process.env.VITE_DIRECTUS_URL ?? 'https://your-directus-url.com'; const directus = createDirectus(directusUrl) .with(authenti