TanStack

T

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

react-query-questions

solid-query-questions

table-questions

virtual-questions

router-questions

react-charts-questions

ranger-questions

vue-query-questions

svelte-query-questions

bling-questions

form-questions

angular-query-questions

start-questions

db-questions

start-showcase

router-showcase

📣-announcements

xenial-black
xenial-black9/7/2025

onInsert vs createOptimisticAction

The docs don't make it clear when I can simply use an onInsert callback on my collection and just insert new elements vs when I need to use createOptimisticAction. Right now I have both defined and it's just duplicated code and I feel like I'm doing something wrong. I do want optimistic updates, but I don't understand why there is a createOptimisticAction when the onInsert seems to do the same thing?...
xenial-black
xenial-black9/1/2025

how do I work with very large collections

Many of the types of data I want to use this for are so large, that they could and should never be loaded entirely on the frontend. I already have server-side filtering and am wondering how to best convert this to tanstack db. I don't really have any idea how to start on that....
optimistic-gold
optimistic-gold9/1/2025

Multiple Joins "Invalid join condition"

I'm having this issue when i'm trying to This are my collections nothing fancy ``` const playersCollection = createCollection( queryCollectionOptions({...
correct-apricot
correct-apricot8/30/2025

Shape Options - Parser: timestamptz

Hi there, I'm hoping to clarify what the expected behavior is when using a collection's update functionality with trpc, when that collection is using a parser for dates like so: ``` shapeOptions: { parser: {...
evident-indigo
evident-indigo8/29/2025

subquery doesn't work in join

```ts // not work const { data: a } = useLiveQuery((q) => q.from({ product: productsCollection }) .leftJoin({ tried: createTriedByUserId(user?.id, true) }, ({ tried, product }) => eq(tried.productId, product.id))...
correct-apricot
correct-apricot8/29/2025

Tanstack DB - Live Queries return zero results sometimes

I have a nested datastructure - a trip can contain segments or days, segments contain days, and days contain activities. I am trying to render these via live electric sql collections. When first load my page everything works fine, but when I edit the list of days my activities seemingly disappear...
fascinating-indigo
fascinating-indigo8/26/2025

[Query collection] how to insert with defaults

hi guys. i have this query collection its query function is a server function that fetches from my database: ```ts export const messageSchema = z.object({...
fascinating-indigo
fascinating-indigo8/26/2025

Data not updating when you using localStorageCollectionOptions with a custom storage (AsyncStorage)

Hi guys i did create a quick wrapper to use AsyncStorage with localStorageCollection the insert function fine but updates dont trigger a setItem anyway to debug this ? Collection ```export const sessionCollection = createCollection( localStorageCollectionOptions({...
harsh-harlequin
harsh-harlequin8/26/2025

Not getting db updates live?

Trying to get an initial version of this working with Electric - when using their useShape hook I get my reactive updates as I need, however I have been trying to get this working with TanstackDB but while the initial sync does work but I get no live updates. I am happy to tempoarily provide access to a branch for debugging. I am querying across collections: ```ts...
exotic-emerald
exotic-emerald8/26/2025

How to get update server id after onInsert?

In onInsert I'm calling my TRPC endpoint which return the server generate Public ID of the newly inserted item. How can I access that data where I called Collection.insert?...
No description
ratty-blush
ratty-blush8/25/2025

Incremental update example question

I'm having trouble with the incremental update example. It does not seem to work as described. I am calling createTodo, which: 1. Calls todosCollection.insert. 2. The onInsert funtion returns { refetch: false }, which means the optimistic update is immediately rolled back and the UI will not show the new state. 3. api.createTodo is called and the todo is created on the server 4. writeDelete is called and errors out since the item with id: tempId was never added to the store....
rare-sapphire
rare-sapphire8/23/2025

Are `multiple joins` same as SQL multiple joins ?

I have an issue with multiple joins, I need some joins between a main table and other 4 tables but it seems that the output on TanStack DB is different from the same query on SQL. These are my collection and SQL query: TanStack DB Collection...
No description
variable-lime
variable-lime8/22/2025

Joining on array column

in this example posts can have multiple authors which are saved in an array field in the database ```ts q .from({ post: postsCollection }) .join({ user: usersCollection }, ({ post, user }) => ...
extended-salmon
extended-salmon8/22/2025

What would be the best way to handle paginations and filtering

What would be the best way to handle backend pagination and filtering with db? I am looking for suggestions, still can fully wrap my head around it. We would fetch every page and filter individualy and then push those records to a collection?...
evident-indigo
evident-indigo8/21/2025

Please i need help how can i install my custom tanstack db in a project

(i know that not a tanstack db relative question, sorry) ive been trying all day using git submodule trying to link with pnpm link link:/ in package.json im in an expo project react keeps yelling at me for invalid hook call theres 0 react in dependencies in any package.json all react versions match...
harsh-harlequin
harsh-harlequin8/20/2025

Trying to select the latest of visit of a customer

I have these schemas: ```ts const customerSchema = v.object({ id: idWithDefaultSchema, first_name: v.pipe(v.string(), v.minLength(3)),...
solid-orange
solid-orange8/19/2025

Quick noob performance question

I LOVE the idea behind tanstack-db and really want to switch to it. Our app has to be extremely fast and shows hundreds and hundreds of cells in grids on the screen at a time (with tabs that we tab back and forth to see diff grids). It uses redux currently and is optimized to death to make sure it stays fast but comes at a cost of a LOT of code to get it to stay fast. Switching the code in the cell component, from our current pre-keyed redux and rereselects to a useLiveQuery, removes a ton of code and simplifies everything BUT I'm seeing it rendering much more slowly. It becomes more noticeable the more grids and cells that are showing. It's not doing any updates to the store , I'm just tabbing back and forth and the component is rendering the data. The orderCollection is just js objects keyed by an id string. The useLiveQuery I'm using is basically as simple as this: export const useOrderQuery = <T>(a: string, b: string, c: string): T[] => { return useLiveQuery(q => q...
flat-fuchsia
flat-fuchsia8/17/2025

Fields coming back as snake case from DB

I've been following the tanstackdb-electric-starter pretty heavily for my project and just noticed a weird issue. When my electric collection retrieves fields, it retrieves them snake cased (hello_world)
I am following the same convention as the starter project, using drizzle and zod schema for my collection's schemas....
No description
evident-indigo
evident-indigo8/17/2025

How can i get multiples row in a query with join

```ts const { data: products } = useLiveQuery((q) => { let products = q.from({ tried: triedsCollection }) .innerJoin({ product: productsCollection }, ({ product, tried }) => eq(product.id, tried.productId)) .orderBy(({ tried }) => tried.createdAt, "desc")...