Skip to content

Add queryClient to overview and quick-start docs, along with a few other things that feel like they should be there. #1041

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AppSynergy wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add queryClient to overview and quick-start docs, along with a few other things that feel like they should be there. #1041

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions docs/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,12 +105,14 @@ With on-demand mode, your component's query becomes the API call:
```tsx
const productsCollection = createCollection(
queryCollectionOptions({
queryClient: new QueryClient(),
queryKey: ['products'],
queryFn: async (ctx) => {
// Query predicates passed automatically in ctx.meta
const params = parseLoadSubsetOptions(ctx.meta?.loadSubsetOptions)
return api.getProducts(params) // e.g., GET /api/products?category=electronics&price_lt=100
},
getKey: (product) => product.id,
syncMode: 'on-demand', // ← Enable query-driven sync
})
)
Expand Down Expand Up @@ -397,15 +399,17 @@ The steps are to:
2. implement mutation handlers that handle mutations by posting them to your API endpoints

```tsx
import { useLiveQuery, createCollection } from "@tanstack/react-db"
import { useLiveQuery, createCollection, eq } from "@tanstack/react-db"
import { queryCollectionOptions } from "@tanstack/query-db-collection"
import { QueryClient } from "@tanstack/react-query";

// Load data into collections using TanStack Query.
// It's common to define these in a `collections` module.
const todoCollection = createCollection(
queryCollectionOptions({
queryClient: new QueryClient(),
queryKey: ["todos"],
queryFn: async () => fetch("/api/todos"),
queryFn: async () => (await fetch("/api/todos")).json(),
getKey: (item) => item.id,
schema: todoSchema, // any standard schema
onInsert: async ({ transaction }) => {
Expand All @@ -419,8 +423,9 @@ const todoCollection = createCollection(
)
const listCollection = createCollection(
queryCollectionOptions({
queryClient: new QueryClient(),
queryKey: ["todo-lists"],
queryFn: async () => fetch("/api/todo-lists"),
queryFn: async () => (await fetch("/api/todo-lists")).json(),
getKey: (item) => item.id,
schema: todoListSchema,
onInsert: async ({ transaction }) => {
Expand Down
13 changes: 11 additions & 2 deletions docs/quick-start.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,23 @@ TanStack DB is the reactive client-first store for your API. Stop building custo
```tsx
import { createCollection, eq, useLiveQuery } from '@tanstack/react-db'
import { queryCollectionOptions } from '@tanstack/query-db-collection'
import { QueryClient } from '@tanstack/react-query'

interface Todo {
id: string;
text: string;
createdAt: Date;
completed: boolean;
}

// Define a collection that loads data using TanStack Query
const todoCollection = createCollection(
queryCollectionOptions({
queryClient: new QueryClient(),
queryKey: ['todos'],
queryFn: async () => {
const response = await fetch('/api/todos')
return response.json()
return response.json() as Promise<Todo[]>
},
getKey: (item) => item.id,
onUpdate: async ({ transaction }) => {
Expand All @@ -40,7 +49,7 @@ function Todos() {
.orderBy(({ todo }) => todo.createdAt, 'desc')
)

const toggleTodo = (todo) => {
const toggleTodo = (todo: Todo) => {
// Instantly applies optimistic state, then syncs to server
todoCollection.update(todo.id, (draft) => {
draft.completed = !draft.completed
Expand Down