@tanstack/solid-db 0.1.61 → 0.2.0

package/dist/esm/useLiveQuery.d.ts

@@ -4,7 +4,7 @@ import { Collection, CollectionStatus, Context, GetResult, InitialQueryBuilder,
 /**
  * Create a live query using a query function
  * @param queryFn - Query function that defines what data to fetch
- * @returns Object with reactive data, state, and status information
+ * @returns Accessor that returns data with Suspense support, with state and status information as properties
  * @example
  * // Basic query with object syntax
  * const todosQuery = useLiveQuery((q) =>
@@ -42,46 +42,68 @@ import { Collection, CollectionStatus, Context, GetResult, InitialQueryBuilder,
  *
  * return (
  *   <Switch>
- *     <Match when={todosQuery.isLoading()}>
+ *     <Match when={todosQuery.isLoading}>
  *       <div>Loading...</div>
  *     </Match>
- *     <Match when={todosQuery.isError()}>
- *       <div>Error: {todosQuery.status()}</div>
+ *     <Match when={todosQuery.isError}>
+ *       <div>Error: {todosQuery.status}</div>
  *     </Match>
- *     <Match when={todosQuery.isReady()}>
- *       <For each={todosQuery.data()}>
+ *     <Match when={todosQuery.isReady}>
+ *       <For each={todosQuery()}>
  *         {(todo) => <li key={todo.id}>{todo.text}</li>}
  *       </For>
  *     </Match>
  *   </Switch>
  * )
+ *
+ * @example
+ * // Use Suspense boundaries
+ * const todosQuery = useLiveQuery((q) =>
+ *   q.from({ todos: todoCollection })
+ * )
+ *
+ * return (
+ *   <Suspense fallback={<div>Loading...</div>}>
+ *     <For each={todosQuery()}>
+ *       {(todo) => <li key={todo.id}>{todo.text}</li>}
+ *     </For>
+ *   </Suspense>
+ * )
  */
-export declare function useLiveQuery<TContext extends Context>(queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext>): {
-    state: ReactiveMap<string | number, GetResult<TContext>>;
+export declare function useLiveQuery<TContext extends Context>(queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext>): Accessor<Array<GetResult<TContext>>> & {
+    /**
+     * @deprecated use function result instead
+     * query.data -> query()
+     */
     data: Array<GetResult<TContext>>;
-    collection: Accessor<Collection<GetResult<TContext>, string | number, {}>>;
-    status: Accessor<CollectionStatus>;
-    isLoading: Accessor<boolean>;
-    isReady: Accessor<boolean>;
-    isIdle: Accessor<boolean>;
-    isError: Accessor<boolean>;
-    isCleanedUp: Accessor<boolean>;
-};
-export declare function useLiveQuery<TContext extends Context>(queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext> | undefined | null): {
     state: ReactiveMap<string | number, GetResult<TContext>>;
+    collection: Collection<GetResult<TContext>, string | number, {}>;
+    status: CollectionStatus;
+    isLoading: boolean;
+    isReady: boolean;
+    isIdle: boolean;
+    isError: boolean;
+    isCleanedUp: boolean;
+};
+export declare function useLiveQuery<TContext extends Context>(queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext> | undefined | null): Accessor<Array<GetResult<TContext>>> & {
+    /**
+     * @deprecated use function result instead
+     * query.data -> query()
+     */
     data: Array<GetResult<TContext>>;
-    collection: Accessor<Collection<GetResult<TContext>, string | number, {}> | null>;
-    status: Accessor<CollectionStatus | `disabled`>;
-    isLoading: Accessor<boolean>;
-    isReady: Accessor<boolean>;
-    isIdle: Accessor<boolean>;
-    isError: Accessor<boolean>;
-    isCleanedUp: Accessor<boolean>;
+    state: ReactiveMap<string | number, GetResult<TContext>>;
+    collection: Collection<GetResult<TContext>, string | number, {}> | null;
+    status: CollectionStatus | `disabled`;
+    isLoading: boolean;
+    isReady: boolean;
+    isIdle: boolean;
+    isError: boolean;
+    isCleanedUp: boolean;
 };
 /**
  * Create a live query using configuration object
  * @param config - Configuration object with query and options
- * @returns Object with reactive data, state, and status information
+ * @returns Accessor that returns data with Suspense support, with state and status information as properties
  * @example
  * // Basic config object usage
  * const todosQuery = useLiveQuery(() => ({
@@ -105,34 +127,38 @@ export declare function useLiveQuery<TContext extends Context>(queryFn: (q: Init
  * }))
  *
  * return (
- *   <Switch fallback={<div>{itemsQuery.data.length} items loaded</div>}>
- *     <Match when={itemsQuery.isLoading()}>
+ *   <Switch fallback={<div>{itemsQuery().length} items loaded</div>}>
+ *     <Match when={itemsQuery.isLoading}>
  *       <div>Loading...</div>
  *     </Match>
- *     <Match when={itemsQuery.isError()}>
+ *     <Match when={itemsQuery.isError}>
  *       <div>Something went wrong</div>
  *     </Match>
- *     <Match when={!itemsQuery.isReady()}>
+ *     <Match when={!itemsQuery.isReady}>
  *       <div>Preparing...</div>
  *     </Match>
  *   </Switch>
  * )
  */
-export declare function useLiveQuery<TContext extends Context>(config: Accessor<LiveQueryCollectionConfig<TContext>>): {
-    state: ReactiveMap<string | number, GetResult<TContext>>;
+export declare function useLiveQuery<TContext extends Context>(config: Accessor<LiveQueryCollectionConfig<TContext>>): Accessor<Array<GetResult<TContext>>> & {
+    /**
+     * @deprecated use function result instead
+     * query.data -> query()
+     */
     data: Array<GetResult<TContext>>;
-    collection: Accessor<Collection<GetResult<TContext>, string | number, {}>>;
-    status: Accessor<CollectionStatus>;
-    isLoading: Accessor<boolean>;
-    isReady: Accessor<boolean>;
-    isIdle: Accessor<boolean>;
-    isError: Accessor<boolean>;
-    isCleanedUp: Accessor<boolean>;
+    state: ReactiveMap<string | number, GetResult<TContext>>;
+    collection: Collection<GetResult<TContext>, string | number, {}>;
+    status: CollectionStatus;
+    isLoading: boolean;
+    isReady: boolean;
+    isIdle: boolean;
+    isError: boolean;
+    isCleanedUp: boolean;
 };
 /**
  * Subscribe to an existing live query collection
  * @param liveQueryCollection - Pre-created live query collection to subscribe to
- * @returns Object with reactive data, state, and status information
+ * @returns Accessor that returns data with Suspense support, with state and status information as properties
  * @example
  * // Using pre-created live query collection
  * const myLiveQuery = createLiveQueryCollection((q) =>
@@ -146,7 +172,7 @@ export declare function useLiveQuery<TContext extends Context>(config: Accessor<
  *
  * // Use collection for mutations
  * const handleToggle = (id) => {
- *   existingQuery.collection().update(id, draft => { draft.completed = !draft.completed })
+ *   existingQuery.collection.update(id, draft => { draft.completed = !draft.completed })
  * }
  *
  * @example
@@ -154,24 +180,28 @@ export declare function useLiveQuery<TContext extends Context>(config: Accessor<
  * const sharedQuery = useLiveQuery(() => sharedCollection)
  *
  * return (
- *  <Switch fallback={<div><For each={sharedQuery.data()}>{(item) => <Item key={item.id} {...item} />}</For></div>}>
- *    <Match when={sharedQuery.isLoading()}>
+ *  <Switch fallback={<div><For each={sharedQuery()}>{(item) => <Item key={item.id} {...item} />}</For></div>}>
+ *    <Match when={sharedQuery.isLoading}>
  *      <div>Loading...</div>
  *    </Match>
- *    <Match when={sharedQuery.isError()}>
+ *    <Match when={sharedQuery.isError}>
  *      <div>Error loading data</div>
  *    </Match>
  *  </Switch>
  * )
  */
-export declare function useLiveQuery<TResult extends object, TKey extends string | number, TUtils extends Record<string, any>>(liveQueryCollection: Accessor<Collection<TResult, TKey, TUtils>>): {
-    state: ReactiveMap<TKey, TResult>;
+export declare function useLiveQuery<TResult extends object, TKey extends string | number, TUtils extends Record<string, any>>(liveQueryCollection: Accessor<Collection<TResult, TKey, TUtils>>): Accessor<Array<TResult>> & {
+    /**
+     * @deprecated use function result instead
+     * query.data -> query()
+     */
     data: Array<TResult>;
-    collection: Accessor<Collection<TResult, TKey, TUtils>>;
-    status: Accessor<CollectionStatus>;
-    isLoading: Accessor<boolean>;
-    isReady: Accessor<boolean>;
-    isIdle: Accessor<boolean>;
-    isError: Accessor<boolean>;
-    isCleanedUp: Accessor<boolean>;
+    state: ReactiveMap<TKey, TResult>;
+    collection: Collection<TResult, TKey, TUtils>;
+    status: CollectionStatus;
+    isLoading: boolean;
+    isReady: boolean;
+    isIdle: boolean;
+    isError: boolean;
+    isCleanedUp: boolean;
 };

package/dist/esm/useLiveQuery.js

@@ -1,4 +1,4 @@
-import { createMemo, createSignal, createComputed, batch, createResource, onCleanup } from "solid-js";
+import { createMemo, createSignal, createResource, batch, createEffect, onCleanup } from "solid-js";
 import { ReactiveMap } from "@solid-primitives/map";
 import { BaseQueryBuilder, createLiveQueryCollection, CollectionImpl } from "@tanstack/db";
 import { createStore, reconcile } from "solid-js/store";
@@ -47,72 +47,121 @@ function useLiveQuery(configOrQueryOrCollection) {
       (prev) => reconcile(Array.from(currentCollection.values()))(prev).filter(Boolean)
     );
   };
-  let currentUnsubscribe = null;
-  createComputed(
-    () => {
-      const currentCollection = collection();
+  const [getDataResource] = createResource(
+    () => ({ currentCollection: collection() }),
+    async ({ currentCollection }) => {
       if (!currentCollection) {
-        setStatus(`disabled`);
-        state.clear();
-        setData([]);
-        if (currentUnsubscribe) {
-          currentUnsubscribe();
-          currentUnsubscribe = null;
-        }
-        return;
+        return [];
       }
       setStatus(currentCollection.status);
-      state.clear();
-      for (const [key, value] of currentCollection.entries()) {
-        state.set(key, value);
+      try {
+        await currentCollection.toArrayWhenReady();
+      } catch (error) {
+        setStatus(`error`);
+        throw error;
       }
-      const subscription = currentCollection.subscribeChanges(
-        (changes) => {
-          batch(() => {
-            for (const change of changes) {
-              switch (change.type) {
-                case `insert`:
-                case `update`:
-                  state.set(change.key, change.value);
-                  break;
-                case `delete`:
-                  state.delete(change.key);
-                  break;
-              }
+      batch(() => {
+        state.clear();
+        for (const [key, value] of currentCollection.entries()) {
+          state.set(key, value);
+        }
+        syncDataFromCollection(currentCollection);
+        setStatus(currentCollection.status);
+      });
+      return data;
+    },
+    {
+      name: `TanstackDBData`,
+      deferStream: false,
+      initialValue: data
+    }
+  );
+  createEffect(() => {
+    const currentCollection = collection();
+    if (!currentCollection) {
+      setStatus(`disabled`);
+      state.clear();
+      setData([]);
+      return;
+    }
+    const subscription = currentCollection.subscribeChanges(
+      (changes) => {
+        batch(() => {
+          for (const change of changes) {
+            switch (change.type) {
+              case `insert`:
+              case `update`:
+                state.set(change.key, change.value);
+                break;
+              case `delete`:
+                state.delete(change.key);
+                break;
             }
-          });
+          }
           syncDataFromCollection(currentCollection);
           setStatus(currentCollection.status);
-        },
-        {
-          includeInitialState: true
-        }
-      );
-      currentUnsubscribe = subscription.unsubscribe.bind(subscription);
-      if (currentCollection.status === `idle`) {
-        createResource(() => currentCollection.preload());
+        });
+      },
+      {
+        // Include initial state to ensure immediate population for pre-created collections
+        includeInitialState: true
+      }
+    );
+    onCleanup(() => {
+      subscription.unsubscribe();
+    });
+  });
+  function getData() {
+    return getDataResource();
+  }
+  Object.defineProperties(getData, {
+    data: {
+      get() {
+        return getData();
       }
-      onCleanup(() => {
-        if (currentUnsubscribe) {
-          currentUnsubscribe();
-          currentUnsubscribe = null;
-        }
-      });
     },
-    void 0,
-    { name: `TanstackDBSyncComputed` }
-  );
-  return {
-    state,
-    data,
-    collection,
-    status,
-    isLoading: () => status() === `loading`,
-    isReady: () => status() === `ready` || status() === `disabled`,
-    isIdle: () => status() === `idle`,
-    isError: () => status() === `error`,
-    isCleanedUp: () => status() === `cleaned-up`
-  };
+    status: {
+      get() {
+        return status();
+      }
+    },
+    collection: {
+      get() {
+        return collection();
+      }
+    },
+    state: {
+      get() {
+        return state;
+      }
+    },
+    isLoading: {
+      get() {
+        return status() === `loading`;
+      }
+    },
+    isReady: {
+      get() {
+        return status() === `ready` || status() === `disabled`;
+      }
+    },
+    isIdle: {
+      get() {
+        return status() === `idle`;
+      }
+    },
+    isError: {
+      get() {
+        return status() === `error`;
+      }
+    },
+    isCleanedUp: {
+      get() {
+        return status() === `cleaned-up`;
+      }
+    }
+  });
+  return getData;
 }
 export {
   useLiveQuery

package/dist/esm/useLiveQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLiveQuery.js","sources":["../../src/useLiveQuery.ts"],"sourcesContent":["import {\n  batch,\n  createComputed,\n  createMemo,\n  createResource,\n  createSignal,\n  onCleanup,\n} from 'solid-js'\nimport { ReactiveMap } from '@solid-primitives/map'\nimport {\n  BaseQueryBuilder,\n  CollectionImpl,\n  createLiveQueryCollection,\n} from '@tanstack/db'\nimport { createStore, reconcile } from 'solid-js/store'\nimport type { Accessor } from 'solid-js'\nimport type {\n  ChangeMessage,\n  Collection,\n  CollectionStatus,\n  Context,\n  GetResult,\n  InitialQueryBuilder,\n  LiveQueryCollectionConfig,\n  QueryBuilder,\n} from '@tanstack/db'\n\n/**\n * Create a live query using a query function\n * @param queryFn - Query function that defines what data to fetch\n * @returns Object with reactive data, state, and status information\n * @example\n * // Basic query with object syntax\n * const todosQuery = useLiveQuery((q) =>\n *   q.from({ todos: todosCollection })\n *    .where(({ todos }) => eq(todos.completed, false))\n *    .select(({ todos }) => ({ id: todos.id, text: todos.text }))\n * )\n *\n * @example\n * // With dependencies that trigger re-execution\n * const todosQuery = useLiveQuery(\n *   (q) => q.from({ todos: todosCollection })\n *          .where(({ todos }) => gt(todos.priority, minPriority())),\n * )\n *\n * @example\n * // Join pattern\n * const personIssues = useLiveQuery((q) =>\n *   q.from({ issues: issueCollection })\n *    .join({ persons: personCollection }, ({ issues, persons }) =>\n *      eq(issues.userId, persons.id)\n *    )\n *    .select(({ issues, persons }) => ({\n *      id: issues.id,\n *      title: issues.title,\n *      userName: persons.name\n *    }))\n * )\n *\n * @example\n * // Handle loading and error states\n * const todosQuery = useLiveQuery((q) =>\n *   q.from({ todos: todoCollection })\n * )\n *\n * return (\n *   <Switch>\n *     <Match when={todosQuery.isLoading()}>\n *       <div>Loading...</div>\n *     </Match>\n *     <Match when={todosQuery.isError()}>\n *       <div>Error: {todosQuery.status()}</div>\n *     </Match>\n *     <Match when={todosQuery.isReady()}>\n *       <For each={todosQuery.data()}>\n *         {(todo) => <li key={todo.id}>{todo.text}</li>}\n *       </For>\n *     </Match>\n *   </Switch>\n * )\n */\n// Overload 1: Accept query function that always returns QueryBuilder\nexport function useLiveQuery<TContext extends Context>(\n  queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext>,\n): {\n  state: ReactiveMap<string | number, GetResult<TContext>>\n  data: Array<GetResult<TContext>>\n  collection: Accessor<Collection<GetResult<TContext>, string | number, {}>>\n  status: Accessor<CollectionStatus>\n  isLoading: Accessor<boolean>\n  isReady: Accessor<boolean>\n  isIdle: Accessor<boolean>\n  isError: Accessor<boolean>\n  isCleanedUp: Accessor<boolean>\n}\n\n// Overload 1b: Accept query function that can return undefined/null\nexport function useLiveQuery<TContext extends Context>(\n  queryFn: (\n    q: InitialQueryBuilder,\n  ) => QueryBuilder<TContext> | undefined | null,\n): {\n  state: ReactiveMap<string | number, GetResult<TContext>>\n  data: Array<GetResult<TContext>>\n  collection: Accessor<Collection<\n    GetResult<TContext>,\n    string | number,\n    {}\n  > | null>\n  status: Accessor<CollectionStatus | `disabled`>\n  isLoading: Accessor<boolean>\n  isReady: Accessor<boolean>\n  isIdle: Accessor<boolean>\n  isError: Accessor<boolean>\n  isCleanedUp: Accessor<boolean>\n}\n\n/**\n * Create a live query using configuration object\n * @param config - Configuration object with query and options\n * @returns Object with reactive data, state, and status information\n * @example\n * // Basic config object usage\n * const todosQuery = useLiveQuery(() => ({\n *   query: (q) => q.from({ todos: todosCollection }),\n *   gcTime: 60000\n * }))\n *\n * @example\n * // With query builder and options\n * const queryBuilder = new Query()\n *   .from({ persons: collection })\n *   .where(({ persons }) => gt(persons.age, 30))\n *   .select(({ persons }) => ({ id: persons.id, name: persons.name }))\n *\n * const personsQuery = useLiveQuery(() => ({ query: queryBuilder }))\n *\n * @example\n * // Handle all states uniformly\n * const itemsQuery = useLiveQuery(() => ({\n *   query: (q) => q.from({ items: itemCollection })\n * }))\n *\n * return (\n *   <Switch fallback={<div>{itemsQuery.data.length} items loaded</div>}>\n *     <Match when={itemsQuery.isLoading()}>\n *       <div>Loading...</div>\n *     </Match>\n *     <Match when={itemsQuery.isError()}>\n *       <div>Something went wrong</div>\n *     </Match>\n *     <Match when={!itemsQuery.isReady()}>\n *       <div>Preparing...</div>\n *     </Match>\n *   </Switch>\n * )\n */\n// Overload 2: Accept config object\nexport function useLiveQuery<TContext extends Context>(\n  config: Accessor<LiveQueryCollectionConfig<TContext>>,\n): {\n  state: ReactiveMap<string | number, GetResult<TContext>>\n  data: Array<GetResult<TContext>>\n  collection: Accessor<Collection<GetResult<TContext>, string | number, {}>>\n  status: Accessor<CollectionStatus>\n  isLoading: Accessor<boolean>\n  isReady: Accessor<boolean>\n  isIdle: Accessor<boolean>\n  isError: Accessor<boolean>\n  isCleanedUp: Accessor<boolean>\n}\n\n/**\n * Subscribe to an existing live query collection\n * @param liveQueryCollection - Pre-created live query collection to subscribe to\n * @returns Object with reactive data, state, and status information\n * @example\n * // Using pre-created live query collection\n * const myLiveQuery = createLiveQueryCollection((q) =>\n *   q.from({ todos: todosCollection }).where(({ todos }) => eq(todos.active, true))\n * )\n * const todosQuery = useLiveQuery(() => myLiveQuery)\n *\n * @example\n * // Access collection methods directly\n * const existingQuery = useLiveQuery(() => existingCollection)\n *\n * // Use collection for mutations\n * const handleToggle = (id) => {\n *   existingQuery.collection().update(id, draft => { draft.completed = !draft.completed })\n * }\n *\n * @example\n * // Handle states consistently\n * const sharedQuery = useLiveQuery(() => sharedCollection)\n *\n * return (\n *  <Switch fallback={<div><For each={sharedQuery.data()}>{(item) => <Item key={item.id} {...item} />}</For></div>}>\n *    <Match when={sharedQuery.isLoading()}>\n *      <div>Loading...</div>\n *    </Match>\n *    <Match when={sharedQuery.isError()}>\n *      <div>Error loading data</div>\n *    </Match>\n *  </Switch>\n * )\n */\n// Overload 3: Accept pre-created live query collection\nexport function useLiveQuery<\n  TResult extends object,\n  TKey extends string | number,\n  TUtils extends Record<string, any>,\n>(\n  liveQueryCollection: Accessor<Collection<TResult, TKey, TUtils>>,\n): {\n  state: ReactiveMap<TKey, TResult>\n  data: Array<TResult>\n  collection: Accessor<Collection<TResult, TKey, TUtils>>\n  status: Accessor<CollectionStatus>\n  isLoading: Accessor<boolean>\n  isReady: Accessor<boolean>\n  isIdle: Accessor<boolean>\n  isError: Accessor<boolean>\n  isCleanedUp: Accessor<boolean>\n}\n\n// Implementation - use function overloads to infer the actual collection type\nexport function useLiveQuery(\n  configOrQueryOrCollection: (queryFn?: any) => any,\n) {\n  const collection = createMemo(\n    () => {\n      if (configOrQueryOrCollection.length === 1) {\n        // This is a query function - check if it returns null/undefined\n        const queryBuilder = new BaseQueryBuilder() as InitialQueryBuilder\n        const result = configOrQueryOrCollection(queryBuilder)\n\n        if (result === undefined || result === null) {\n          // Disabled query - return null\n          return null\n        }\n\n        return createLiveQueryCollection({\n          query: configOrQueryOrCollection,\n          startSync: true,\n        })\n      }\n\n      const innerCollection = configOrQueryOrCollection()\n\n      if (innerCollection === undefined || innerCollection === null) {\n        // Disabled query - return null\n        return null\n      }\n\n      if (innerCollection instanceof CollectionImpl) {\n        innerCollection.startSyncImmediate()\n        return innerCollection as Collection\n      }\n\n      return createLiveQueryCollection({\n        ...innerCollection,\n        startSync: true,\n      })\n    },\n    undefined,\n    { name: `TanstackDBCollectionMemo` },\n  )\n\n  // Reactive state that gets updated granularly through change events\n  const state = new ReactiveMap<string | number, any>()\n\n  // Reactive data array that maintains sorted order\n  const [data, setData] = createStore<Array<any>>([], {\n    name: `TanstackDBData`,\n  })\n\n  // Track collection status reactively\n  const [status, setStatus] = createSignal(\n    collection() ? collection()!.status : (`disabled` as const),\n    {\n      name: `TanstackDBStatus`,\n    },\n  )\n\n  // Helper to sync data array from collection in correct order\n  const syncDataFromCollection = (\n    currentCollection: Collection<any, any, any>,\n  ) => {\n    setData((prev) =>\n      reconcile(Array.from(currentCollection.values()))(prev).filter(Boolean),\n    )\n  }\n\n  // Track current unsubscribe function\n  let currentUnsubscribe: (() => void) | null = null\n\n  createComputed(\n    () => {\n      const currentCollection = collection()\n\n      // Handle null collection (disabled query)\n      if (!currentCollection) {\n        setStatus(`disabled` as const)\n        state.clear()\n        setData([])\n        if (currentUnsubscribe) {\n          currentUnsubscribe()\n          currentUnsubscribe = null\n        }\n        return\n      }\n\n      // Update status ref whenever the effect runs\n      setStatus(currentCollection.status)\n\n      // Initialize state with current collection data\n      state.clear()\n      for (const [key, value] of currentCollection.entries()) {\n        state.set(key, value)\n      }\n\n      // Subscribe to collection changes with granular updates\n      const subscription = currentCollection.subscribeChanges(\n        (changes: Array<ChangeMessage<any>>) => {\n          // Apply each change individually to the reactive state\n          batch(() => {\n            for (const change of changes) {\n              switch (change.type) {\n                case `insert`:\n                case `update`:\n                  state.set(change.key, change.value)\n                  break\n                case `delete`:\n                  state.delete(change.key)\n                  break\n              }\n            }\n          })\n\n          // Update the data array to maintain sorted order\n          syncDataFromCollection(currentCollection)\n\n          // Update status ref on every change\n          setStatus(currentCollection.status)\n        },\n        {\n          includeInitialState: true,\n        },\n      )\n\n      currentUnsubscribe = subscription.unsubscribe.bind(subscription)\n\n      // Preload collection data if not already started\n      if (currentCollection.status === `idle`) {\n        createResource(() => currentCollection.preload())\n      }\n\n      // Cleanup when computed is invalidated\n      onCleanup(() => {\n        if (currentUnsubscribe) {\n          currentUnsubscribe()\n          currentUnsubscribe = null\n        }\n      })\n    },\n    undefined,\n    { name: `TanstackDBSyncComputed` },\n  )\n\n  return {\n    state,\n    data,\n    collection,\n    status,\n    isLoading: () => status() === `loading`,\n    isReady: () => status() === `ready` || status() === `disabled`,\n    isIdle: () => status() === `idle`,\n    isError: () => status() === `error`,\n    isCleanedUp: () => status() === `cleaned-up`,\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useLiveQuery.js","sources":["../../src/useLiveQuery.ts"],"sourcesContent":["import {\n  batch,\n  createEffect,\n  createMemo,\n  createResource,\n  createSignal,\n  onCleanup,\n} from 'solid-js'\nimport { ReactiveMap } from '@solid-primitives/map'\nimport {\n  BaseQueryBuilder,\n  CollectionImpl,\n  createLiveQueryCollection,\n} from '@tanstack/db'\nimport { createStore, reconcile } from 'solid-js/store'\nimport type { Accessor } from 'solid-js'\nimport type {\n  ChangeMessage,\n  Collection,\n  CollectionStatus,\n  Context,\n  GetResult,\n  InitialQueryBuilder,\n  LiveQueryCollectionConfig,\n  QueryBuilder,\n} from '@tanstack/db'\n\n/**\n * Create a live query using a query function\n * @param queryFn - Query function that defines what data to fetch\n * @returns Accessor that returns data with Suspense support, with state and status information as properties\n * @example\n * // Basic query with object syntax\n * const todosQuery = useLiveQuery((q) =>\n *   q.from({ todos: todosCollection })\n *    .where(({ todos }) => eq(todos.completed, false))\n *    .select(({ todos }) => ({ id: todos.id, text: todos.text }))\n * )\n *\n * @example\n * // With dependencies that trigger re-execution\n * const todosQuery = useLiveQuery(\n *   (q) => q.from({ todos: todosCollection })\n *          .where(({ todos }) => gt(todos.priority, minPriority())),\n * )\n *\n * @example\n * // Join pattern\n * const personIssues = useLiveQuery((q) =>\n *   q.from({ issues: issueCollection })\n *    .join({ persons: personCollection }, ({ issues, persons }) =>\n *      eq(issues.userId, persons.id)\n *    )\n *    .select(({ issues, persons }) => ({\n *      id: issues.id,\n *      title: issues.title,\n *      userName: persons.name\n *    }))\n * )\n *\n * @example\n * // Handle loading and error states\n * const todosQuery = useLiveQuery((q) =>\n *   q.from({ todos: todoCollection })\n * )\n *\n * return (\n *   <Switch>\n *     <Match when={todosQuery.isLoading}>\n *       <div>Loading...</div>\n *     </Match>\n *     <Match when={todosQuery.isError}>\n *       <div>Error: {todosQuery.status}</div>\n *     </Match>\n *     <Match when={todosQuery.isReady}>\n *       <For each={todosQuery()}>\n *         {(todo) => <li key={todo.id}>{todo.text}</li>}\n *       </For>\n *     </Match>\n *   </Switch>\n * )\n *\n * @example\n * // Use Suspense boundaries\n * const todosQuery = useLiveQuery((q) =>\n *   q.from({ todos: todoCollection })\n * )\n *\n * return (\n *   <Suspense fallback={<div>Loading...</div>}>\n *     <For each={todosQuery()}>\n *       {(todo) => <li key={todo.id}>{todo.text}</li>}\n *     </For>\n *   </Suspense>\n * )\n */\n// Overload 1: Accept query function that always returns QueryBuilder\nexport function useLiveQuery<TContext extends Context>(\n  queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext>,\n): Accessor<Array<GetResult<TContext>>> & {\n  /**\n   * @deprecated use function result instead\n   * query.data -> query()\n   */\n  data: Array<GetResult<TContext>>\n  state: ReactiveMap<string | number, GetResult<TContext>>\n  collection: Collection<GetResult<TContext>, string | number, {}>\n  status: CollectionStatus\n  isLoading: boolean\n  isReady: boolean\n  isIdle: boolean\n  isError: boolean\n  isCleanedUp: boolean\n}\n\n// Overload 1b: Accept query function that can return undefined/null\nexport function useLiveQuery<TContext extends Context>(\n  queryFn: (\n    q: InitialQueryBuilder,\n  ) => QueryBuilder<TContext> | undefined | null,\n): Accessor<Array<GetResult<TContext>>> & {\n  /**\n   * @deprecated use function result instead\n   * query.data -> query()\n   */\n  data: Array<GetResult<TContext>>\n  state: ReactiveMap<string | number, GetResult<TContext>>\n  collection: Collection<GetResult<TContext>, string | number, {}> | null\n  status: CollectionStatus | `disabled`\n  isLoading: boolean\n  isReady: boolean\n  isIdle: boolean\n  isError: boolean\n  isCleanedUp: boolean\n}\n\n/**\n * Create a live query using configuration object\n * @param config - Configuration object with query and options\n * @returns Accessor that returns data with Suspense support, with state and status information as properties\n * @example\n * // Basic config object usage\n * const todosQuery = useLiveQuery(() => ({\n *   query: (q) => q.from({ todos: todosCollection }),\n *   gcTime: 60000\n * }))\n *\n * @example\n * // With query builder and options\n * const queryBuilder = new Query()\n *   .from({ persons: collection })\n *   .where(({ persons }) => gt(persons.age, 30))\n *   .select(({ persons }) => ({ id: persons.id, name: persons.name }))\n *\n * const personsQuery = useLiveQuery(() => ({ query: queryBuilder }))\n *\n * @example\n * // Handle all states uniformly\n * const itemsQuery = useLiveQuery(() => ({\n *   query: (q) => q.from({ items: itemCollection })\n * }))\n *\n * return (\n *   <Switch fallback={<div>{itemsQuery().length} items loaded</div>}>\n *     <Match when={itemsQuery.isLoading}>\n *       <div>Loading...</div>\n *     </Match>\n *     <Match when={itemsQuery.isError}>\n *       <div>Something went wrong</div>\n *     </Match>\n *     <Match when={!itemsQuery.isReady}>\n *       <div>Preparing...</div>\n *     </Match>\n *   </Switch>\n * )\n */\n// Overload 2: Accept config object\nexport function useLiveQuery<TContext extends Context>(\n  config: Accessor<LiveQueryCollectionConfig<TContext>>,\n): Accessor<Array<GetResult<TContext>>> & {\n  /**\n   * @deprecated use function result instead\n   * query.data -> query()\n   */\n  data: Array<GetResult<TContext>>\n  state: ReactiveMap<string | number, GetResult<TContext>>\n  collection: Collection<GetResult<TContext>, string | number, {}>\n  status: CollectionStatus\n  isLoading: boolean\n  isReady: boolean\n  isIdle: boolean\n  isError: boolean\n  isCleanedUp: boolean\n}\n\n/**\n * Subscribe to an existing live query collection\n * @param liveQueryCollection - Pre-created live query collection to subscribe to\n * @returns Accessor that returns data with Suspense support, with state and status information as properties\n * @example\n * // Using pre-created live query collection\n * const myLiveQuery = createLiveQueryCollection((q) =>\n *   q.from({ todos: todosCollection }).where(({ todos }) => eq(todos.active, true))\n * )\n * const todosQuery = useLiveQuery(() => myLiveQuery)\n *\n * @example\n * // Access collection methods directly\n * const existingQuery = useLiveQuery(() => existingCollection)\n *\n * // Use collection for mutations\n * const handleToggle = (id) => {\n *   existingQuery.collection.update(id, draft => { draft.completed = !draft.completed })\n * }\n *\n * @example\n * // Handle states consistently\n * const sharedQuery = useLiveQuery(() => sharedCollection)\n *\n * return (\n *  <Switch fallback={<div><For each={sharedQuery()}>{(item) => <Item key={item.id} {...item} />}</For></div>}>\n *    <Match when={sharedQuery.isLoading}>\n *      <div>Loading...</div>\n *    </Match>\n *    <Match when={sharedQuery.isError}>\n *      <div>Error loading data</div>\n *    </Match>\n *  </Switch>\n * )\n */\n// Overload 3: Accept pre-created live query collection\nexport function useLiveQuery<\n  TResult extends object,\n  TKey extends string | number,\n  TUtils extends Record<string, any>,\n>(\n  liveQueryCollection: Accessor<Collection<TResult, TKey, TUtils>>,\n): Accessor<Array<TResult>> & {\n  /**\n   * @deprecated use function result instead\n   * query.data -> query()\n   */\n  data: Array<TResult>\n  state: ReactiveMap<TKey, TResult>\n  collection: Collection<TResult, TKey, TUtils>\n  status: CollectionStatus\n  isLoading: boolean\n  isReady: boolean\n  isIdle: boolean\n  isError: boolean\n  isCleanedUp: boolean\n}\n\n// Implementation - use function overloads to infer the actual collection type\nexport function useLiveQuery(\n  configOrQueryOrCollection: (queryFn?: any) => any,\n) {\n  const collection = createMemo(\n    () => {\n      if (configOrQueryOrCollection.length === 1) {\n        // This is a query function - check if it returns null/undefined\n        const queryBuilder = new BaseQueryBuilder() as InitialQueryBuilder\n        const result = configOrQueryOrCollection(queryBuilder)\n\n        if (result === undefined || result === null) {\n          // Disabled query - return null\n          return null\n        }\n\n        return createLiveQueryCollection({\n          query: configOrQueryOrCollection,\n          startSync: true,\n        })\n      }\n\n      const innerCollection = configOrQueryOrCollection()\n\n      if (innerCollection === undefined || innerCollection === null) {\n        // Disabled query - return null\n        return null\n      }\n\n      if (innerCollection instanceof CollectionImpl) {\n        innerCollection.startSyncImmediate()\n        return innerCollection as Collection\n      }\n\n      return createLiveQueryCollection({\n        ...innerCollection,\n        startSync: true,\n      })\n    },\n    undefined,\n    { name: `TanstackDBCollectionMemo` },\n  )\n\n  // Reactive state that gets updated granularly through change events\n  const state = new ReactiveMap<string | number, any>()\n\n  // Reactive data array that maintains sorted order\n  const [data, setData] = createStore<Array<any>>([], {\n    name: `TanstackDBData`,\n  })\n\n  // Track collection status reactively\n  const [status, setStatus] = createSignal(\n    collection() ? collection()!.status : (`disabled` as const),\n    {\n      name: `TanstackDBStatus`,\n    },\n  )\n\n  // Helper to sync data array from collection in correct order\n  const syncDataFromCollection = (\n    currentCollection: Collection<any, any, any>,\n  ) => {\n    setData((prev) =>\n      reconcile(Array.from(currentCollection.values()))(prev).filter(Boolean),\n    )\n  }\n\n  const [getDataResource] = createResource(\n    () => ({ currentCollection: collection() }),\n    async ({ currentCollection }) => {\n      if (!currentCollection) {\n        return []\n      }\n      setStatus(currentCollection.status)\n      try {\n        await currentCollection.toArrayWhenReady()\n      } catch (error) {\n        setStatus(`error`)\n        throw error\n      }\n      // Initialize state with current collection data\n      batch(() => {\n        state.clear()\n        for (const [key, value] of currentCollection.entries()) {\n          state.set(key, value)\n        }\n        syncDataFromCollection(currentCollection)\n        setStatus(currentCollection.status)\n      })\n      return data\n    },\n    {\n      name: `TanstackDBData`,\n      deferStream: false,\n      initialValue: data,\n    },\n  )\n\n  createEffect(() => {\n    const currentCollection = collection()\n    if (!currentCollection) {\n      setStatus(`disabled` as const)\n      state.clear()\n      setData([])\n      return\n    }\n    const subscription = currentCollection.subscribeChanges(\n      (changes: Array<ChangeMessage<any>>) => {\n        // Apply each change individually to the reactive state\n        batch(() => {\n          for (const change of changes) {\n            switch (change.type) {\n              case `insert`:\n              case `update`:\n                state.set(change.key, change.value)\n                break\n              case `delete`:\n                state.delete(change.key)\n                break\n            }\n          }\n\n          syncDataFromCollection(currentCollection)\n\n          // Update status ref on every change\n          setStatus(currentCollection.status)\n        })\n      },\n      {\n        // Include initial state to ensure immediate population for pre-created collections\n        includeInitialState: true,\n      },\n    )\n\n    onCleanup(() => {\n      subscription.unsubscribe()\n    })\n  })\n\n  // We have to remove getters from the resource function so we wrap it\n  function getData() {\n    return getDataResource()\n  }\n\n  Object.defineProperties(getData, {\n    data: {\n      get() {\n        return getData()\n      },\n    },\n    status: {\n      get() {\n        return status()\n      },\n    },\n    collection: {\n      get() {\n        return collection()\n      },\n    },\n    state: {\n      get() {\n        return state\n      },\n    },\n    isLoading: {\n      get() {\n        return status() === `loading`\n      },\n    },\n    isReady: {\n      get() {\n        return status() === `ready` || status() === `disabled`\n      },\n    },\n    isIdle: {\n      get() {\n        return status() === `idle`\n      },\n    },\n    isError: {\n      get() {\n        return status() === `error`\n      },\n    },\n    isCleanedUp: {\n      get() {\n        return status() === `cleaned-up`\n      },\n    },\n  })\n  return getData\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-db",
-  "version": "0.1.61",
+  "version": "0.2.0",
   "description": "Solid integration for @tanstack/db",
   "author": "Kyle Mathews",
   "license": "MIT",
@@ -35,7 +35,7 @@
   ],
   "dependencies": {
     "@solid-primitives/map": "^0.7.2",
-    "@tanstack/db": "0.5.18"
+    "@tanstack/db": "0.5.20"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.0"

package/src/useLiveQuery.ts

@@ -1,6 +1,6 @@
 import {
   batch,
-  createComputed,
+  createEffect,
   createMemo,
   createResource,
   createSignal,
@@ -28,7 +28,7 @@ import type {
 /**
  * Create a live query using a query function
  * @param queryFn - Query function that defines what data to fetch
- * @returns Object with reactive data, state, and status information
+ * @returns Accessor that returns data with Suspense support, with state and status information as properties
  * @example
  * // Basic query with object syntax
  * const todosQuery = useLiveQuery((q) =>
@@ -66,33 +66,51 @@ import type {
  *
  * return (
  *   <Switch>
- *     <Match when={todosQuery.isLoading()}>
+ *     <Match when={todosQuery.isLoading}>
  *       <div>Loading...</div>
  *     </Match>
- *     <Match when={todosQuery.isError()}>
- *       <div>Error: {todosQuery.status()}</div>
+ *     <Match when={todosQuery.isError}>
+ *       <div>Error: {todosQuery.status}</div>
  *     </Match>
- *     <Match when={todosQuery.isReady()}>
- *       <For each={todosQuery.data()}>
+ *     <Match when={todosQuery.isReady}>
+ *       <For each={todosQuery()}>
  *         {(todo) => <li key={todo.id}>{todo.text}</li>}
  *       </For>
  *     </Match>
  *   </Switch>
  * )
+ *
+ * @example
+ * // Use Suspense boundaries
+ * const todosQuery = useLiveQuery((q) =>
+ *   q.from({ todos: todoCollection })
+ * )
+ *
+ * return (
+ *   <Suspense fallback={<div>Loading...</div>}>
+ *     <For each={todosQuery()}>
+ *       {(todo) => <li key={todo.id}>{todo.text}</li>}
+ *     </For>
+ *   </Suspense>
+ * )
  */
 // Overload 1: Accept query function that always returns QueryBuilder
 export function useLiveQuery<TContext extends Context>(
   queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext>,
-): {
-  state: ReactiveMap<string | number, GetResult<TContext>>
+): Accessor<Array<GetResult<TContext>>> & {
+  /**
+   * @deprecated use function result instead
+   * query.data -> query()
+   */
   data: Array<GetResult<TContext>>
-  collection: Accessor<Collection<GetResult<TContext>, string | number, {}>>
-  status: Accessor<CollectionStatus>
-  isLoading: Accessor<boolean>
-  isReady: Accessor<boolean>
-  isIdle: Accessor<boolean>
-  isError: Accessor<boolean>
-  isCleanedUp: Accessor<boolean>
+  state: ReactiveMap<string | number, GetResult<TContext>>
+  collection: Collection<GetResult<TContext>, string | number, {}>
+  status: CollectionStatus
+  isLoading: boolean
+  isReady: boolean
+  isIdle: boolean
+  isError: boolean
+  isCleanedUp: boolean
 }
 
 // Overload 1b: Accept query function that can return undefined/null
@@ -100,26 +118,26 @@ export function useLiveQuery<TContext extends Context>(
   queryFn: (
     q: InitialQueryBuilder,
   ) => QueryBuilder<TContext> | undefined | null,
-): {
-  state: ReactiveMap<string | number, GetResult<TContext>>
+): Accessor<Array<GetResult<TContext>>> & {
+  /**
+   * @deprecated use function result instead
+   * query.data -> query()
+   */
   data: Array<GetResult<TContext>>
-  collection: Accessor<Collection<
-    GetResult<TContext>,
-    string | number,
-    {}
-  > | null>
-  status: Accessor<CollectionStatus | `disabled`>
-  isLoading: Accessor<boolean>
-  isReady: Accessor<boolean>
-  isIdle: Accessor<boolean>
-  isError: Accessor<boolean>
-  isCleanedUp: Accessor<boolean>
+  state: ReactiveMap<string | number, GetResult<TContext>>
+  collection: Collection<GetResult<TContext>, string | number, {}> | null
+  status: CollectionStatus | `disabled`
+  isLoading: boolean
+  isReady: boolean
+  isIdle: boolean
+  isError: boolean
+  isCleanedUp: boolean
 }
 
 /**
  * Create a live query using configuration object
  * @param config - Configuration object with query and options
- * @returns Object with reactive data, state, and status information
+ * @returns Accessor that returns data with Suspense support, with state and status information as properties
  * @example
  * // Basic config object usage
  * const todosQuery = useLiveQuery(() => ({
@@ -143,14 +161,14 @@ export function useLiveQuery<TContext extends Context>(
  * }))
  *
  * return (
- *   <Switch fallback={<div>{itemsQuery.data.length} items loaded</div>}>
- *     <Match when={itemsQuery.isLoading()}>
+ *   <Switch fallback={<div>{itemsQuery().length} items loaded</div>}>
+ *     <Match when={itemsQuery.isLoading}>
  *       <div>Loading...</div>
  *     </Match>
- *     <Match when={itemsQuery.isError()}>
+ *     <Match when={itemsQuery.isError}>
  *       <div>Something went wrong</div>
  *     </Match>
- *     <Match when={!itemsQuery.isReady()}>
+ *     <Match when={!itemsQuery.isReady}>
  *       <div>Preparing...</div>
  *     </Match>
  *   </Switch>
@@ -159,22 +177,26 @@ export function useLiveQuery<TContext extends Context>(
 // Overload 2: Accept config object
 export function useLiveQuery<TContext extends Context>(
   config: Accessor<LiveQueryCollectionConfig<TContext>>,
-): {
-  state: ReactiveMap<string | number, GetResult<TContext>>
+): Accessor<Array<GetResult<TContext>>> & {
+  /**
+   * @deprecated use function result instead
+   * query.data -> query()
+   */
   data: Array<GetResult<TContext>>
-  collection: Accessor<Collection<GetResult<TContext>, string | number, {}>>
-  status: Accessor<CollectionStatus>
-  isLoading: Accessor<boolean>
-  isReady: Accessor<boolean>
-  isIdle: Accessor<boolean>
-  isError: Accessor<boolean>
-  isCleanedUp: Accessor<boolean>
+  state: ReactiveMap<string | number, GetResult<TContext>>
+  collection: Collection<GetResult<TContext>, string | number, {}>
+  status: CollectionStatus
+  isLoading: boolean
+  isReady: boolean
+  isIdle: boolean
+  isError: boolean
+  isCleanedUp: boolean
 }
 
 /**
  * Subscribe to an existing live query collection
  * @param liveQueryCollection - Pre-created live query collection to subscribe to
- * @returns Object with reactive data, state, and status information
+ * @returns Accessor that returns data with Suspense support, with state and status information as properties
  * @example
  * // Using pre-created live query collection
  * const myLiveQuery = createLiveQueryCollection((q) =>
@@ -188,7 +210,7 @@ export function useLiveQuery<TContext extends Context>(
  *
  * // Use collection for mutations
  * const handleToggle = (id) => {
- *   existingQuery.collection().update(id, draft => { draft.completed = !draft.completed })
+ *   existingQuery.collection.update(id, draft => { draft.completed = !draft.completed })
  * }
  *
  * @example
@@ -196,11 +218,11 @@ export function useLiveQuery<TContext extends Context>(
  * const sharedQuery = useLiveQuery(() => sharedCollection)
  *
  * return (
- *  <Switch fallback={<div><For each={sharedQuery.data()}>{(item) => <Item key={item.id} {...item} />}</For></div>}>
- *    <Match when={sharedQuery.isLoading()}>
+ *  <Switch fallback={<div><For each={sharedQuery()}>{(item) => <Item key={item.id} {...item} />}</For></div>}>
+ *    <Match when={sharedQuery.isLoading}>
  *      <div>Loading...</div>
  *    </Match>
- *    <Match when={sharedQuery.isError()}>
+ *    <Match when={sharedQuery.isError}>
  *      <div>Error loading data</div>
  *    </Match>
  *  </Switch>
@@ -213,16 +235,20 @@ export function useLiveQuery<
   TUtils extends Record<string, any>,
 >(
   liveQueryCollection: Accessor<Collection<TResult, TKey, TUtils>>,
-): {
-  state: ReactiveMap<TKey, TResult>
+): Accessor<Array<TResult>> & {
+  /**
+   * @deprecated use function result instead
+   * query.data -> query()
+   */
   data: Array<TResult>
-  collection: Accessor<Collection<TResult, TKey, TUtils>>
-  status: Accessor<CollectionStatus>
-  isLoading: Accessor<boolean>
-  isReady: Accessor<boolean>
-  isIdle: Accessor<boolean>
-  isError: Accessor<boolean>
-  isCleanedUp: Accessor<boolean>
+  state: ReactiveMap<TKey, TResult>
+  collection: Collection<TResult, TKey, TUtils>
+  status: CollectionStatus
+  isLoading: boolean
+  isReady: boolean
+  isIdle: boolean
+  isError: boolean
+  isCleanedUp: boolean
 }
 
 // Implementation - use function overloads to infer the actual collection type
@@ -293,91 +319,129 @@ export function useLiveQuery(
     )
   }
 
-  // Track current unsubscribe function
-  let currentUnsubscribe: (() => void) | null = null
-
-  createComputed(
-    () => {
-      const currentCollection = collection()
-
-      // Handle null collection (disabled query)
+  const [getDataResource] = createResource(
+    () => ({ currentCollection: collection() }),
+    async ({ currentCollection }) => {
       if (!currentCollection) {
-        setStatus(`disabled` as const)
-        state.clear()
-        setData([])
-        if (currentUnsubscribe) {
-          currentUnsubscribe()
-          currentUnsubscribe = null
-        }
-        return
+        return []
       }
-
-      // Update status ref whenever the effect runs
       setStatus(currentCollection.status)
-
-      // Initialize state with current collection data
-      state.clear()
-      for (const [key, value] of currentCollection.entries()) {
-        state.set(key, value)
+      try {
+        await currentCollection.toArrayWhenReady()
+      } catch (error) {
+        setStatus(`error`)
+        throw error
       }
+      // Initialize state with current collection data
+      batch(() => {
+        state.clear()
+        for (const [key, value] of currentCollection.entries()) {
+          state.set(key, value)
+        }
+        syncDataFromCollection(currentCollection)
+        setStatus(currentCollection.status)
+      })
+      return data
+    },
+    {
+      name: `TanstackDBData`,
+      deferStream: false,
+      initialValue: data,
+    },
+  )
 
-      // Subscribe to collection changes with granular updates
-      const subscription = currentCollection.subscribeChanges(
-        (changes: Array<ChangeMessage<any>>) => {
-          // Apply each change individually to the reactive state
-          batch(() => {
-            for (const change of changes) {
-              switch (change.type) {
-                case `insert`:
-                case `update`:
-                  state.set(change.key, change.value)
-                  break
-                case `delete`:
-                  state.delete(change.key)
-                  break
-              }
+  createEffect(() => {
+    const currentCollection = collection()
+    if (!currentCollection) {
+      setStatus(`disabled` as const)
+      state.clear()
+      setData([])
+      return
+    }
+    const subscription = currentCollection.subscribeChanges(
+      (changes: Array<ChangeMessage<any>>) => {
+        // Apply each change individually to the reactive state
+        batch(() => {
+          for (const change of changes) {
+            switch (change.type) {
+              case `insert`:
+              case `update`:
+                state.set(change.key, change.value)
+                break
+              case `delete`:
+                state.delete(change.key)
+                break
             }
-          })
+          }
 
-          // Update the data array to maintain sorted order
           syncDataFromCollection(currentCollection)
 
           // Update status ref on every change
           setStatus(currentCollection.status)
-        },
-        {
-          includeInitialState: true,
-        },
-      )
+        })
+      },
+      {
+        // Include initial state to ensure immediate population for pre-created collections
+        includeInitialState: true,
+      },
+    )
 
-      currentUnsubscribe = subscription.unsubscribe.bind(subscription)
+    onCleanup(() => {
+      subscription.unsubscribe()
+    })
+  })
 
-      // Preload collection data if not already started
-      if (currentCollection.status === `idle`) {
-        createResource(() => currentCollection.preload())
-      }
+  // We have to remove getters from the resource function so we wrap it
+  function getData() {
+    return getDataResource()
+  }
 
-      // Cleanup when computed is invalidated
-      onCleanup(() => {
-        if (currentUnsubscribe) {
-          currentUnsubscribe()
-          currentUnsubscribe = null
-        }
-      })
+  Object.defineProperties(getData, {
+    data: {
+      get() {
+        return getData()
+      },
     },
-    undefined,
-    { name: `TanstackDBSyncComputed` },
-  )
-
-  return {
-    state,
-    data,
-    collection,
-    status,
-    isLoading: () => status() === `loading`,
-    isReady: () => status() === `ready` || status() === `disabled`,
-    isIdle: () => status() === `idle`,
-    isError: () => status() === `error`,
-    isCleanedUp: () => status() === `cleaned-up`,
-  }
+    status: {
+      get() {
+        return status()
+      },
+    },
+    collection: {
+      get() {
+        return collection()
+      },
+    },
+    state: {
+      get() {
+        return state
+      },
+    },
+    isLoading: {
+      get() {
+        return status() === `loading`
+      },
+    },
+    isReady: {
+      get() {
+        return status() === `ready` || status() === `disabled`
+      },
+    },
+    isIdle: {
+      get() {
+        return status() === `idle`
+      },
+    },
+    isError: {
+      get() {
+        return status() === `error`
+      },
+    },
+    isCleanedUp: {
+      get() {
+        return status() === `cleaned-up`
+      },
+    },
+  })
+  return getData
 }