update orpc tanstack query integration (#299)

This commit is contained in:
Aman Varshney
2025-06-05 07:36:27 +05:30
committed by GitHub
parent 19f6a2ba6f
commit 1485809ad7
32 changed files with 85 additions and 110 deletions

View File

@@ -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}}

View File

@@ -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,
},
}));
}));

View File

@@ -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}}

View File

@@ -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}}

View File

@@ -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}}

View File

@@ -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}}

View File

@@ -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() },
}),
);

View File

@@ -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