Collections must have a getId function & use an id for update/delete operators (#134)

Author: KyleAMathews

.changeset/fast-trees-find.md

@@ -0,0 +1,9 @@
+---
+"@tanstack/db-collections": patch
+"@tanstack/db-example-react-todo": patch
+"@tanstack/react-db": patch
+"@tanstack/vue-db": patch
+"@tanstack/db": patch
+---
+
+Collections must have a getId function & use an id for update/delete operators

examples/react/todo/src/App.tsx

@@ -149,7 +149,7 @@ const createTodoCollection = (type: CollectionType) => {
             timestamptz: (date: string) => new Date(date),
           },
         },
-        primaryKey: [`id`],
+        getId: (item) => item.id,
         schema: updateTodoSchema,
       })
     } else {
@@ -198,7 +198,7 @@ const createConfigCollection = (type: CollectionType) => {
             },
           },
         },
-        primaryKey: [`id`],
+        getId: (item) => item.id,
         schema: updateConfigSchema,
       })
     } else {
@@ -220,7 +220,7 @@ const createConfigCollection = (type: CollectionType) => {
               : undefined,
           }))
         },
-        getId: (item) => String(item.id),
+        getId: (item) => item.id,
         schema: updateConfigSchema,
         queryClient,
       })
@@ -290,10 +290,19 @@ export default function App() {
 
   const updateTodo = useOptimisticMutation({
     mutationFn: async ({ transaction }) => {
-      const mutation = transaction.mutations[0] as PendingMutation<UpdateTodo>
-      const { original, changes } = mutation
-      const response = await api.todos.update(original.id, changes)
-      await collectionSync(collectionType, mutation, response.txid)
+      const txids = await Promise.all(
+        transaction.mutations.map(async (mutation) => {
+          const { original, changes } = mutation
+          const response = await api.todos.update(original.id, changes)
+          return response.txid
+        })
+      )
+      await Promise.all(
+        txids.map(async (txid, i) => {
+          const mutation = transaction.mutations[i]
+          return await collectionSync(collectionType, mutation, txid)
+        })
+      )
     },
   })
 
@@ -349,12 +358,9 @@ export default function App() {
     for (const config of configData) {
       if (config.key === key) {
         updateConfig.mutate(() =>
-          configCollection.update(
-            Array.from(configCollection.state.values())[0]! as UpdateConfig,
-            (draft) => {
-              draft.value = value
-            }
-          )
+          configCollection.update(config.id, (draft) => {
+            draft.value = value
+          })
         )
 
         return
@@ -439,14 +445,9 @@ export default function App() {
 
   const toggleTodo = (todo: UpdateTodo) => {
     updateTodo.mutate(() =>
-      todoCollection.update(
-        Array.from(todoCollection.state.values()).find(
-          (t) => t.id === todo.id
-        )!,
-        (draft) => {
-          draft.completed = !draft.completed
-        }
-      )
+      todoCollection.update(todo.id, (draft) => {
+        draft.completed = !draft.completed
+      })
     )
   }
 
@@ -544,9 +545,7 @@ export default function App() {
                     todosToToggle.forEach((t) => togglingIds.add(t.id))
                     updateTodo.mutate(() =>
                       todoCollection.update(
-                        Array.from(todoCollection.state.values()).filter((t) =>
-                          togglingIds.has(t.id)
-                        ),
+                        todosToToggle.map((todo) => todo.id),
                         (drafts) => {
                           drafts.forEach(
                             (draft) => (draft.completed = !allCompleted)
@@ -596,11 +595,7 @@ export default function App() {
                         <button
                           onClick={() => {
                             deleteTodo.mutate(() =>
-                              todoCollection.delete(
-                                Array.from(todoCollection.state.values()).find(
-                                  (t) => t.id === todo.id
-                                )!
-                              )
+                              todoCollection.delete(todo.id)
                             )
                           }}
                           className="hidden group-hover:block absolute right-[10px] w-[40px] h-[40px] my-auto top-0 bottom-0 text-[30px] text-[#cc9a9a] hover:text-[#af5b5e] transition-colors"
@@ -623,9 +618,7 @@ export default function App() {
                       onClick={() => {
                         deleteTodo.mutate(() =>
                           todoCollection.delete(
-                            Array.from(todoCollection.state.values()).filter(
-                              (t) => completedTodos.some((ct) => ct.id === t.id)
-                            )
+                            completedTodos.map((todo) => todo.id)
                           )
                         )
                       }}

packages/db-collections/src/electric.ts

@@ -22,11 +22,6 @@ export interface ElectricCollectionConfig<T extends Row<unknown>>
    * Configuration options for the ElectricSQL ShapeStream
    */
   streamOptions: ShapeStreamOptions
-
-  /**
-   * Array of column names that form the primary key of the shape
-   */
-  primaryKey: Array<string>
 }
 
 /**
@@ -40,7 +35,6 @@ export class ElectricCollection<
   constructor(config: ElectricCollectionConfig<T>) {
     const seenTxids = new Store<Set<number>>(new Set([Math.random()]))
     const sync = createElectricSync<T>(config.streamOptions, {
-      primaryKey: config.primaryKey,
       seenTxids,
     })
 
@@ -114,23 +108,24 @@ export function createElectricCollection<T extends Row<unknown>>(
  */
 function createElectricSync<T extends Row<unknown>>(
   streamOptions: ShapeStreamOptions,
-  options: { primaryKey: Array<string>; seenTxids: Store<Set<number>> }
+  options: {
+    seenTxids: Store<Set<number>>
+  }
 ): SyncConfig<T> {
-  const { primaryKey, seenTxids } = options
+  const { seenTxids } = options
 
   // Store for the relation schema information
   const relationSchema = new Store<string | undefined>(undefined)
 
   /**
    * Get the sync metadata for insert operations
-   * @returns Record containing primaryKey and relation information
+   * @returns Record containing relation information
    */
   const getSyncMetadata = (): Record<string, unknown> => {
     // Use the stored schema if available, otherwise default to 'public'
     const schema = relationSchema.state || `public`
 
     return {
-      primaryKey,
       relation: streamOptions.params?.table
         ? [schema, streamOptions.params.table]
         : undefined,
@@ -168,18 +163,16 @@ function createElectricSync<T extends Row<unknown>>(
               transactionStarted = true
             }
 
-            const key = message.key
+            const value = message.value as unknown as T
 
             // Include the primary key and relation info in the metadata
             const enhancedMetadata = {
               ...message.headers,
-              primaryKey,
             }
 
             write({
-              key,
               type: message.headers.operation,
-              value: message.value as unknown as T,
+              value,
               metadata: enhancedMetadata,
             })
           } else if (isUpToDateMessage(message)) {
@@ -204,13 +197,3 @@ function createElectricSync<T extends Row<unknown>>(
     getSyncMetadata,
   }
 }
-
-/**
- * Configuration options for ElectricSync
- */
-export interface ElectricSyncOptions {
-  /**
-   * Array of column names that form the primary key of the shape
-   */
-  primaryKey: Array<string>
-}

packages/db-collections/src/query.ts

@@ -175,21 +175,21 @@ export class QueryCollection<
           currentSyncedItems.forEach((oldItem, key) => {
             const newItem = newItemsMap.get(key)
             if (!newItem) {
-              write({ type: `delete`, key, value: oldItem })
+              write({ type: `delete`, value: oldItem })
             } else if (
               !shallowEqual(
                 oldItem as Record<string, any>,
                 newItem as Record<string, any>
               )
             ) {
               // Only update if there are actual differences in the properties
-              write({ type: `update`, key, value: newItem })
+              write({ type: `update`, value: newItem })
             }
           })
 
           newItemsMap.forEach((newItem, key) => {
             if (!currentSyncedItems.has(key)) {
-              write({ type: `insert`, key, value: newItem })
+              write({ type: `insert`, value: newItem })
             }
           })
 

packages/db-collections/tests/electric.test.ts

@@ -41,7 +41,7 @@ describe(`Electric Integration`, () => {
           table: `test_table`,
         },
       },
-      primaryKey: [`id`], // Using 'id' as the primary key column
+      getId: (item) => item.id,
     })
   })
 
@@ -63,7 +63,7 @@ describe(`Electric Integration`, () => {
     ])
 
     expect(collection.state).toEqual(
-      new Map([[`1`, { id: 1, name: `Test User` }]])
+      new Map([[`KEY::${collection.id}/1`, { id: 1, name: `Test User` }]])
     )
   })
 
@@ -95,8 +95,8 @@ describe(`Electric Integration`, () => {
 
     expect(collection.state).toEqual(
       new Map([
-        [`1`, { id: 1, name: `Test User` }],
-        [`2`, { id: 2, name: `Another User` }],
+        [`KEY::${collection.id}/1`, { id: 1, name: `Test User` }],
+        [`KEY::${collection.id}/2`, { id: 2, name: `Another User` }],
       ])
     )
   })
@@ -128,7 +128,7 @@ describe(`Electric Integration`, () => {
     ])
 
     expect(collection.state).toEqual(
-      new Map([[`1`, { id: 1, name: `Updated User` }]])
+      new Map([[`KEY::${collection.id}/1`, { id: 1, name: `Updated User` }]])
     )
   })
 
@@ -149,7 +149,7 @@ describe(`Electric Integration`, () => {
     subscriber([
       {
         key: `1`,
-        value: {},
+        value: { id: `1` },
         headers: { operation: `delete` },
       },
       {
@@ -367,35 +367,8 @@ describe(`Electric Integration`, () => {
       // Check that the data was added to the collection
       // Note: In a real implementation, the collection would be updated by the sync process
       // This is just verifying our test setup worked correctly
-      expect(fakeBackend.data.has(`item1`)).toBe(true)
-      expect(collection.state.has(`item1`)).toBe(true)
+      expect(fakeBackend.data.has(`KEY::${collection.id}/1`)).toBe(true)
+      expect(collection.state.has(`KEY::${collection.id}/1`)).toBe(true)
     })
   })
-
-  it(`should include primaryKey in the metadata`, () => {
-    // Simulate incoming insert message
-    subscriber([
-      {
-        key: `1`,
-        value: { id: 1, name: `Test User` },
-        headers: { operation: `insert` },
-      },
-    ])
-
-    // Send up-to-date control message to commit transaction
-    subscriber([
-      {
-        headers: { control: `up-to-date` },
-      },
-    ])
-
-    // Get the metadata for the inserted item
-    const metadata = collection.syncedMetadata.state.get(`1`) as {
-      primaryKey: string
-    }
-
-    // Verify that the primaryKey is included in the metadata
-    expect(metadata).toHaveProperty(`primaryKey`)
-    expect(metadata.primaryKey).toEqual([`id`])
-  })
 })