Заметки про React
Ссылка
нажмите — покажем
нажмите — покажем
TanStack DB
TanStack представила новую библиотеку – TanStack DB – реактивный клиентский стор, с возможностью синка API запросов. Библиотека работает поверх TanStack Query и расширяет его функционал. Разработчики обещают быструю скорость работы библиотеки, даже на больших объемах данных.
Библиотека предлагает fine-grained реактивность, возможность нормализации данных и примитивы транзакций.
Примеры использования:
Синк данных коллекции с API:
import { createQueryCollection } from "@tanstack/db-collections"
const todoCollection = createQueryCollection<Todo>({
queryKey: ["todos"],
queryFn: async () => fetch("/api/todos"),
getId: (item) => item.id,
schema: todoSchema, // любая схема
})
Использование live query и фильтрации:
import { useLiveQuery } from "@tanstack/react-db"
const Todos = () => {
const { data: todos } = useLiveQuery((query) =>
query.from({ todoCollection }).where("@completed", "=", false)
)
return <List items={todos} />
}
Использование транзакций и оптимистичных изменений на клиенте:
import { useOptimisticMutation } from "@tanstack/react-db"
const AddTodo = () => {
const addTodo = useOptimisticMutation({
mutationFn: async ({ transaction }) => {
const { collection, modified: newTodo } = transaction.mutations[0]!
await api.todos.create(newTodo)
await collection.invalidate()
},
})
return (
<Button
onClick={() =>
addTodo.mutate(() =>
todoCollection.insert({
id: uuid(),
text: "🔥 Make app faster",
completed: false,
})
)
}
/>
)
}
https://github.com/TanStack/db
49 · 2.9K ·