Convex with TanStack Start

  • React Query hooks
  • SSR and Live Queries
  • Staying subscribed
  • Loaders

TanStack Start, TanStack Query, and Convex

TanStack Start is coming. The best way to use Convex with Start is via React Query's excellent Start integration. This site is written with Start using this setup.

You can jump straight to the quickstart or read more to learn about using Convex with Start. There's a lot more to TanStack Start so also check out the official Start guide.

Try out TanStack Start with Convex:

Convex TanStack Quickstart

Or run:

npm create convex@latest -- -t tanstack-start

Using React Query hooks

Supercharging React Query with live updates from Convex.

Render on the server, update in the browser

Hydrating the Query Client in the browser makes SSR take no extra steps.

Staying subscribed to queries

Data not currently rendered doesn't need to be stale.

Loaders and prefetching

Adding queries to loaders enables prefetching and can prevent waterfalls.

Read more about these projects:

TanStack Start

A new React framework focused on routing, caching, and type safety.

Convex

A typesafe database that live-updates and automatically invalidates queries.

TanStack Query

Asynchronous state management for server-side state like queries and mutations. AKA React Query.