TanStack Start with Convex

A new React framework provides an interesting opportunity to start fresh, to stand on the shoulders of giants while trying a different tack. At Convex we were particularly interested in Tanner Linsley's take with TanStack Start. We decided to sponsor the project and to commit to doing the work to ensure Convex worked as smoothly as possible with it.

TanStack Start: Full-stack React framework powered by TanStack Router

Full-document SSR, Streaming, Server Functions, bundling and more, powered by TanStack Router, Vinxi, and Vite. Ready to deploy to your favorite hosting provider.

https://tanstack.com/start

TanStack Start is currently in alpha. If you like your cookies crunchy, sit tight! They need to bake a bit first. But if you can't resist a bite of that cookie dough (perhaps to make sure it's not poisonous) here's a preview of using Convex with TanStack Start.

TanStack Query with Convex

The integration strategy Tanner suggested for TanStack Start was to start by making Convex work well with the venerable TanStack Query. Of course we were aware of TanStack Query: we couldn't forget because some of customers consistently requested that the Convex React useQuery() hook work more like TanStack's!

TanStack Query is a popular state management tool for dealing with HTTP endpoints—or so I thought. It turns out TanStack Query does a great job handling all kinds of server communications, including the consistent client view of query subscriptions provided by a Convex WebSocket connection.

This summer, we released a beta TanStack Query integration for Convex: a way to supercharge Query with live updating queries that never have stale results and handle invalidation automatically. You can use the Convex TanStack Query integration today with or without TanStack Start. We'd appreciate your feedback. If you ever missed the isPending or error properties in the Convex useQuery() React hook, you might find yourself more at home using Convex via TanStack Query.

TanStack Start with Convex

Now, with the TanStack Query library in hand, the TanStack Start integrations have been falling into place. Server-side rendering of a consistent snapshot of server state from multiple queries is no problem. Resuming live updates on hydration is automatic. Convex query subscriptions remain active between page loads, so navigations stay fast.

It's been exciting to watch TanStack Start mature over the last six months. TanStack Start is in alpha, so breaking changes are still likely—the structure of app.config.js changed just this week! But if you're the adventurous type you can play with Convex and TanStack together today.

For the Explorers

• You can find the quickstart guide for TanStack Start with Convex here.
• You can find the guide for using TanStack Start with React Query here.
• There's no CLI tool for bringing up a template project for TanStack Start yet.

Otherwise, you can follow along with these steps to run an example project combining TanStack Start with Convex.

git clone git@github.com:TanStack/router.git
cd router
pnpm i
pnpm build:all
cd examples/react/start-convex-trellaux/
pnpm dev

We hope you can start to see our vision of reactive and consistent data alongside all the benefits of TanStack Start. Let us know what you think.

Stay tuned!