Skip to content

Commit 7d038a2

Browse files
committed
tweaks and links
1 parent 27fa0c6 commit 7d038a2

File tree

1 file changed

+10
-10
lines changed

1 file changed

+10
-10
lines changed

src/blog/tanstack-db-0.1-the-embedded-client-database-for-tanstack-query.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ If you’ve ever muttered “**why is this still so hard in 2025?**”—same.
1414

1515
TanStack DB is our answer: a client-side database layer powered by differential dataflow that plugs straight into your existing useQuery calls.
1616

17-
It recomputes only what changed—**0.3 ms to update one row in a 100k collection** on an M1Pro
17+
It recomputes only what changed—**0.7 ms to update one row in a sorted 100k collection** on an M1 Pro ([CodeSandbox](https://codesandbox.io/p/sandbox/bold-noyce-jfz9fs))
1818

1919
One early-alpha adopter, building a Linear-like application, swapped out a pile of MobX code for TanStack DB and told us with relief, “everything is now completely instantaneous when clicking around the app, even w/ 1000s of tasks loaded.”
2020

@@ -83,7 +83,7 @@ Today most teams face an ugly fork in the road:
8383

8484
**Option B. Load-everything-and-filter** (simple backend, sluggish client).
8585

86-
Differential dataflow unlocks **Option C**—load normalized collections once, let TanStack DB stream millisecond-level incremental joins in the browser. No rewrites, no spinners, no jitter.
86+
Differential dataflow unlocks **Option C—load normalized collections once, let TanStack DB stream millisecond-level incremental joins in the browser**. No rewrites, no spinners, no jitter.
8787

8888
**Live queries, effortless optimistic writes, and a radically simpler architecture**—all incrementally adoptable.
8989

@@ -257,7 +257,7 @@ But Query treats data as isolated cache entries. Each query result is independen
257257

258258
TanStack DB fills this gap. While Query excels at fetching and caching server state, DB provides the missing reactive, relational layer on top. You get the best of both worlds: Query's robust server state management plus TanStack DB’s embedded client database that can join, filter, and reactively update across your entire data graph.
259259

260-
But it doesn’t just improve your current architecture — it enables a new radically simplified architecture.
260+
But it doesn’t just improve your current setup — it enables a new radically simplified architecture.
261261

262262
## TanStack DB enables a radically simplified architecture
263263

@@ -318,7 +318,7 @@ const { data: activeProjectTodos } = useLiveQuery(
318318
)
319319
```
320320

321-
Now, clicking between projects, users, or views requires **zero API calls**. All the data is already loaded. New features like "show user workload across all projects" work instantly without touching your backend.
321+
Now, clicking between projects, users, or views requires **zero API calls**. All the data is already loaded. New features like **"show user workload across all projects"** work instantly without touching your backend.
322322

323323
Your API becomes simpler. Your network calls drop dramatically. Your frontend gets faster as your dataset grows.
324324

@@ -330,19 +330,19 @@ Companies like Linear, Figma, and Slack load massive datasets into the client an
330330

331331
**TanStack DB brings this capability to everyone** through differential dataflow — a technique that only recomputes the parts of queries that actually changed. Instead of choosing between "many fast API calls with network waterfalls" or "few API calls with slow client processing," you get the best of both options: fewer network round-trips AND sub-millisecond client-side queries, even with large datasets.
332332

333-
This isn't just about sync engines like Electric (though they make this pattern incredibly powerful). It's about enabling a fundamentally different data loading strategy that works with any backend — REST, GraphQL, or real-time sync.
333+
This isn't just about sync engines like [Electric (though they make this pattern incredibly powerful)](https://electric-sql.com/blog/2025/07/29/local-first-sync-with-tanstack-db). It's about enabling a fundamentally different data loading strategy that works with any backend — REST, GraphQL, or real-time sync.
334334

335335
## Why are sync engines interesting?
336336

337337
While TanStack DB works great with REST and GraphQL, it really shines when paired with sync engines. Here's why sync engines are such a powerful complement:
338338

339339
**Easy real-time** — If you need real-time updates, you know how painful it can be to set up WebSockets, handle reconnections, and wire up event handlers. Many new sync engines are native to your actual data store (e.g., Postgres) so you can simply write to the database directly and know the update will get streamed out to all subscribers in real-time. No more manual WebSocket plumbing.
340340

341-
**Side-effects are pushed automatically** — When you do a backend mutation, there are often cascading updates across multiple tables. Update a todo's status? That might change the project's completion percentage, update team metrics, or trigger workflow automations. With TanStack Query alone, you need manual bookkeeping to track all these potential side-effects and reload the right data. Sync engines eliminate this complexity—any backend change that happens during a mutation is automatically pushed to all clients without any extra work.
341+
**Side-effects are pushed automatically** — When you do a backend mutation, there are often cascading updates across multiple tables. Update a todo's status? That might change the project's completion percentage, update team metrics, or trigger workflow automations. With TanStack Query alone, you need manual bookkeeping to track all these potential side-effects and reload the right data. Sync engines eliminate this complexity—any backend change that happens during a mutation is automatically pushed to all clients - without any extra work.
342342

343343
**Load far more data efficiently** — It's far cheaper to update data in the client when using sync engines. Instead of re-loading entire collections after each change, sync engines send only the actual changed items. This makes it practical to load far more data upfront, enabling the "load everything once" pattern that makes apps like Linear feel so fast.
344344

345-
TanStack DB was designed from the ground up to support sync engines. [When you define a collection, you're provided with an API for writing synced transactions](https://tanstack.com/db/latest/docs/collection-options-creator) from the backend into your local collections. Try out collection implementations for Electric, Trailblaze, and (soon) Firebase!
345+
TanStack DB was designed from the ground up to support sync engines. [When you define a collection, you're provided with an API for writing synced transactions](https://tanstack.com/db/latest/docs/collection-options-creator) from the backend into your local collections. Try out collection implementations for [Electric](https://tanstack.com/db/latest/docs/installation#electric-collection), [Trailblaze](https://tanstack.com/db/latest/docs/installation#trailbase-collection), and [(soon) Firebase](https://github.com/TanStack/db/pull/323)!
346346

347347
DB gives you a common interface for your components to query data, which means you can easily switch between data loading strategies as needed without changing client code. Start with REST, switch to a sync engine later as needed—your components don't need to know the difference.
348348

@@ -354,7 +354,7 @@ We're building TanStack DB to address the client-side data bottlenecks that ever
354354
- **Incremental adoption that actually works**: Start with one collection, add more as you build new features. No big-bang migrations or development pauses.
355355
- **Query performance at scale**: Sub-millisecond queries across large datasets through differential dataflow, even when your app has thousands of items.
356356
- **Optimistic updates that don't break**: Reliable rollback behavior when network requests fail, without complex custom state management.
357-
- **Type safety throughout**: Full TypeScript inference from your schema to your components, catching data mismatches at compile time.
357+
- **Type and runtime safety throughout**: Full TypeScript inference from your schema to your components, catching data mismatches at compile and runtime.
358358

359359
We're excited about giving teams a fundamentally better way to handle client-side data—while preserving the freedom to choose whatever backend works best.
360360

@@ -372,7 +372,7 @@ If your team spends more time optimizing React re-renders than building features
372372

373373
**Get started today:**
374374

375-
- Documentation & Quick Start - Migration examples from TanStack Query
376-
- Join our Discord - Direct migration support from the team
375+
- [Documentation & Quick Start](https://tanstack.com/db/latest)
376+
- [Join the TanStack Discord](https://tlinz.com/discord) - Direct migration support from the team
377377

378378
No more stutters. No more jank. Stop re-rendering—start shipping!

0 commit comments

Comments
 (0)