eastern-cyan

Unable to reliably await collection queryFn + data being "Ready"

I'm switching from tanstack query to db using query collections. I use tanstack router also, and my app was full of route loaders that would await queryClient.ensureQueryData(...) (so my route will show a loading fallback until the promise resolves). It's a wonderful pattern and I am hoping to repeat it with tanstack db using await someCollection.preload() but am getting inconsistent results. It seems sometimes my route components render when a query result is an empty array, for just a quick flash, and then the results become available. I assume there is some solution for me in the docs, but the API reference for Collection gives a 404... so I have resorted to trying to read the source code and can't find an issue / the answer there. Maybe there is just a broken link for this Collection documentation? And it could be fixed? And then I would find the answer there? 🙏 tyia

7 Replies

flat-fuchsia•2w ago

Could you share some sample code?

eastern-cyanOP•2w ago

sure, here is my old (current) loader, my new one, which you can see attempts to await toArrayWhenReady() and then falls back to an ensureQueryData -- this ensureQueryData appears to entirely prevent my race condition, whereas I get this briefly-empty-array race condition when I do it like this:

loader: async ({ location, context: { queryClient } }) => {
    let profile = await myProfileCollection.toArrayWhenReady()
    if (!profile || !profile.length) {
        console.log(`Redirecting to /getting-started`, { profile })
        throw redirect({ to: '/getting-started' })
    } 

    return someTitleBarInfo,
},

loader: async ({ location, context: { queryClient } }) => {
    let profile = await myProfileCollection.toArrayWhenReady()
    if (!profile || !profile.length) {
        console.log(`Redirecting to /getting-started`, { profile })
        throw redirect({ to: '/getting-started' })
    } 

    return someTitleBarInfo,
},

This approach would sometimes trigger the race condition where the redirect occurs and then I land on the /getting-started page and can see from the sidebar that I do in fact have a loaded profile; it just became available after the redirect happened. I am sure this is not really the library's fault -- I think what's tripping me up is ensureQueryData() doesn't work the same way as preload or toArrayWhenReady(), perhaps because the ready state doesn't work the same way, and perhaps because cleaning up the collections is async now (rather than synchronously removing queries) and I'm just not quite getting it right. But that brings me back to the docs -- I could probably figure it out but the very important Collection interface documentation is missing https://tanstack.com/db/latest/docs/reference/interfaces/collection.

flat-fuchsia•2w ago

looking into this

flat-fuchsia•2w ago

btw the correct link is https://tanstack.com/db/latest/docs/reference/interfaces/Collection

Collection | TanStack DB Docs

Interface: Collection<T, TKey, TUtils, TSchema, TInsertInput\ Defined in: Enhanced Collection interface that includes both data type T and utilities TUtils Extends <T, TKey, TUtils, TSchema, TInsert...

flat-fuchsia•2w ago

fixing it in https://github.com/TanStack/db/pull/856

GitHub

Fix broken documentation link in sidebar by KyleAMathews · Pull Re...

The sidebar was linking to reference/interfaces/collection (lowercase) but the actual interface documentation is at reference/interfaces/Collection (uppercase). This was causing a broken link in th...

flat-fuchsia•2w ago

hmm yeah — preload/toArrayWhenReady just wait for the queryFn to return

eastern-cyanOP•5d ago

thank you!! already helping :))

Gaming

Programming

Unable to reliably await collection queryFn + data being "Ready"

Did you find this page helpful?