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

fascinating-indigo
fascinating-indigo8/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...
adverse-sapphire
adverse-sapphire8/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
correct-apricot
correct-apricot8/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
fair-rose
fair-rose8/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 }) => ...
absent-sapphire
absent-sapphire8/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?...
passive-yellow
passive-yellow8/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...
ratty-blush
ratty-blush8/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)),...
fascinating-indigo
fascinating-indigo8/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...
tame-yellow
tame-yellow8/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
passive-yellow
passive-yellow8/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")...
like-gold
like-gold8/12/2025

Taking params via quercollection options

Is there a best way to do this or am i thinking about this wrong? for context, i want to make a collection for session messages, on updates i'll probably end up using your writeBatch function to avoid refetches. however how would i go about the queryfn in an approach like this? sorry if this is a newbie type of question, i usually like deep diving on docs but they aren't there yet and im sure we've got some pros in here...
passive-yellow
passive-yellow8/7/2025

createOptimisticAction rollback too returning in the mutationFn does nothing

and onUpdate handlers doesnt fire ```ts export const updateRating = createOptimisticAction<{ id: number, rating: number...
passive-yellow
passive-yellow8/6/2025

collection insert rollback instantly

perhaps doing it wrong but when i click on insert the data do ``` [{"id": 1}] [{"id": 1}, {"id": 2}] [{"id": 1}]...
like-gold
like-gold8/1/2025

Is collection schema just for type inference, or is it leveraged internally for other operations?

Do I gain anything by adding a schema to a collection when my api already returns typed responses?
like-gold
like-gold8/1/2025

Best practice suggestion: Should I avoid mapping over api data?

A lot of my useQuery hooks are mapping over api response to shape the data nicely for frontend consumption. My hunch is that I should generally avoid doing this and do the massaging in the select of a useLiveQuery or pure function instead of altering the data shape of whats going to the db. Pls confirm/deny/refine my hunch 🙂 Example Before...
like-gold
like-gold8/1/2025

Best practice suggestion: Should I strip pagination information?

A lot of my queries include pagination information. Assuming I'm able to get all of a thing from my api, should I change the response to strip the pagination meta when returning to a collection? ({ total: data.total, items: data.items }) --> data.items...
like-gold
like-gold8/1/2025

is a live query collection just an alias for a regular collection?

maybe im overthinking this. say i have ```ts const usersCollection = createCollection( queryCollectionOptions({ id: "users",...
variable-lime
variable-lime7/31/2025

Pattern: Populating a collection "as needed" with multiple Queries throughout app - no "base" query.

This thread explores using various useQuery hooks throughout the app to "feed" our collections, only adding records as they're called for throughout the app. We don't want to force the user to load entire db tables since 95% of the time they will only use a small % of them. We do want to progressively build up a store and use it's querying methods to performantly select from the data that has been fetched. As of 7/31 we have "manual sync update methods" per this issue: https://github.com/TanStack/db/issues/294...
Next