docs: simplify README usage example. (#70)

Author: thruflo

README.md

@@ -9,12 +9,12 @@ TanStack DB extends TanStack Query with collections, live queries and transactio
 <p>
   <a href="https://x.com/intent/post?text=TanStack%20DB&url=https://tanstack.com/db">
     <img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack" /></a>
-  <a href="https://discord.gg/yjUNbvbraC">
-    <img alt="" src="https://img.shields.io/badge/Discord-TanStack-%235865F2" /></a>
-  <a href="https://npmjs.com/package/@tanstack/db">
-    <img alt="" src="https://img.shields.io/npm/dm/@tanstack/db.svg" /></a>
   <a href="#status">
     <img src="https://img.shields.io/badge/status-alpha-orange" alt="Status - Alpha"></a>
+  <a href="https://npmjs.com/package/@tanstack/db">
+    <img alt="" src="https://img.shields.io/npm/dm/@tanstack/db.svg" /></a>
+  <a href="https://discord.gg/yjUNbvbraC">
+    <img alt="" src="https://img.shields.io/badge/Discord-TanStack-%235865F2" /></a>
   <a href="https://github.com/tanstack/db/discussions">
     <img alt="Join the discussion on Github" src="https://img.shields.io/badge/Discussions-Chat%20now!-green" /></a>
   <a href="https://x.com/tan_stack">
@@ -40,28 +40,21 @@ Built on a TypeScript implementation of differential dataflow ([#](https://githu
 
 TanStack DB is **backend agnostic** and **incrementally adoptable**:
 
-- plug in any backend: sync engines, polling APIs, GraphQL, custom sources
+- plug in any backend: sync engines, REST APIs, GraphQL, polling, custom sources
 - builds on [TanStack Store](https://tanstack.com/store), works with and alongside [TanStack Query](https://tanstack.com/query)
 
 ## 💥 Usage example
 
 Sync data into collections:
 
 ```ts
-import { createElectricCollection } from "@tanstack/db-collections"
-
-// You can configure any strategy you like to load data into
-// collections. Here we're using the Electric sync engine.
-export const todoCollection = createElectricCollection<Todo>({
-  id: "todos",
-  streamOptions: {
-    url: "https://example.com/v1/shape",
-    params: {
-      table: "todos",
-    },
-  },
-  primaryKey: ["id"],
-  schema: todoSchema, // standard schema interface
+import { createQueryCollection } from "@tanstack/db-collections"
+
+const todoCollection = createQueryCollection<TodoList>({
+  queryKey: ["todos"],
+  queryFn: async () => fetch("/api/todos"),
+  getPrimaryKey: (item) => item.id,
+  schema: todoSchema, // any standard schema
 })
 ```
 
@@ -72,83 +65,54 @@ import { useLiveQuery } from "@tanstack/react-optimistic"
 
 const Todos = () => {
   const { data: todos } = useLiveQuery((query) =>
-    // You can query across collections with where clauses,
-    // joins, aggregates, etc. Here we're doing a simple query
-    // for all the todos that aren't completed.
-    query
-      .from({ todoCollection })
-      .where("@completed", "=", false)
-      .select("@id", "@text")
-      .keyBy("@id")
+    query.from({ todoCollection }).where("@completed", "=", false)
   )
 
   return <List items={todos} />
 }
 ```
 
-Define a `mutationFn` to handle persistence of local writes:
+Apply transactional writes with local optimistic state:
 
 ```tsx
-import type { Collection } from "@tanstack/optimistic"
-import type { MutationFn, PendingMutation } from "@tanstack/react-optimistic"
-
-const filterOutCollection = (mutation: PendingMutation) => {
-  const { collection: _, ...rest } = mutation
+import { useOptimisticMutation } from "@tanstack/react-optimistic"
 
-  return rest
-}
+const AddTodo = () => {
+  const addTodo = useOptimisticMutation({
+    mutationFn: async ({ transaction }) => {
+      const { collection, ...newTodo } = transaction.mutations[0]!
 
-// You can handle mutations any way you like. Here, we define a
-// generic function that POSTs them to the server.
-const mutationFn: MutationFn = async ({ transaction }) => {
-  const payload = transaction.mutations.map(filterOutCollection)
-  const response = await fetch("https://api.example.com", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
+      await axios.post("/api/todos", newTodo)
+      await collection.invalidate()
     },
-    body: JSON.stringify(payload),
   })
 
-  if (!response.ok) {
-    // Throwing an error will rollback the optimistic state.
-    throw new Error(`HTTP Error: ${response.status}`)
-  }
-
-  const result = await response.json()
-
-  // Wait for the transaction to be synced back from the server
-  // before discarding the optimistic state.
-  const collection: Collection = transaction.mutations[0]!.collection
-  await collection.config.sync.awaitTxid(result.txid)
+  return (
+    <Button
+      onClick={() =>
+        addTodo.mutate(() =>
+          todoCollection.insert({
+            id: uuid(),
+            text: "🔥 Make app faster",
+            completed: false,
+          })
+        )
+      }
+    />
+  )
 }
 ```
 
-Use it in your components:
+## 📚 Docs
 
-```tsx
-import { useOptimisticMutation } from "@tanstack/react-optimistic"
+See the [Usage guide](./docs/index.md) for more details, including how to do:
 
-const AddTodo = () => {
-  const tx = useOptimisticMutation({ mutationFn })
-
-  const addTodo = () => {
-    // Triggers the mutationFn to sync data in the background.
-    tx.mutate(() =>
-      // Instantly applies the local optimistic state.
-      todoCollection.insert({
-        id: uuid(),
-        text: "🔥 Make app faster",
-        completed: false,
-      })
-    )
-  }
-
-  return <Button onClick={addTodo} />
-}
-```
+- real-time sync
+- cross-collection queries
+- fine-grained reactivity
+- different strategies for data loading and handling mutations
 
-For transactional writes with local optimistic state and managed background sync.
+There's also an example [React todo app](./examples/react/todo) and usage examples in the [package tests](./packages/optimistic/tests).
 
 ## 🧱 Core concepts
 
@@ -173,12 +137,6 @@ For transactional writes with local optimistic state and managed background sync
 npm install @tanstack/db
 ```
 
-## 📚 Docs
-
-See the [Documentation](./docs/index.md) for usage guides and the API reference.
-
-There's also an example [React todo app](./examples/react/todo).
-
 ## ❓ FAQ
 
 **How is this different from TanStack Query?**<br />