mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
update orpc tanstack query integration (#299)
This commit is contained in:
@@ -70,12 +70,12 @@ export default function TodosScreen() {
|
||||
);
|
||||
const toggleMutation = useMutation(
|
||||
orpc.todo.toggle.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
}),
|
||||
);
|
||||
const deleteMutation = useMutation(
|
||||
orpc.todo.delete.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
}),
|
||||
);
|
||||
{{/if}}
|
||||
@@ -91,12 +91,12 @@ export default function TodosScreen() {
|
||||
);
|
||||
const toggleMutation = useMutation(
|
||||
trpc.todo.toggle.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
}),
|
||||
);
|
||||
const deleteMutation = useMutation(
|
||||
trpc.todo.delete.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
}),
|
||||
);
|
||||
{{/if}}
|
||||
|
||||
@@ -73,12 +73,12 @@ export default function TodosScreen() {
|
||||
);
|
||||
const toggleMutation = useMutation(
|
||||
orpc.todo.toggle.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
})
|
||||
);
|
||||
const deleteMutation = useMutation(
|
||||
orpc.todo.delete.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
})
|
||||
);
|
||||
{{/if}}
|
||||
@@ -94,12 +94,12 @@ export default function TodosScreen() {
|
||||
);
|
||||
const toggleMutation = useMutation(
|
||||
trpc.todo.toggle.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
})
|
||||
);
|
||||
const deleteMutation = useMutation(
|
||||
trpc.todo.delete.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
})
|
||||
);
|
||||
{{/if}}
|
||||
@@ -337,4 +337,4 @@ const styles = StyleSheet.create((theme) => ({
|
||||
textDecorationLine: "line-through",
|
||||
color: theme.colors.border,
|
||||
},
|
||||
}));
|
||||
}));
|
||||
|
||||
@@ -65,12 +65,12 @@ export default function TodosPage() {
|
||||
);
|
||||
const toggleMutation = useMutation(
|
||||
orpc.todo.toggle.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
}),
|
||||
);
|
||||
const deleteMutation = useMutation(
|
||||
orpc.todo.delete.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
}),
|
||||
);
|
||||
{{/if}}
|
||||
@@ -86,12 +86,12 @@ export default function TodosPage() {
|
||||
);
|
||||
const toggleMutation = useMutation(
|
||||
trpc.todo.toggle.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
}),
|
||||
);
|
||||
const deleteMutation = useMutation(
|
||||
trpc.todo.delete.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
}),
|
||||
);
|
||||
{{/if}}
|
||||
|
||||
@@ -62,12 +62,12 @@ export default function Todos() {
|
||||
);
|
||||
const toggleMutation = useMutation(
|
||||
orpc.todo.toggle.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
})
|
||||
);
|
||||
const deleteMutation = useMutation(
|
||||
orpc.todo.delete.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
})
|
||||
);
|
||||
{{/if}}
|
||||
@@ -83,12 +83,12 @@ export default function Todos() {
|
||||
);
|
||||
const toggleMutation = useMutation(
|
||||
trpc.todo.toggle.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
})
|
||||
);
|
||||
const deleteMutation = useMutation(
|
||||
trpc.todo.delete.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
})
|
||||
);
|
||||
{{/if}}
|
||||
|
||||
@@ -67,12 +67,12 @@ function TodosRoute() {
|
||||
);
|
||||
const toggleMutation = useMutation(
|
||||
orpc.todo.toggle.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
}),
|
||||
);
|
||||
const deleteMutation = useMutation(
|
||||
orpc.todo.delete.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
}),
|
||||
);
|
||||
{{/if}}
|
||||
@@ -88,12 +88,12 @@ function TodosRoute() {
|
||||
);
|
||||
const toggleMutation = useMutation(
|
||||
trpc.todo.toggle.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
}),
|
||||
);
|
||||
const deleteMutation = useMutation(
|
||||
trpc.todo.delete.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
}),
|
||||
);
|
||||
{{/if}}
|
||||
|
||||
@@ -17,7 +17,7 @@ import { useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { convexQuery } from "@convex-dev/react-query";
|
||||
import { useMutation } from "convex/react";
|
||||
import { api } from "@{{projectName}}/backend/convex/_generated/api";
|
||||
import type { Id } from "@{{projectName}}/backend/convex/_generated/dataModel.js";
|
||||
import type { Id } from "@{{projectName}}/backend/convex/_generated/dataModel";
|
||||
{{else}}
|
||||
{{#if (eq api "trpc")}}
|
||||
import { useTRPC } from "@/utils/trpc";
|
||||
@@ -92,12 +92,12 @@ function TodosRoute() {
|
||||
);
|
||||
const toggleMutation = useMutation(
|
||||
trpc.todo.toggle.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
}),
|
||||
);
|
||||
const deleteMutation = useMutation(
|
||||
trpc.todo.delete.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
}),
|
||||
);
|
||||
{{/if}}
|
||||
@@ -113,12 +113,12 @@ function TodosRoute() {
|
||||
);
|
||||
const toggleMutation = useMutation(
|
||||
orpc.todo.toggle.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
}),
|
||||
);
|
||||
const deleteMutation = useMutation(
|
||||
orpc.todo.delete.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
}),
|
||||
);
|
||||
{{/if}}
|
||||
|
||||
@@ -24,13 +24,13 @@ function TodosRoute() {
|
||||
|
||||
const toggleMutation = useMutation(() =>
|
||||
orpc.todo.toggle.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
}),
|
||||
);
|
||||
|
||||
const deleteMutation = useMutation(() =>
|
||||
orpc.todo.delete.mutationOptions({
|
||||
onSuccess: () => todos.refetch(),
|
||||
onSuccess: () => { todos.refetch() },
|
||||
}),
|
||||
);
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<script lang="ts">
|
||||
import { useQuery, useConvexClient } from 'convex-svelte';
|
||||
import { api } from '@{{projectName}}/backend/convex/_generated/api';
|
||||
import type { Id } from '@{{projectName}}/backend/convex/_generated/dataModel.js';
|
||||
import type { Id } from '@{{projectName}}/backend/convex/_generated/dataModel';
|
||||
|
||||
let newTodoText = $state('');
|
||||
let isAdding = $state(false);
|
||||
@@ -164,9 +164,6 @@
|
||||
{{#if (eq api "orpc")}}
|
||||
import { orpc } from '$lib/orpc';
|
||||
{{/if}}
|
||||
{{#if (eq api "trpc")}}
|
||||
import { trpc } from '$lib/trpc';
|
||||
{{/if}}
|
||||
import { createQuery, createMutation } from '@tanstack/svelte-query';
|
||||
|
||||
let newTodoText = $state('');
|
||||
@@ -208,43 +205,6 @@
|
||||
})
|
||||
);
|
||||
{{/if}}
|
||||
{{#if (eq api "trpc")}}
|
||||
const todosQuery = createQuery(trpc.todo.getAll.queryOptions());
|
||||
|
||||
const addMutation = createMutation(
|
||||
trpc.todo.create.mutationOptions({
|
||||
onSuccess: () => {
|
||||
$todosQuery.refetch();
|
||||
newTodoText = '';
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error('Failed to create todo:', error?.message ?? error);
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
const toggleMutation = createMutation(
|
||||
trpc.todo.toggle.mutationOptions({
|
||||
onSuccess: () => {
|
||||
$todosQuery.refetch();
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error('Failed to toggle todo:', error?.message ?? error);
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
const deleteMutation = createMutation(
|
||||
trpc.todo.delete.mutationOptions({
|
||||
onSuccess: () => {
|
||||
$todosQuery.refetch();
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error('Failed to delete todo:', error?.message ?? error);
|
||||
},
|
||||
})
|
||||
);
|
||||
{{/if}}
|
||||
|
||||
function handleAddTodo(event: SubmitEvent) {
|
||||
event.preventDefault();
|
||||
@@ -271,7 +231,7 @@
|
||||
</script>
|
||||
|
||||
<div class="p-4">
|
||||
<h1 class="text-xl mb-4">Todos{{#if (eq api "trpc")}} (tRPC){{/if}}{{#if (eq api "orpc")}} (oRPC){{/if}}</h1>
|
||||
<h1 class="text-xl mb-4">Todos{{#if (eq api "orpc")}} (oRPC){{/if}}</h1>
|
||||
|
||||
<form onsubmit={handleAddTodo} class="flex gap-2 mb-4">
|
||||
<input
|
||||
|
||||
Reference in New Issue
Block a user