rival-black

Questions about Purpose

I respectfully would like to make sure I understand the value add of this library because I find it super interesting and I may actually use it to speed up some deeply nested stuff I'm doing in a menu builder app, here are some questions I have... 1. If I'm building something with TanstackDB is the assumption that I fetch all my data for a user up front in flat arrays rather than nested data structures, that way I'm doing my joins on the frontend and can keep things more performant? For example, in my current app, I fetch nested data for a Restaurant that looks like this (it's way more complicated in practice)

const restaurants = [
    {
       name: "Mama's Pizza",
       id: 'mamas-pizza-id',
       menus: [
         {
            id: 'mamas-pizza-dinner-menu',
            name: "Dinner",
            restaurantId: 'mamas-pizza-id',
            items: [
               { 
                 id: 'mamas-pizza-pizza-item', 
                 name: 'pepperoni pizza', 
                 menuId: 'mamas-pizza-dinner-menu'
               }
            ]
          }
         ...
       ]
    },
    ...
]

const restaurants = [
    {
       name: "Mama's Pizza",
       id: 'mamas-pizza-id',
       menus: [
         {
            id: 'mamas-pizza-dinner-menu',
            name: "Dinner",
            restaurantId: 'mamas-pizza-id',
            items: [
               { 
                 id: 'mamas-pizza-pizza-item', 
                 name: 'pepperoni pizza', 
                 menuId: 'mamas-pizza-dinner-menu'
               }
            ]
          }
         ...
       ]
    },
    ...
]

It seems like maybe at least part of the goal here is that with the query language I can take some of that load off my backend having to do joins and instead just: - get all restaurants for user - get all menus for user - get all items for user Then I can do stuff like: caching each endpoint separately, faster querying, easier to write frontend mutations because it's all onto a flat array. Is this correct? 2. Is the query language a performance thing or a convenience thing? For example to do what I described above I could do something like:

const Menu = ({ menu }) => {
  const {data: items} = useLiveQuery(q => q
   .from({itemsCollection})
    // pseudocode
   .getWhere("@menuId = ${menu.id}")
   .orderBy("@order")
  )
}

const Menu = ({ menu }) => {
  const {data: items} = useLiveQuery(q => q
   .from({itemsCollection})
    // pseudocode
   .getWhere("@menuId = ${menu.id}")
   .orderBy("@order")
  )
}

But other than optimistic stuff, is this functionally any more performant than just doing something like this?

const useItemsForMenu = (menu: Menu) => {
   const itemsQuery = useItemsQuery()

    return itemsQuery
      .data
      ?.filter(n => n.menuId === menu.id)
       .toSorted((a,b) => a.order - b.order)
}

const Menu = ({ menu }) => {
  const {data: items} = useLiveQuery(q => q
   .from({itemsCollection})
    // pseudocode
   .getWhere("@menuId = ${menu.id}")
   .orderBy("@order")
  )
}

const useItemsForMenu = (menu: Menu) => {
   const itemsQuery = useItemsQuery()

    return itemsQuery
      .data
      ?.filter(n => n.menuId === menu.id)
       .toSorted((a,b) => a.order - b.order)
}

const Menu = ({ menu }) => {
  const {data: items} = useLiveQuery(q => q
   .from({itemsCollection})
    // pseudocode
   .getWhere("@menuId = ${menu.id}")
   .orderBy("@order")
  )
}

This is all I've got for right now, I imagine this could actually be something that speeds up my app considerably. Also I've attached a picture of the app I'm thinking about doing this on. It's kind of perfectly built for local-first architecture, and if I don't use something like Tanstack DB in the future at some point I'll likely use something else similar.

3 Replies

rival-blackOP•4mo ago

3. Is the responsibility of the whole useOptimistic part basically to appropriately handle making sure that when users click on things, that the order of backend updates is correct (I'm assuming with a queue or something like that)

conscious-sapphire•4mo ago

1. Yes, exactly. 2. Both, the live query avoids having to write manual filtering code and is radically faster. 3. Sort of. I would say it’s more to give you a natural system to make and handle optimistic writes. One that’s transactional, shares the optimistic state across components and works transparently with live queries.

rival-blackOP•4mo ago

Thanks! I might have ato make a little weekend project one of these days. It seems like this could dramatically speed up my app

Gaming

Programming

Questions about Purpose

Did you find this page helpful?