From a69ff19a7eac3b077368879d681cdd36268febcc Mon Sep 17 00:00:00 2001
From: Ahmed Rowaihi <ahmedrowaihi1@gmail.com>
Date: Sun, 30 Mar 2025 00:05:38 +0300
Subject: [PATCH] fix(todos): trpc v11 (#93)

* fix(todos): trpc v11

* Create chilly-owls-flash.md

---------

Co-authored-by: Aman Varshney <amanvarshney.work@gmail.com>
---
 .changeset/chilly-owls-flash.md               |  5 +++
 .../todo/apps/web/src/routes/todos.tsx        | 33 +++++++++++--------
 2 files changed, 25 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/chilly-owls-flash.md

diff --git a/.changeset/chilly-owls-flash.md b/.changeset/chilly-owls-flash.md
new file mode 100644
index 0000000..78e7898
--- /dev/null
+++ b/.changeset/chilly-owls-flash.md
@@ -0,0 +1,5 @@
+---
+"create-better-t-stack": patch
+---
+
+fix(todos): trpc v11
diff --git a/apps/cli/template/examples/todo/apps/web/src/routes/todos.tsx b/apps/cli/template/examples/todo/apps/web/src/routes/todos.tsx
index 3fe08d3..43ea6b5 100644
--- a/apps/cli/template/examples/todo/apps/web/src/routes/todos.tsx
+++ b/apps/cli/template/examples/todo/apps/web/src/routes/todos.tsx
@@ -9,6 +9,7 @@ import {
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { trpc } from "@/utils/trpc";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
 import { Loader2, Trash2 } from "lucide-react";
 import { useState } from "react";
@@ -20,19 +21,25 @@ export const Route = createFileRoute("/todos")({
 function TodosRoute() {
   const [newTodoText, setNewTodoText] = useState("");
 
-  const todos = trpc.todo.getAll.useQuery();
-  const createMutation = trpc.todo.create.useMutation({
-    onSuccess: () => {
-      todos.refetch();
-      setNewTodoText("");
-    },
-  });
-  const toggleMutation = trpc.todo.toggle.useMutation({
-    onSuccess: () => todos.refetch(),
-  });
-  const deleteMutation = trpc.todo.delete.useMutation({
-    onSuccess: () => todos.refetch(),
-  });
+  const todos = useQuery(trpc.todo.getAll.queryOptions());
+  const createMutation = useMutation(
+    trpc.todo.create.mutationOptions({
+      onSuccess: () => {
+        todos.refetch();
+        setNewTodoText("");
+      },
+    })
+  );
+  const toggleMutation = useMutation(
+    trpc.todo.toggle.mutationOptions({
+      onSuccess: () => todos.refetch(),
+    })
+  );
+  const deleteMutation = useMutation(
+    trpc.todo.delete.mutationOptions({
+      onSuccess: () => todos.refetch(),
+    })
+  );
 
   const handleAddTodo = (e: React.FormEvent) => {
     e.preventDefault();