useMutation() runs 3 times
Hello,
I have this weird problem that all my mutations across the app runs 3 times I don't know why.
This is my API in the backend:
And this is how I use them in the client:
I am sure that the call from the client doesn't run 3 times. I checked it with console.log.
I would be grateful if anyone helped. THanks.
I have this weird problem that all my mutations across the app runs 3 times I don't know why.
This is my API in the backend:
import { initTRPC } from '@trpc/server'
import superjson from 'superjson'
import routers from './routers'
import { brandFormSchema } from './zod-schemas'
const t = initTRPC.create({ isServer: true, transformer: superjson })
export const router = t.router({
...routers
})
export type AppRouter = typeof routerimport { initTRPC } from '@trpc/server'
import superjson from 'superjson'
import routers from './routers'
import { brandFormSchema } from './zod-schemas'
const t = initTRPC.create({ isServer: true, transformer: superjson })
export const router = t.router({
...routers
})
export type AppRouter = typeof routerAnd this is how I use them in the client:
import { notifications } from '@mantine/notifications'
import { trpcReact } from '@renderer/util/trpc'
import BrandForm from './brand-form'
type Props = {
onCreated: () => void
onCancel: () => void
}
function CreateBrand({ onCreated, onCancel }: Props): JSX.Element {
const utils = trpcReact.useUtils()
const { mutate, isLoading } = trpcReact.brand.create.useMutation({
onSuccess: (): void => {
utils.brand.all.invalidate()
notifications.show({
message: 'Added brand successfully!',
color: 'green'
})
},
onError: (error): void => {
notifications.show({
message: 'Brand not added!' + error,
color: 'red'
})
}
})
return (
<BrandForm
loading={isLoading}
submitHandler={(values): void => {
mutate(values)
onCreated()
}}
cancelHandler={(): void => {
onCancel()
}}
/>
)
}
export default CreateBrandimport { notifications } from '@mantine/notifications'
import { trpcReact } from '@renderer/util/trpc'
import BrandForm from './brand-form'
type Props = {
onCreated: () => void
onCancel: () => void
}
function CreateBrand({ onCreated, onCancel }: Props): JSX.Element {
const utils = trpcReact.useUtils()
const { mutate, isLoading } = trpcReact.brand.create.useMutation({
onSuccess: (): void => {
utils.brand.all.invalidate()
notifications.show({
message: 'Added brand successfully!',
color: 'green'
})
},
onError: (error): void => {
notifications.show({
message: 'Brand not added!' + error,
color: 'red'
})
}
})
return (
<BrandForm
loading={isLoading}
submitHandler={(values): void => {
mutate(values)
onCreated()
}}
cancelHandler={(): void => {
onCancel()
}}
/>
)
}
export default CreateBrandI am sure that the call from the client doesn't run 3 times. I checked it with console.log.
I would be grateful if anyone helped. THanks.
