TanStack / TanStack/db

UseLiveQueryReturn is missing fields that electric appends

Open Beginner friendly
#1,676 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
3.9k
Forks
266
Avg merge
1d 4h
Merged PRs (30d)
55

Description

  • I've validated the bug against the latest version of DB packages

Describe the bug
UseLiveQueryReturn when used agains a ElectricCollection, doesn't match what actually a useLiveQuery returns for a query from an electric collection.

To Reproduce
Steps to reproduce the behavior:

  1. Create zod schema
import { z } from 'zod/v4';

export const actionSchema = z.object({
	id: z.string().uuid(),
	label: z.string(),
	// ... wathever...
});

export type Action = z.infer<typeof actionSchema>;
  1. Create a collection
const electricOpts = electricCollectionOptions({
	id: 'actions',
	schema: actionSchema,
	getKey: (item) => item.id,
	shapeOptions: {
		url: `${env.PUBLIC_URL}/shapes/actions`,
		subsetMethod: 'POST',
		columnMapper: snakeCamelMapper(),
	},
});
export const actionsCollection = createCollection(electricOpts);
  1. Query it using live query (in svelte in this case, and inside of a class)
#query: UseElectricLiveQueryReturn<Action> | null = $state(null);

// ...class stuff...

this.#query = useLiveQuery((q) =>
	q.from({ a: actionsCollection }).orderBy(({ a }) => a.createdAt, 'desc').limit(50),
);
  1. Expect a type error that the query is missing { readonly $synced: boolean; readonly $origin: VirtualOrigin; readonly $key: string | number; readonly $collectionId: string; } from the original type passed (Action in this case)

Expected behavior
Type should match correctly when inferring from UseElectricLiveQueryReturn<Action>

Workaround
I've created the follow type util to help me while this is an issue

import type { UseLiveQueryReturn, VirtualOrigin } from "@tanstack/svelte-db";

export type UseElectricLiveQueryReturn<T extends object> = UseLiveQueryReturn<T & {
  readonly $synced: boolean; readonly $origin: VirtualOrigin; readonly $key: string | number; readonly $collectionId: string;
	}>;

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the TypeScript definitions for UseLiveQueryReturn and the ElectricCollection live-query return type, then compare them with the fields appended by Electric. Reproduce the Action example and verify that the inferred useLiveQuery result satisfies UseElectricLiveQueryReturn without a workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.