Theo's Typesafe Cult•3y ago

Are tRPC endpoints awaited internally? Endpoint being called again before it finishes

I'm having this weird issue where I want to add a value to an array only if it doesn't already exist. I test this in my endpoint and return an error if so. But it's being called twice due to react's strict mode and in both cases the server hasn't seen the update yet.

// tRPC endpoint
console.log(arrayFromPrisma);
if (arrayFromPrisma.includes(input.value)) {
    throw {message: "already included"};
}
await // prisma update array push...

// tRPC endpoint
console.log(arrayFromPrisma);
if (arrayFromPrisma.includes(input.value)) {
    throw {message: "already included"};
}
await // prisma update array push...

this is called twice and prints out an empty array both times (and succeeds, and the value ends up in the db array twice). I'm awaiting everything I can. It must be starting one endpoint call before the other is finished, but why? I don't understand how to stop this. My mutate call is wrapped in a useEffect and I even invalidate the get query on cleanup. But it doesn't help because it's calling the endpoint too soon. I'm completely stuck.

6 Replies

bigsexy•3y ago

I would advise against doing mutation inside of a useEffect. if you absolutely have to, a hacky solution is to create a useRef boolean that can be used to conditonally execute the mutation only if it hasnt already been executed. you could also try turning off batching for that query.

scatter•3y ago

Turning off batching didn't help, the exact same thing happens. Why wouldn't I wrap it in a useEffect? I tried unwrapping it and I still have the issue even with batching off, but I don't understand why I wouldn't want to put it in a useEffect if I only want it to run once

Unknown User•3y ago

Message Not Public

scatter•3y ago

No luck there I'm afraid. It's still calling it twice. It kicks off the mutation too early - it calls mutate twice before it even has a chance to start loading, and then it just queues two.

Unknown User•3y ago

Message Not Public

scatter•3y ago

I ran a git bisect and found that this problem appeared when the parent component added a useQuery for the same query the mutation sets the data of

Gaming

Programming

Are tRPC endpoints awaited internally? Endpoint being called again before it finishes