Add createOptimisticAction helper that replaces useOptimisticMutation

[KyleAMathews]

fixes #202

An example of converting a useOptimisticMutation hook to createOptimisticAction. Now all optimistic & server mutation logic are consolidated.

-import { useOptimisticMutation } from '@tanstack/react-db'
+import { createOptimisticAction } from '@tanstack/react-db'
+
+// Create the `addTodo` action, passing in your `mutationFn` and `onMutate`.
+const addTodo = createOptimisticAction<string>({
+  onMutate: (text) => {
+    // Instantly applies the local optimistic state.
+    todoCollection.insert({
+      id: uuid(),
+      text,
+      completed: false
+    })
+  },
+  mutationFn: async (text) => {
+    // Persist the todo to your backend
+    const response = await fetch('/api/todos', {
+      method: 'POST',
+      body: JSON.stringify({ text, completed: false }),
+    })
+    return response.json()
+  }
+})
 
 const Todo = () => {
-  // Create the `addTodo` mutator, passing in your `mutationFn`.
-  const addTodo = useOptimisticMutation({ mutationFn })
-
   const handleClick = () => {
-    // Triggers the mutationFn
-    addTodo.mutate(() =>
-      // Instantly applies the local optimistic state.
-      todoCollection.insert({
-        id: uuid(),
-        text: '🔥 Make app faster',
-        completed: false
-      })
-    )
+    // Triggers the onMutate and then the mutationFn
+    addTodo('🔥 Make app faster')
   }
 
   return <Button onClick={ handleClick } />
 }

[changeset-bot]

🦋 Changeset detected

Latest commit: 5fff068

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@tanstack/react-db	Patch
@tanstack/vue-db	Patch
@tanstack/db	Patch
@tanstack/db-example-react-todo	Patch
@tanstack/db-collections	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[pkg-pr-new]

@tanstack/db-example-react-todo

npm i https://pkg.pr.new/@tanstack/db@210

npm i https://pkg.pr.new/@tanstack/db-collections@210

npm i https://pkg.pr.new/@tanstack/react-db@210

npm i https://pkg.pr.new/@tanstack/vue-db@210

commit: 5fff068

[github-actions]

Size Change: +317 B (+1.11%)

Total Size: 29 kB

Filename	Size	Change
./packages/db/dist/esm/index.js	432 B	+23 B (+5.62%)	🔍
./packages/db/dist/esm/optimistic-action.js	294 B	+294 B (new file)	🆕

ℹ️ View Unchanged

Filename	Size
./packages/db/dist/esm/collection.js	7.87 kB
./packages/db/dist/esm/deferred.js	230 B
./packages/db/dist/esm/errors.js	150 B
./packages/db/dist/esm/proxy.js	3.75 kB
./packages/db/dist/esm/query/compiled-query.js	1.49 kB
./packages/db/dist/esm/query/evaluators.js	1.06 kB
./packages/db/dist/esm/query/extractors.js	870 B
./packages/db/dist/esm/query/functions.js	1.28 kB
./packages/db/dist/esm/query/group-by.js	976 B
./packages/db/dist/esm/query/joins.js	1.14 kB
./packages/db/dist/esm/query/order-by.js	1.42 kB
./packages/db/dist/esm/query/pipeline-compiler.js	878 B
./packages/db/dist/esm/query/query-builder.js	2.14 kB
./packages/db/dist/esm/query/select.js	1.1 kB
./packages/db/dist/esm/query/utils.js	1.13 kB
./packages/db/dist/esm/SortedMap.js	1.24 kB
./packages/db/dist/esm/transactions.js	1.33 kB
./packages/db/dist/esm/utils.js	219 B

_{compressed-size-action::db-package-size}

[github-actions]

Size Change: 0 B

Total Size: 822 B

ℹ️ View Unchanged

Filename	Size
./packages/react-db/dist/esm/index.js	173 B
./packages/react-db/dist/esm/useLiveQuery.js	409 B
./packages/react-db/dist/esm/useOptimisticMutation.js	240 B

_{compressed-size-action::react-db-package-size}

[samwillis]

Love it - so much cleaner

I was about to say we need to delete the useOptimisticQuery react and view tests... but we didn't have any 😂

[KyleAMathews]

If you don't write any tests you don't have to delete them!