Dependent Live Queries ?

[mnpqraven]

When working with Tanstack Query, it's very easy to write queries that depends on another query's input with correct execution flow by allowing passing undefined inputs (userId: string | undefined) but then pause the query with the enabled option.

But with live queries, I don't see a way to pause the subsequent live queries or a way to use something akin to skipToken to satisfy the typecheck. There IS an enabled options when you create a collection with queryCollectionOptions, but that's on a collection creation level and not a hook level when you use it in arbitrary places in the code base. So my question is, with the below sample code how should i structure my live query props to have an order query only run when i have finished running my user query? appreciate the pointers

// collections.ts
export function useUser(opt?: { id?: string; email?: string }) {
  return useLiveQuery((q) =>
    q
      .from({ user: userCollection })
      .where(({ user }) => or(eq(user.id, opt?.id), eq(user.email, opt?.email)))
      .findOne(),
  );
}

export function useGroupOrderSummary({ userId }: { userId: string }) {
  return useLiveQuery(
    (q) =>
      q
        .from({ gos: groupOrderSummaryCollection })
        .where(({ gos }) => or(eq(gos.fromId, userId), eq(gos.toId, userId))),
    [userId],
  );
}

// Component.tsx
function Component() {
  const { data: user } = useUser({ email: oauth?.user?.email }); // user: User | undefined
  const { data } = useGroupOrderSummary({ userId: user?.id });  // type error: userId only accepts string

  return <></>
}

[mnpqraven]

What i can do is probably to create a collection dynamically like so

export const groupOrderSummaryCollection = (userId: string | undefined) => createCollection(
  queryCollectionOptions({
    queryKey: ["group_orders", "summary", userId],
    queryFn: async () => getOrderByUser(userId),
    enabled: Boolean(userId?.length),
    getKey: (item) => item.id,
    schema,
    queryClient,
  }),
);

and then is my hooks that use the collections those collections would be created dynamically like these

export function useGroupOrderSummary({ userId }: { userId: string }) {
  return useLiveQuery(
    (q) =>
      q
        .from({ gos: groupOrderSummaryCollection(userId) })
        .where(({ gos }) => or(eq(gos.fromId, userId), eq(gos.toId, userId))),
    [userId],
  );
}

But I'm not sure if this is the "correct" way to use the collections and/or if this would break caching

[TimFL]

Late to the party, but you can return early in your second query (in case you still need a solution):

export function useGroupOrderSummary({ userId }: { userId?: string }) {
  return useLiveQuery(
    (q) =>
      userId ?
          q
            .from({ gos: groupOrderSummaryCollection(userId) })
            .where(({ gos }) => or(eq(gos.fromId, userId), eq(gos.toId, userId)))
        : undefined
    [userId],
  );
}

Beware, there is currently a pending PR that fixes isReady from being stuck with a false value when returning early: #886