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

@@ -0,0 +1,5 @@
+---
+"create-better-t-stack": patch
+---
+
+fix(todos): trpc v11

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();