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:
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 router
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 router
And 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 CreateBrand
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 CreateBrand
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.
D
DINO62d ago
Also it's not a problem of the the way I create new row because I tried to console.log() at the start of the mutation function and it turned out it runs 3 times.
const create = t.procedure.input(brandFormSchema).mutation(async (req) => {
try {
console.log('=== running create brand mutation')
const { input: brandFormValues } = req
const em = orm.em.fork()
await em.persistAndFlush(em.create(Brand, brandFormValues))
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (err: any) {
createErrorLog(err.message, 'Create brand.')
throw err
}
})
const create = t.procedure.input(brandFormSchema).mutation(async (req) => {
try {
console.log('=== running create brand mutation')
const { input: brandFormValues } = req
const em = orm.em.fork()
await em.persistAndFlush(em.create(Brand, brandFormValues))
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (err: any) {
createErrorLog(err.message, 'Create brand.')
throw err
}
})
N
Nick62d ago
Does it succeed 3 times or fail? RQ has retries
D
DINO62d ago
It succeeds 3 times
N
Nick62d ago
Have you tried logging the even handler on the UI? Does that trigger multiple times? That’s what you logged before I assume? Do 3 network calls go out? It’s important to figure out where the number 3 begins But it’s a strange one of the network call is coming back with a 2xx status
D
DINO62d ago
I think I found where the problem at. I am using Electron with electron-trpc and I guess it's from create createIPCHandler handler multiple times.
N
Nick62d ago
Ah that’s a niche case
D
DINO62d ago
I have solved it. It was calling createIPCHandler multiple times. Thank you very much for your time.
More Posts
How to protect against Cross Site Request Forgery (CSRF)How can I protect against CSRF attacks when using tRPC on the client? Usually frameworks would inclutRPC doesn't explicitly check Content-TypeOWASP recommends explicitly checking the Content-Type header to be the expected one, but when I passCreate a typescript type that refers to a useQuery hook dynamicallyI'm trying to create a typescript type that generically refers to a useQuery hook (e.g. I am tryingtRPC Options Method not Allow in Vercel Next.jsI've been getting this error and I have already added CORS in my projects, in initializing the routeBest way to update a TRPC useQuery response without refetchingHey, I currently have a trpc useQuery endpoint which retrieves a series of form submissions for a uWhat is a useSuspenseQuery?Hi, I'm wondering what a useSuspenseQuery is, im looking at the docs but it doesn't explain it anywhNo "mutation"-procedure on pathHello all, I am using the latest version of TRPC on my client and server. I am using React Query onis there a better way to do this?```js let query; let params; switch (getWhat) { case "posts": query = api.user.userPHow to access the query cache data?I want to be able to use a data from already queried data as an initial data of another query. Is thThoughts on how to integrate t3 app, connectkit web3 auth, nextjs middleware, and trpcI am prototyping an application using t3 app with trpc, connectkit web3 auth. I am wanting to use nonError callback typeI want to have a callback onError passed from parent component to the child which has mutation call.Can I perform react query queries without using a trpc procedure, using useQuery standaloneHey, I need to perform a client site request, and I can't implement it with TRPC, so can I use regulTest React component using trpc client and `useSuspenseQuery`Hello ! I'm trying to test my React component that's querying through a tRPC client and `useSuspensHow to extract mutation typeIs it possible to extract mutation type? I would like to pass a mutation trigger to the parent comMock form data middleware (Hello everyone, I'm using experimental_parseMultipartFormData on some of my procedures and i would Ability to mutate/extend `input` from middlewaresHi I have a global middleware that should run for every route. This middleware simply coerces `''` (Hot to redirect in middleware when using createCallerFactoryHello. I do have this tiny middleware: ```typescript const authMiddleware = middleware(async (opts) Remix: How can I return headers from a query or mutation back to the action/loader?I'm using Supabase Auth and a requirement is to return the headers back from its client creation funUsing output validator breaks query return type inference on react queryHi! I am not sure whether this is expected and whether there is some way to fix that but here it goeHow to pass headers from serverActions in Next.js App router.I'm using tRPC with Clerk auth provider in Next.js App directory. I created a `serverClient` to use