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.