franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

update orpc tanstack query integration (#299)

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/whole-memes-find.md Normal file
View File

@@ -0,0 +1,5 @@
---
"create-better-t-stack": minor
---
update orpc tanstack integration

9
apps/cli/src/constants.ts
View File

@@ -87,12 +87,9 @@ export const dependencyVersionMap = {
"@prisma/extension-accelerate": "^1.3.0", "@prisma/extension-accelerate": "^1.3.0",
"@orpc/server": "^1.2.0", "@orpc/server": "^1.4.1",
"@orpc/client": "^1.2.0", "@orpc/client": "^1.4.1",
"@orpc/react-query": "^1.2.0", "@orpc/tanstack-query": "^1.4.1",
"@orpc/solid-query": "^1.2.0",
"@orpc/vue-query": "^1.2.0",
"@orpc/svelte-query": "^1.2.0",
"@trpc/tanstack-react-query": "^11.0.0", "@trpc/tanstack-react-query": "^11.0.0",
"@trpc/server": "^11.0.0", "@trpc/server": "^11.0.0",

22
apps/cli/src/helpers/setup/api-setup.ts
View File

@@ -54,7 +54,11 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
if (hasReactWeb) { if (hasReactWeb) {
if (api === "orpc") { if (api === "orpc") {
await addPackageDependency({ await addPackageDependency({
dependencies: ["@orpc/react-query", "@orpc/client", "@orpc/server"], dependencies: [
"@orpc/tanstack-query",
"@orpc/client",
"@orpc/server",
],
projectDir: webDir, projectDir: webDir,
}); });
} else if (api === "trpc") { } else if (api === "trpc") {
@@ -70,7 +74,11 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
} else if (hasNuxtWeb) { } else if (hasNuxtWeb) {
if (api === "orpc") { if (api === "orpc") {
await addPackageDependency({ await addPackageDependency({
dependencies: ["@orpc/vue-query", "@orpc/client", "@orpc/server"], dependencies: [
"@orpc/tanstack-query",
"@orpc/client",
"@orpc/server",
],
projectDir: webDir, projectDir: webDir,
}); });
} }
@@ -78,7 +86,7 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
if (api === "orpc") { if (api === "orpc") {
await addPackageDependency({ await addPackageDependency({
dependencies: [ dependencies: [
"@orpc/svelte-query", "@orpc/tanstack-query",
"@orpc/client", "@orpc/client",
"@orpc/server", "@orpc/server",
"@tanstack/svelte-query", "@tanstack/svelte-query",
@@ -90,7 +98,7 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
if (api === "orpc") { if (api === "orpc") {
await addPackageDependency({ await addPackageDependency({
dependencies: [ dependencies: [
"@orpc/solid-query", "@orpc/tanstack-query",
"@orpc/client", "@orpc/client",
"@orpc/server", "@orpc/server",
"@tanstack/solid-query", "@tanstack/solid-query",
@@ -113,7 +121,11 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
}); });
} else if (api === "orpc") { } else if (api === "orpc") {
await addPackageDependency({ await addPackageDependency({
dependencies: ["@orpc/react-query", "@orpc/client", "@orpc/server"], dependencies: [
"@orpc/tanstack-query",
"@orpc/client",
"@orpc/server",
],
projectDir: nativeDir, projectDir: nativeDir,
}); });
} }

3
apps/cli/src/validation.ts
View File

@@ -30,7 +30,8 @@ export function processAndValidateFlags(
if (options.api === "none") { if (options.api === "none") {
if ( if (
options.examples && options.examples &&
!(options.examples.length === 1 && options.examples[0] === "none") !(options.examples.length === 1 && options.examples[0] === "none") &&
options.backend !== "convex"
) { ) {
consola.fatal( consola.fatal(
"Cannot use '--examples' when '--api' is set to 'none'. Please remove the --examples flag or choose an API type.", "Cannot use '--examples' when '--api' is set to 'none'. Please remove the --examples flag or choose an API type.",

6
apps/cli/templates/api/orpc/native/utils/orpc.ts.hbs
View File

@@ -1,7 +1,7 @@
import { createORPCClient } from "@orpc/client"; import { createORPCClient } from "@orpc/client";
import { RPCLink } from "@orpc/client/fetch"; import { RPCLink } from "@orpc/client/fetch";
import { createORPCReactQueryUtils } from "@orpc/react-query"; import { createTanstackQueryUtils } from "@orpc/tanstack-query";
import type { RouterUtils } from "@orpc/react-query"; import type { RouterUtils } from "@orpc/tanstack-query";
import type { RouterClient } from "@orpc/server"; import type { RouterClient } from "@orpc/server";
import { QueryCache, QueryClient } from "@tanstack/react-query"; import { QueryCache, QueryClient } from "@tanstack/react-query";
import { createContext, useContext } from "react"; import { createContext, useContext } from "react";
@@ -36,7 +36,7 @@ export const link = new RPCLink({
export const client: RouterClient<typeof appRouter> = createORPCClient(link); export const client: RouterClient<typeof appRouter> = createORPCClient(link);
export const orpc = createORPCReactQueryUtils(client); export const orpc = createTanstackQueryUtils(client);
export const ORPCContext = createContext<ORPCReactUtils | undefined>(undefined); export const ORPCContext = createContext<ORPCReactUtils | undefined>(undefined);

4
apps/cli/templates/api/orpc/web/nuxt/app/plugins/orpc.ts.hbs
View File

@@ -3,7 +3,7 @@ import type { RouterClient } from '@orpc/server'
import type { appRouter } from "../../../server/src/routers/index"; import type { appRouter } from "../../../server/src/routers/index";
import { createORPCClient } from '@orpc/client' import { createORPCClient } from '@orpc/client'
import { RPCLink } from '@orpc/client/fetch' import { RPCLink } from '@orpc/client/fetch'
import { createORPCVueQueryUtils } from '@orpc/vue-query' import { createTanstackQueryUtils } from "@orpc/tanstack-query";
export default defineNuxtPlugin(() => { export default defineNuxtPlugin(() => {
const config = useRuntimeConfig() const config = useRuntimeConfig()
@@ -25,7 +25,7 @@ export default defineNuxtPlugin(() => {
const client: RouterClient<typeof appRouter> = createORPCClient(rpcLink) const client: RouterClient<typeof appRouter> = createORPCClient(rpcLink)
const orpcUtils = createORPCVueQueryUtils(client) const orpcUtils = createTanstackQueryUtils(client)
return { return {
provide: { provide: {

6
apps/cli/templates/api/orpc/web/react/base/src/utils/orpc.ts.hbs
View File

@@ -1,12 +1,12 @@
import { createORPCClient } from "@orpc/client"; import { createORPCClient } from "@orpc/client";
import { RPCLink } from "@orpc/client/fetch"; import { RPCLink } from "@orpc/client/fetch";
import { createORPCReactQueryUtils } from "@orpc/react-query"; import { createTanstackQueryUtils } from "@orpc/tanstack-query";
import { QueryCache, QueryClient } from "@tanstack/react-query"; import { QueryCache, QueryClient } from "@tanstack/react-query";
import { toast } from "sonner"; import { toast } from "sonner";
import type { appRouter } from "../../../server/src/routers/index"; import type { appRouter } from "../../../server/src/routers/index";
import type { RouterClient } from "@orpc/server"; import type { RouterClient } from "@orpc/server";
import { createContext, use } from 'react' import { createContext, use } from 'react'
import type { RouterUtils } from '@orpc/react-query' import type { RouterUtils } from '@orpc/tanstack-query'
type ORPCReactUtils = RouterUtils<RouterClient<typeof appRouter>> type ORPCReactUtils = RouterUtils<RouterClient<typeof appRouter>>
@@ -43,7 +43,7 @@ export const link = new RPCLink({
export const client: RouterClient<typeof appRouter> = createORPCClient(link) export const client: RouterClient<typeof appRouter> = createORPCClient(link)
export const orpc = createORPCReactQueryUtils(client) export const orpc = createTanstackQueryUtils(client)
export const ORPCContext = createContext<ORPCReactUtils | undefined>(undefined) export const ORPCContext = createContext<ORPCReactUtils | undefined>(undefined)

4
apps/cli/templates/api/orpc/web/solid/src/utils/orpc.ts.hbs
View File

@@ -1,6 +1,6 @@
import { createORPCClient } from "@orpc/client"; import { createORPCClient } from "@orpc/client";
import { RPCLink } from "@orpc/client/fetch"; import { RPCLink } from "@orpc/client/fetch";
import { createORPCSolidQueryUtils } from "@orpc/solid-query"; import { createTanstackQueryUtils } from "@orpc/tanstack-query";
import { QueryCache, QueryClient } from "@tanstack/solid-query"; import { QueryCache, QueryClient } from "@tanstack/solid-query";
import type { appRouter } from "../../../server/src/routers/index"; import type { appRouter } from "../../../server/src/routers/index";
import type { RouterClient } from "@orpc/server"; import type { RouterClient } from "@orpc/server";
@@ -27,4 +27,4 @@ export const link = new RPCLink({
export const client: RouterClient<typeof appRouter> = createORPCClient(link); export const client: RouterClient<typeof appRouter> = createORPCClient(link);
export const orpc = createORPCSolidQueryUtils(client); export const orpc = createTanstackQueryUtils(client);

4
apps/cli/templates/api/orpc/web/svelte/src/lib/orpc.ts.hbs
View File

@@ -2,7 +2,7 @@ import { PUBLIC_SERVER_URL } from "$env/static/public";
import { createORPCClient } from "@orpc/client"; import { createORPCClient } from "@orpc/client";
import { RPCLink } from "@orpc/client/fetch"; import { RPCLink } from "@orpc/client/fetch";
import type { RouterClient } from "@orpc/server"; import type { RouterClient } from "@orpc/server";
import { createORPCSvelteQueryUtils } from "@orpc/svelte-query"; import { createTanstackQueryUtils } from "@orpc/tanstack-query";
import { QueryCache, QueryClient } from "@tanstack/svelte-query"; import { QueryCache, QueryClient } from "@tanstack/svelte-query";
import type { appRouter } from "../../../server/src/routers/index"; import type { appRouter } from "../../../server/src/routers/index";
@@ -28,4 +28,4 @@ export const link = new RPCLink({
export const client: RouterClient<typeof appRouter> = createORPCClient(link); export const client: RouterClient<typeof appRouter> = createORPCClient(link);
export const orpc = createORPCSvelteQueryUtils(client); export const orpc = createTanstackQueryUtils(client);

2
apps/cli/templates/auth/web/nuxt/app/components/SignInForm.vue
View File

@@ -9,7 +9,7 @@ const toast = useToast()
const loading = ref(false) const loading = ref(false)
const schema = z.object({ const schema = z.object({
email: z.string().email('Invalid email address'), email: z.email('Invalid email address'),
password: z.string().min(8, 'Password must be at least 8 characters'), password: z.string().min(8, 'Password must be at least 8 characters'),
}) })

2
apps/cli/templates/auth/web/nuxt/app/components/SignUpForm.vue
View File

@@ -10,7 +10,7 @@ const loading = ref(false)
const schema = z.object({ const schema = z.object({
name: z.string().min(2, 'Name must be at least 2 characters'), name: z.string().min(2, 'Name must be at least 2 characters'),
email: z.string().email('Invalid email address'), email: z.email('Invalid email address'),
password: z.string().min(8, 'Password must be at least 8 characters'), password: z.string().min(8, 'Password must be at least 8 characters'),
}) })

2
apps/cli/templates/auth/web/react/next/src/components/sign-in-form.tsx
View File

@@ -40,7 +40,7 @@ export default function SignInForm({
}, },
validators: { validators: {
onSubmit: z.object({ onSubmit: z.object({
email: z.string().email("Invalid email address"), email: z.email("Invalid email address"),
password: z.string().min(8, "Password must be at least 8 characters"), password: z.string().min(8, "Password must be at least 8 characters"),
}), }),
}, },

2
apps/cli/templates/auth/web/react/next/src/components/sign-up-form.tsx
View File

@@ -43,7 +43,7 @@ export default function SignUpForm({
validators: { validators: {
onSubmit: z.object({ onSubmit: z.object({
name: z.string().min(2, "Name must be at least 2 characters"), name: z.string().min(2, "Name must be at least 2 characters"),
email: z.string().email("Invalid email address"), email: z.email("Invalid email address"),
password: z.string().min(8, "Password must be at least 8 characters"), password: z.string().min(8, "Password must be at least 8 characters"),
}), }),
}, },

2
apps/cli/templates/auth/web/react/react-router/src/components/sign-in-form.tsx
View File

@@ -40,7 +40,7 @@ export default function SignInForm({
}, },
validators: { validators: {
onSubmit: z.object({ onSubmit: z.object({
email: z.string().email("Invalid email address"), email: z.email("Invalid email address"),
password: z.string().min(8, "Password must be at least 8 characters"), password: z.string().min(8, "Password must be at least 8 characters"),
}), }),
}, },

2
apps/cli/templates/auth/web/react/react-router/src/components/sign-up-form.tsx
View File

@@ -43,7 +43,7 @@ export default function SignUpForm({
validators: { validators: {
onSubmit: z.object({ onSubmit: z.object({
name: z.string().min(2, "Name must be at least 2 characters"), name: z.string().min(2, "Name must be at least 2 characters"),
email: z.string().email("Invalid email address"), email: z.email("Invalid email address"),
password: z.string().min(8, "Password must be at least 8 characters"), password: z.string().min(8, "Password must be at least 8 characters"),
}), }),
}, },

2
apps/cli/templates/auth/web/react/tanstack-router/src/components/sign-in-form.tsx
View File

@@ -44,7 +44,7 @@ export default function SignInForm({
}, },
validators: { validators: {
onSubmit: z.object({ onSubmit: z.object({
email: z.string().email("Invalid email address"), email: z.email("Invalid email address"),
password: z.string().min(8, "Password must be at least 8 characters"), password: z.string().min(8, "Password must be at least 8 characters"),
}), }),
}, },

2
apps/cli/templates/auth/web/react/tanstack-router/src/components/sign-up-form.tsx
View File

@@ -47,7 +47,7 @@ export default function SignUpForm({
validators: { validators: {
onSubmit: z.object({ onSubmit: z.object({
name: z.string().min(2, "Name must be at least 2 characters"), name: z.string().min(2, "Name must be at least 2 characters"),
email: z.string().email("Invalid email address"), email: z.email("Invalid email address"),
password: z.string().min(8, "Password must be at least 8 characters"), password: z.string().min(8, "Password must be at least 8 characters"),
}), }),
}, },

2
apps/cli/templates/auth/web/react/tanstack-start/src/components/sign-in-form.tsx
View File

@@ -44,7 +44,7 @@ export default function SignInForm({
}, },
validators: { validators: {
onSubmit: z.object({ onSubmit: z.object({
email: z.string().email("Invalid email address"), email: z.email("Invalid email address"),
password: z.string().min(8, "Password must be at least 8 characters"), password: z.string().min(8, "Password must be at least 8 characters"),
}), }),
}, },

2
apps/cli/templates/auth/web/react/tanstack-start/src/components/sign-up-form.tsx
View File

@@ -47,7 +47,7 @@ export default function SignUpForm({
validators: { validators: {
onSubmit: z.object({ onSubmit: z.object({
name: z.string().min(2, "Name must be at least 2 characters"), name: z.string().min(2, "Name must be at least 2 characters"),
email: z.string().email("Invalid email address"), email: z.email("Invalid email address"),
password: z.string().min(8, "Password must be at least 8 characters"), password: z.string().min(8, "Password must be at least 8 characters"),
}), }),
}, },

2
apps/cli/templates/auth/web/solid/src/components/sign-in-form.tsx
View File

@@ -39,7 +39,7 @@ export default function SignInForm({
}, },
validators: { validators: {
onSubmit: z.object({ onSubmit: z.object({
email: z.string().email("Invalid email address"), email: z.email("Invalid email address"),
password: z.string().min(8, "Password must be at least 8 characters"), password: z.string().min(8, "Password must be at least 8 characters"),
}), }),
}, },

2
apps/cli/templates/auth/web/solid/src/components/sign-up-form.tsx
View File

@@ -42,7 +42,7 @@ export default function SignUpForm({
validators: { validators: {
onSubmit: z.object({ onSubmit: z.object({
name: z.string().min(2, "Name must be at least 2 characters"), name: z.string().min(2, "Name must be at least 2 characters"),
email: z.string().email("Invalid email address"), email: z.email("Invalid email address"),
password: z.string().min(8, "Password must be at least 8 characters"), password: z.string().min(8, "Password must be at least 8 characters"),
}), }),
}, },

2
apps/cli/templates/auth/web/svelte/src/components/SignInForm.svelte
View File

@@ -7,7 +7,7 @@
let { switchToSignUp } = $props<{ switchToSignUp: () => void }>(); let { switchToSignUp } = $props<{ switchToSignUp: () => void }>();
const validationSchema = z.object({ const validationSchema = z.object({
email: z.string().email('Invalid email address'), email: z.email('Invalid email address'),
password: z.string().min(1, 'Password is required'), password: z.string().min(1, 'Password is required'),
}); });

2
apps/cli/templates/auth/web/svelte/src/components/SignUpForm.svelte
View File

@@ -8,7 +8,7 @@
const validationSchema = z.object({ const validationSchema = z.object({
name: z.string().min(2, 'Name must be at least 2 characters'), name: z.string().min(2, 'Name must be at least 2 characters'),
email: z.string().email('Invalid email address'), email: z.email('Invalid email address'),
password: z.string().min(8, 'Password must be at least 8 characters'), password: z.string().min(8, 'Password must be at least 8 characters'),
}); });

8
apps/cli/templates/examples/todo/native/nativewind/app/(drawer)/todos.tsx.hbs
View File

@@ -70,12 +70,12 @@ export default function TodosScreen() {
); );
const toggleMutation = useMutation( const toggleMutation = useMutation(
orpc.todo.toggle.mutationOptions({ orpc.todo.toggle.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}), }),
); );
const deleteMutation = useMutation( const deleteMutation = useMutation(
orpc.todo.delete.mutationOptions({ orpc.todo.delete.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}), }),
); );
{{/if}} {{/if}}
@@ -91,12 +91,12 @@ export default function TodosScreen() {
); );
const toggleMutation = useMutation( const toggleMutation = useMutation(
trpc.todo.toggle.mutationOptions({ trpc.todo.toggle.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}), }),
); );
const deleteMutation = useMutation( const deleteMutation = useMutation(
trpc.todo.delete.mutationOptions({ trpc.todo.delete.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}), }),
); );
{{/if}} {{/if}}

10
apps/cli/templates/examples/todo/native/unistyles/app/(drawer)/todos.tsx.hbs
View File

@@ -73,12 +73,12 @@ export default function TodosScreen() {
); );
const toggleMutation = useMutation( const toggleMutation = useMutation(
orpc.todo.toggle.mutationOptions({ orpc.todo.toggle.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}) })
); );
const deleteMutation = useMutation( const deleteMutation = useMutation(
orpc.todo.delete.mutationOptions({ orpc.todo.delete.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}) })
); );
{{/if}} {{/if}}
@@ -94,12 +94,12 @@ export default function TodosScreen() {
); );
const toggleMutation = useMutation( const toggleMutation = useMutation(
trpc.todo.toggle.mutationOptions({ trpc.todo.toggle.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}) })
); );
const deleteMutation = useMutation( const deleteMutation = useMutation(
trpc.todo.delete.mutationOptions({ trpc.todo.delete.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}) })
); );
{{/if}} {{/if}}
@@ -337,4 +337,4 @@ const styles = StyleSheet.create((theme) => ({
textDecorationLine: "line-through", textDecorationLine: "line-through",
color: theme.colors.border, color: theme.colors.border,
}, },
})); }));

8
apps/cli/templates/examples/todo/web/react/next/src/app/todos/page.tsx.hbs
View File

@@ -65,12 +65,12 @@ export default function TodosPage() {
); );
const toggleMutation = useMutation( const toggleMutation = useMutation(
orpc.todo.toggle.mutationOptions({ orpc.todo.toggle.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}), }),
); );
const deleteMutation = useMutation( const deleteMutation = useMutation(
orpc.todo.delete.mutationOptions({ orpc.todo.delete.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}), }),
); );
{{/if}} {{/if}}
@@ -86,12 +86,12 @@ export default function TodosPage() {
); );
const toggleMutation = useMutation( const toggleMutation = useMutation(
trpc.todo.toggle.mutationOptions({ trpc.todo.toggle.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}), }),
); );
const deleteMutation = useMutation( const deleteMutation = useMutation(
trpc.todo.delete.mutationOptions({ trpc.todo.delete.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}), }),
); );
{{/if}} {{/if}}

8
apps/cli/templates/examples/todo/web/react/react-router/src/routes/todos.tsx.hbs
View File

@@ -62,12 +62,12 @@ export default function Todos() {
); );
const toggleMutation = useMutation( const toggleMutation = useMutation(
orpc.todo.toggle.mutationOptions({ orpc.todo.toggle.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}) })
); );
const deleteMutation = useMutation( const deleteMutation = useMutation(
orpc.todo.delete.mutationOptions({ orpc.todo.delete.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}) })
); );
{{/if}} {{/if}}
@@ -83,12 +83,12 @@ export default function Todos() {
); );
const toggleMutation = useMutation( const toggleMutation = useMutation(
trpc.todo.toggle.mutationOptions({ trpc.todo.toggle.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}) })
); );
const deleteMutation = useMutation( const deleteMutation = useMutation(
trpc.todo.delete.mutationOptions({ trpc.todo.delete.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}) })
); );
{{/if}} {{/if}}

8
apps/cli/templates/examples/todo/web/react/tanstack-router/src/routes/todos.tsx.hbs
View File

@@ -67,12 +67,12 @@ function TodosRoute() {
); );
const toggleMutation = useMutation( const toggleMutation = useMutation(
orpc.todo.toggle.mutationOptions({ orpc.todo.toggle.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}), }),
); );
const deleteMutation = useMutation( const deleteMutation = useMutation(
orpc.todo.delete.mutationOptions({ orpc.todo.delete.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}), }),
); );
{{/if}} {{/if}}
@@ -88,12 +88,12 @@ function TodosRoute() {
); );
const toggleMutation = useMutation( const toggleMutation = useMutation(
trpc.todo.toggle.mutationOptions({ trpc.todo.toggle.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}), }),
); );
const deleteMutation = useMutation( const deleteMutation = useMutation(
trpc.todo.delete.mutationOptions({ trpc.todo.delete.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}), }),
); );
{{/if}} {{/if}}

