Revert "Revert "Block async opt update handlers at compile time" (#37701)" (#37809)

TypeScript protection against using async functions with `withOptimisticupdate` since these callbacks need to be sync to work correctly.

GitOrigin-RevId: 3b875e0791214f284fef2547aaf7455c4f158061

Author: thomasballinger

src/react/client.test.tsx

@@ -1,7 +1,7 @@
 /**
  * @vitest-environment happy-dom
  */
-import { test, expect, describe } from "vitest";
+import { test, expect, describe, vi } from "vitest";
 import ws from "ws";
 
 import { ConvexReactClient, createMutation, useQuery } from "./client.js";
@@ -112,6 +112,22 @@ describe("useQuery", () => {
     );
     expect(result.current).toStrictEqual(undefined);
   });
+
+  test("Optimistic update handlers can’t be async", () => {
+    const client = testConvexReactClient();
+    const mutation = createMutation(
+      anyApi.myMutation.default,
+      client,
+      // @ts-expect-error
+    ).withOptimisticUpdate(async () => {});
+
+    // Calling the mutation should warn in the console
+    const consoleWarnSpy = vi.spyOn(console, "warn");
+    void mutation();
+    expect(consoleWarnSpy).toHaveBeenCalledWith(
+      "Optimistic update handler returned a Promise. Optimistic updates should be synchronous.",
+    );
+  });
 });
 
 // Intentionally disabled because we're only testing types

src/react/client.ts

@@ -68,8 +68,11 @@ export interface ReactMutation<Mutation extends FunctionReference<"mutation">> {
    *
    * @public
    */
-  withOptimisticUpdate(
-    optimisticUpdate: OptimisticUpdate<FunctionArgs<Mutation>>,
+  withOptimisticUpdate<T extends OptimisticUpdate<FunctionArgs<Mutation>>>(
+    optimisticUpdate: T &
+      (ReturnType<T> extends Promise<any>
+        ? "Optimistic update handlers must be synchronous"
+        : {}),
   ): ReactMutation<Mutation>;
 }