Using Includes with React

[RockyAiii]

95% of my app is based on a tree view, like gitHub I guess. Previously using react query i had a nested prisma call and could build the tree nodes from that data. Messy but it worked. Doing optimistic mutations on those nodes, i tried but was a hell no.

Reading what it says on the tin, ts-db seems the perfect fit for this. My previous attempt I never subscribed the children for the reactive updates. When i go back to the component it would refetch the children every time as I guess they had no parent.

So I've tried to follow this example with my code below.
https://tanstack.com/db/latest/docs/guides/live-queries#using-includes-with-react

//accountsCollection.ts
import { queryCollectionOptions } from "@tanstack/query-db-collection";
import { createCollection } from "@tanstack/react-db";
import { z } from "zod";
import { fetchAccountsFn } from "@/data/accountsCRUD";
import { queryClient } from "@/integrations/query/root-provider";

const accountsSchema = z.object({
	id: z.string(),
	name: z.string(),
});

export type Account = z.infer<typeof accountsSchema>;

export const accountsCollection = createCollection(
	queryCollectionOptions({
		queryKey: ["accounts"],
		queryFn: async () => {
			const { accounts } = await fetchAccountsFn();
			console.log("AccountsFetched:", accounts.length);
			return accounts;
		},
		queryClient,
		schema: accountsSchema,
		getKey: (project) => project.id,
	}),
);

//locationsCollection.ts
import { queryCollectionOptions } from "@tanstack/query-db-collection";
import { createCollection } from "@tanstack/react-db";
import { z } from "zod";
import { fetchLocationsFn } from "@/data/locationsCRUD";
import { queryClient } from "@/integrations/query/root-provider";

const locationsSchema = z.object({
	id: z.string(),
	accountId: z.string(),
	region: z.string(),
	country: z.string(),
	buildingName: z.string(),
});

export type Location = z.infer<typeof locationsSchema>;

export const locationsCollection = createCollection(
	queryCollectionOptions({
		queryKey: ["locations"],
		queryFn: async () => {
			const { locations } = await fetchLocationsFn();
			console.log("LocationsFetched:", locations.length);
			return locations;
		},
		queryClient,
		schema: locationsSchema,
		getKey: (location) => location.id,
	}),
);

//query.tsx
import { eq, useLiveQuery } from "@tanstack/react-db";
import { accountsCollection } from "#/collections/accountsCollection";
import { locationsCollection } from "#/collections/locationsCollection";

export function AccountList() {
	const { data: accounts } = useLiveQuery((q) =>
		q.from({ a: accountsCollection }).select(({ a }) => ({
			id: a.id,
			name: a.name,
			locations: q
				.from({ l: locationsCollection })
				.where(({ l }) => eq(l.accountId, a.id))
				.select(({ l }) => ({
					id: l.id,
					region: l.region,
					country: l.country,
					buildingName: l.buildingName,
				})),
		})),
	);

	return (
		<ul>
			{accounts.map((act) => (
				<li key={act.id}>
					{act.name}
					{/* Pass the child collection to a subcomponent */}
					<LocationsList locationsCollection={act.locations} />
				</li>
			))}
		</ul>
	);
}

function LocationsList({ locationsCollection }) {
	// Subscribe to the child collection for reactive updates
	const { data: locations } = useLiveQuery(locationsCollection);

	return (
		<ul>
			{locations.map((loc) => (
				<li key={loc.id}>{loc.region}</li>
			))}
		</ul>
	);
}

Everything is fine until the prop for the LocationsList. I get an error of

Binding element 'locationsCollection' implicitly has an 'any' type.

I thought no problem. No matter what i tried to resolve, it did not work. Just threw more errors into the function above. Got AI involved and still no resolution. THis is most likley user error, but has something changed to how this works now?

Granted it's extreme for these 2 be in collections as they will hardly, if ever be mutated. But just trying to get an understanding of how it works to progress more. Any help would be appreciated.

Respect and thank you.

[KyleAMathews]

Did you get this working?

[RockyAiii]

Hi Kyle,

I'm going back to the beginning to try to get an understanding. I tend to overthink which leads to overcomplicate and that's when i go round in circles.

I was playing around and the $collectionId was live-query-1 and kept going up on every mount so know I'm wayy off the path.

My thinking now is to create a query collection for each model in prisma as before. But now underneath that, const a createLiveQueryCollection: as the master. Then all the useLiveQuery that will be created will be subsrcibed to that one master live collection. I think that was the part i was missing or not understanding correctly.

Then i think back to the nested where it all started and thought do i need to create another seperate createLiveQueryCollection and go back to being confuzed. Not a package issue,, just a me issue on understanding.

[dana-khaing]

Your runtime approach looks fine; the error you are hitting is just TypeScript telling you that the destructured prop in LocationsList has no annotation.

The important part is that act.locations is not a plain Location[]. For includes/subqueries, TanStack DB returns a live Collection, and that is exactly what you pass into useLiveQuery(...) in the child component.

So type the prop as a Collection, not as an array:

import type { Collection } from '@tanstack/react-db'

type LocationRow = {
  id: string
  region: string
  country: string
  buildingName: string
}

function LocationsList({
  locationsCollection,
}: {
  locationsCollection: Collection<LocationRow, string, {}>
}) {
  const { data: locations } = useLiveQuery(locationsCollection)

  return (
    <ul>
      {locations.map((loc) => (
        <li key={loc.id}>{loc.region}</li>
      ))}
    </ul>
  )
}

Why this works:

• the parent query returns locations as a child live Collection
• useLiveQuery(childCollection) subscribes to that child collection
• the implicit any error goes away because the prop is now annotated

So this is not really a TanStack DB bug or a changed include pattern, just a missing prop type. The key mental model is: include/subquery field = Collection, not Location[].

[RockyAiii]

I've tried that before in looking for a resolution and it gave out more errors than just the any error. For the collection i get

Type 'Collection<LocationRow, string, {}, StandardSchemaV1<unknown, unknown>, LocationRow>' is not assignable to type 'SingleResult'. Types of property 'singleResult' are incompatible.

Where adding the child LocationList, an error of missing fields etc shows up. That's when I go through the prisma, zod schemas to see what am I missing here. Is it typescript v6 whic i doubt, but that's the hole i go down and overthink.

I've created a repo to clone as it could be the setup I'm using somehow.

https://github.com/RockyAiii/ts-react-db-test.git

Thanks for your time Dana