10
apps/cli/templates/examples/todo/web/react/tanstack-start/src/routes/todos.tsx.hbs
View File

@@ -17,7 +17,7 @@ import { useSuspenseQuery } from "@tanstack/react-query";
import { convexQuery } from "@convex-dev/react-query"; import { convexQuery } from "@convex-dev/react-query";
import { useMutation } from "convex/react"; import { useMutation } from "convex/react";
import { api } from "@{{projectName}}/backend/convex/_generated/api"; 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}} {{else}}
{{#if (eq api "trpc")}} {{#if (eq api "trpc")}}
import { useTRPC } from "@/utils/trpc"; import { useTRPC } from "@/utils/trpc";
@@ -92,12 +92,12 @@ function TodosRoute() {
); );
const toggleMutation = useMutation( const toggleMutation = useMutation(
trpc.todo.toggle.mutationOptions({ trpc.todo.toggle.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}), }),
); );
const deleteMutation = useMutation( const deleteMutation = useMutation(
trpc.todo.delete.mutationOptions({ trpc.todo.delete.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}), }),
); );
{{/if}} {{/if}}
@@ -113,12 +113,12 @@ function TodosRoute() {
); );
const toggleMutation = useMutation( const toggleMutation = useMutation(
orpc.todo.toggle.mutationOptions({ orpc.todo.toggle.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}), }),
); );
const deleteMutation = useMutation( const deleteMutation = useMutation(
orpc.todo.delete.mutationOptions({ orpc.todo.delete.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}), }),
); );
{{/if}} {{/if}}

