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

national-gold
national-gold9/26/2025

Creating multiple collections from a single query?

Hiya folks! I'm curious: we're looking at adding batched rpc routes for a given page that return all data required to render said page in a single request. Is there a way to create/update multiple collections from a single query?
optimistic-gold
optimistic-gold9/17/2025

Is it possible to keep SSR on in TanStack Start when using TanStack DB?

```tsx export const Route = createFileRoute("/stuff/")({ ssr: false, component: RouteComponent, });...
eastern-cyan
eastern-cyan9/16/2025

Hitting issues updating an item in collection

```tsx export const createConversationThoughtsCollection = ( conversationId: string ) => { return createCollection(...
eastern-cyan
eastern-cyan9/15/2025

Best practices on keeping multiple electric connections active

Hey there I was planning on having everything sync'd at login by having a Provider that calls all liveQueries so that it will always have a sync connection. That being said, my normal requests weren't going out. I removed the provider and the normal REST requests started going out again. Is this a limitation on android? Should I not have a provider wrapped around my app? I'm not concerned about server bandwidth for having 5 active request per open app, but it seems normal rest API requests are being prevented from firing PS- I'm using this w/ React Native...
No description
conventional-tan
conventional-tan9/14/2025

Collection errors are not trackable without calling useLiveQuery

If I check collection.utils.errorCount() in a component that won't use a live query hook, the collections error utils won't trigger a rerender. It's a bummer because I'd like to be able to check if a collection has errored in a child component, and I don't want to subscribe to a live query in the parent as it adds 10-15ms to the render duration of the parent component. This tiny delay makes the children optimistic updates feel much less snappy...
conventional-tan
conventional-tan9/13/2025

Is a single item collection a valid pattern?

Hi! I really love the benefits that DB brings on top of Query. Especially the optimistic updates! However, I’ve been struggling to understand the mental model around single item collections, like user data. Should I create a users collection with a single item, and wrap the returned data from queryFn into an array to conform to an array? ...
extended-salmon
extended-salmon9/13/2025

Zombie Effect

Has anybody else experienced page hang when navigating quickly between two routes that both use the useLiveQuery hooks? Tanstack router registers the route change, the url changes, but the page content does not change? When the useLiveQuery hook is not being used in the route, then this issue goes away....
sunny-green
sunny-green9/13/2025

are collections meant to be singletons?

Hi friends, Just getting my feet wet here and thinking about the multi-tenant use case where we might want to have a query function that, for example, fetchs todos for a specific organization. ```...
adverse-sapphire
adverse-sapphire9/9/2025

unique index does not throw DuplicateKeyError

Maybe I'm misunderstanding how it should work but I'm trying to handle duplicates on the client to faster feedback. I have added an index to my collection and it correctly deduplicates the data, however my insert just fails silently now ```ts ratelimitOverrides.createIndex((row) => [row.namespaceId, row.identifier], {...
adverse-sapphire
adverse-sapphire9/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?...
adverse-sapphire
adverse-sapphire9/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....
foreign-sapphire
foreign-sapphire9/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({...
solid-orange
solid-orange8/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: {...
foreign-sapphire
foreign-sapphire8/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))...
solid-orange
solid-orange8/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...
evident-indigo
evident-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({...
variable-lime
variable-lime8/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({...
fair-rose
fair-rose8/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...
absent-sapphire
absent-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
other-emerald
other-emerald8/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....