Skip to content

Commit 22faff9

Browse files
authored
fix readme formatting to make lint happy (#66)
1 parent c175aa4 commit 22faff9

File tree

1 file changed

+25
-26
lines changed

1 file changed

+25
-26
lines changed

README.md

Lines changed: 25 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
# TanStack DB
32

43
<!-- ![TanStack DB Header](https://github.com/tanstack/db/raw/main/media/repo-header.png) -->
@@ -49,49 +48,49 @@ TanStack DB is **backend agnostic** and **incrementally adoptable**:
4948
Sync data into collections:
5049

5150
```ts
52-
import { createElectricCollection } from '@tanstack/db-collections'
51+
import { createElectricCollection } from "@tanstack/db-collections"
5352

5453
// You can configure any strategy you like to load data into
5554
// collections. Here we're using the Electric sync engine.
5655
export const todoCollection = createElectricCollection<Todo>({
57-
id: 'todos',
56+
id: "todos",
5857
streamOptions: {
59-
url: 'https://example.com/v1/shape',
58+
url: "https://example.com/v1/shape",
6059
params: {
61-
table: 'todos'
62-
}
60+
table: "todos",
61+
},
6362
},
64-
primaryKey: ['id'],
65-
schema: todoSchema // standard schema interface
63+
primaryKey: ["id"],
64+
schema: todoSchema, // standard schema interface
6665
})
6766
```
6867

6968
Bind live queries to your components:
7069

7170
```tsx
72-
import { useLiveQuery } from '@tanstack/react-optimistic'
71+
import { useLiveQuery } from "@tanstack/react-optimistic"
7372

7473
const Todos = () => {
75-
const { data: todos } = useLiveQuery(query =>
74+
const { data: todos } = useLiveQuery((query) =>
7675
// You can query across collections with where clauses,
7776
// joins, aggregates, etc. Here we're doing a simple query
7877
// for all the todos that aren't completed.
7978
query
8079
.from({ todoCollection })
81-
.where('@completed', '=', false)
82-
.select('@id', '@text')
83-
.keyBy('@id')
80+
.where("@completed", "=", false)
81+
.select("@id", "@text")
82+
.keyBy("@id")
8483
)
8584

86-
return <List items={ todos } />
85+
return <List items={todos} />
8786
}
8887
```
8988

9089
Define a `mutationFn` to handle persistence of local writes:
9190

9291
```tsx
93-
import type { Collection } from '@tanstack/optimistic'
94-
import type { MutationFn, PendingMutation } from '@tanstack/react-optimistic'
92+
import type { Collection } from "@tanstack/optimistic"
93+
import type { MutationFn, PendingMutation } from "@tanstack/react-optimistic"
9594

9695
const filterOutCollection = (mutation: PendingMutation) => {
9796
const { collection: _, ...rest } = mutation
@@ -103,12 +102,12 @@ const filterOutCollection = (mutation: PendingMutation) => {
103102
// generic function that POSTs them to the server.
104103
const mutationFn: MutationFn = async ({ transaction }) => {
105104
const payload = transaction.mutations.map(filterOutCollection)
106-
const response = await fetch('https://api.example.com', {
107-
method: 'POST',
105+
const response = await fetch("https://api.example.com", {
106+
method: "POST",
108107
headers: {
109-
'Content-Type': 'application/json',
108+
"Content-Type": "application/json",
110109
},
111-
body: JSON.stringify(payload)
110+
body: JSON.stringify(payload),
112111
})
113112

114113
if (!response.ok) {
@@ -128,7 +127,7 @@ const mutationFn: MutationFn = async ({ transaction }) => {
128127
Use it in your components:
129128

130129
```tsx
131-
import { useOptimisticMutation } from '@tanstack/react-optimistic'
130+
import { useOptimisticMutation } from "@tanstack/react-optimistic"
132131

133132
const AddTodo = () => {
134133
const tx = useOptimisticMutation({ mutationFn })
@@ -139,13 +138,13 @@ const AddTodo = () => {
139138
// Instantly applies the local optimistic state.
140139
todoCollection.insert({
141140
id: uuid(),
142-
text: '🔥 Make app faster',
143-
completed: false
141+
text: "🔥 Make app faster",
142+
completed: false,
144143
})
145144
)
146145
}
147146

148-
return <Button onClick={ addTodo } />
147+
return <Button onClick={addTodo} />
149148
}
150149
```
151150

@@ -183,10 +182,10 @@ There's also an example [React todo app](./examples/react/todo).
183182
## ❓ FAQ
184183

185184
**How is this different from TanStack Query?**<br />
186-
TanStack DB builds *on top of* TanStack Query. Use Query to fetch data; use DB to manage reactive local collections and mutations. They complement each other.
185+
TanStack DB builds _on top of_ TanStack Query. Use Query to fetch data; use DB to manage reactive local collections and mutations. They complement each other.
187186

188187
**Do I need a sync engine like ElectricSQL?**<br />
189-
No. TanStack DB *is* designed to work with sync engines like [Electric](https://electric-sql.com) but *also* works with any backend: polling APIs, GraphQL, REST, or custom sync logic.
188+
No. TanStack DB _is_ designed to work with sync engines like [Electric](https://electric-sql.com) but _also_ works with any backend: polling APIs, GraphQL, REST, or custom sync logic.
190189

191190
**What is a Collection? Is it like a DB table?**<br />
192191
Kind of. Collections are typed sets of objects, but they can also be filtered views or custom groupings. They're just JavaScript structures that you define and manage.

0 commit comments

Comments
 (0)