fix(todos): trpc v11 (#93)

* fix(todos): trpc v11

* Create chilly-owls-flash.md

---------

Co-authored-by: Aman Varshney <amanvarshney.work@gmail.com>
This commit is contained in:
Ahmed Rowaihi
2025-03-30 00:05:38 +03:00
committed by GitHub
parent 1704b0ec16
commit a69ff19a7e
2 changed files with 25 additions and 13 deletions

View File

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

View File

@@ -9,6 +9,7 @@ import {
import { Checkbox } from "@/components/ui/checkbox"; import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { trpc } from "@/utils/trpc"; import { trpc } from "@/utils/trpc";
import { useMutation, useQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router"; import { createFileRoute } from "@tanstack/react-router";
import { Loader2, Trash2 } from "lucide-react"; import { Loader2, Trash2 } from "lucide-react";
import { useState } from "react"; import { useState } from "react";
@@ -20,19 +21,25 @@ export const Route = createFileRoute("/todos")({
function TodosRoute() { function TodosRoute() {
const [newTodoText, setNewTodoText] = useState(""); const [newTodoText, setNewTodoText] = useState("");
const todos = trpc.todo.getAll.useQuery(); const todos = useQuery(trpc.todo.getAll.queryOptions());
const createMutation = trpc.todo.create.useMutation({ const createMutation = useMutation(
trpc.todo.create.mutationOptions({
onSuccess: () => { onSuccess: () => {
todos.refetch(); todos.refetch();
setNewTodoText(""); setNewTodoText("");
}, },
}); })
const toggleMutation = trpc.todo.toggle.useMutation({ );
const toggleMutation = useMutation(
trpc.todo.toggle.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => todos.refetch(),
}); })
const deleteMutation = trpc.todo.delete.useMutation({ );
const deleteMutation = useMutation(
trpc.todo.delete.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => todos.refetch(),
}); })
);
const handleAddTodo = (e: React.FormEvent) => { const handleAddTodo = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();