Reactivity with relationship details

[wilkerlucio]

Hello folks, I'm currently working on a project using TinyBase with Svelte. I wrote some store bindings for Svelte so I use it in a way that's pretty close to they way the provided React Hooks works. I believe my issue would apply for the React Hooks as well.

So, in my modeling I have two tables:

• medias: with fields title and channel
• loops: with fields startTime, endTime, label and source (the later points to ids from medias)

And this is my store setup (with the relationships):

const store: Store = createStore();

const relationships: Relationships = createRelationships(store);
relationships.setRelationshipDefinition('mediaLoops', 'loops', 'medias', 'source')

The issue I have comes from the fact that the helpers to work with relationships only return the ID's (not the actual data). So at a parent component I load the ids from the relationship, like so (I stripped to keep only relevant parts to explain the problem):

<script lang="ts">
  import {useRelationshipLocalRowIds} from "@/lib/stores/tinybase-stores";

  export let sourceId: string

  // this page is to render loops from a specific media, so we load the relationship here
  $: loops = useRelationshipLocalRowIds('mediaLoops', sourceId)
</script>

<div class="container">
  {#each $loops as id}
    <LoopEntry {id} />
  {/each}
</div>

Inside LoopEntry I start another listener so they get reactive to any changes, like:

<script lang="ts">
  import {useRow} from "@/lib/stores/tinybase-stores";

  export let id;

  const loop = useRow('loops', id) as Loop
</script>

Render {$loop.label}

This part is working great, the parent UI correctly updates when new entries are add, or current entries are removed, while the child component properly updates when anything changes about that row.

So for my next feature, I need to sort the loops from the parent, and that's where I'm finding difficult to make a solution. On that list, I want to sort the loops by startTime, but with only the ID's I don't have that information available there.

I consider just making a loop and reading the data from the loops at the parent, the issue is that doing so wont make the details reactive, so although it responds correctly for adding/removing entries, it doesn't update when a detail from a row is changed.

I though about adding a new listener in that mapping, but similar to React, I can't create these things in a loop.

I though about using a query, but the issue is that queries don't take parameters, so its strange to create a new query for each media that I have.

Listening on the whole loops table also feels pretty inefficient, having to read the whole table while I only need the rows from a specific source.

So I wonder, how can I make so that I have the relationships data being reactive, and not just the ids? What would you folks do to solve this situation?

Thanks!