4
apps/cli/templates/examples/todo/web/solid/src/routes/todos.tsx → apps/cli/templates/examples/todo/web/solid/src/routes/todos.tsx.hbs
View File

@@ -24,13 +24,13 @@ function TodosRoute() {
const toggleMutation = useMutation(() => const toggleMutation = useMutation(() =>
orpc.todo.toggle.mutationOptions({ orpc.todo.toggle.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}), }),
); );
const deleteMutation = useMutation(() => const deleteMutation = useMutation(() =>
orpc.todo.delete.mutationOptions({ orpc.todo.delete.mutationOptions({
onSuccess: () => todos.refetch(), onSuccess: () => { todos.refetch() },
}), }),
); );

44
apps/cli/templates/examples/todo/web/svelte/src/routes/todos/+page.svelte.hbs
View File

@@ -2,7 +2,7 @@
<script lang="ts"> <script lang="ts">
import { useQuery, useConvexClient } from 'convex-svelte'; import { useQuery, useConvexClient } from 'convex-svelte';
import { api } from '@{{projectName}}/backend/convex/_generated/api'; 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 newTodoText = $state('');
let isAdding = $state(false); let isAdding = $state(false);
@@ -164,9 +164,6 @@
{{#if (eq api "orpc")}} {{#if (eq api "orpc")}}
import { orpc } from '$lib/orpc'; import { orpc } from '$lib/orpc';
{{/if}} {{/if}}
{{#if (eq api "trpc")}}
import { trpc } from '$lib/trpc';
{{/if}}
import { createQuery, createMutation } from '@tanstack/svelte-query'; import { createQuery, createMutation } from '@tanstack/svelte-query';
let newTodoText = $state(''); let newTodoText = $state('');
@@ -208,43 +205,6 @@
}) })
); );
{{/if}} {{/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) { function handleAddTodo(event: SubmitEvent) {
event.preventDefault(); event.preventDefault();
@@ -271,7 +231,7 @@
</script> </script>
<div class="p-4"> <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"> <form onsubmit={handleAddTodo} class="flex gap-2 mb-4">
<input <input

4
apps/cli/templates/frontend/react/tanstack-router/src/routes/__root.tsx.hbs
View File

@@ -8,7 +8,7 @@ import type { QueryClient } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { useState } from "react"; import { useState } from "react";
import type { RouterClient } from "@orpc/server"; import type { RouterClient } from "@orpc/server";
import { createORPCReactQueryUtils } from "@orpc/react-query"; import { createTanstackQueryUtils } from "@orpc/tanstack-query";
import type { appRouter } from "../../../server/src/routers"; import type { appRouter } from "../../../server/src/routers";
import { createORPCClient } from "@orpc/client"; import { createORPCClient } from "@orpc/client";
{{/if}} {{/if}}
@@ -68,7 +68,7 @@ function RootComponent() {
{{#if (eq api "orpc")}} {{#if (eq api "orpc")}}
const [client] = useState<RouterClient<typeof appRouter>>(() => createORPCClient(link)); const [client] = useState<RouterClient<typeof appRouter>>(() => createORPCClient(link));
const [orpcUtils] = useState(() => createORPCReactQueryUtils(client)); const [orpcUtils] = useState(() => createTanstackQueryUtils(client));
{{/if}} {{/if}}
return ( return (