xeon06•3y ago

input needs to be an object when doing a batch call?

Hey folks, just setup tRPC and running into the above error when trying to run mutations. Queries, even with inputs, work fine. Am I doing something wrong?

// Router
export default router({
  submit: procedure
    .input(
      z.object({
        foo: z.string(),
      })
    )
    .mutation(({ input }) => {
      console.log(input)
      return "helloooo"
    }),
})

// Component
const submit = trpc.submit.useMutation()

submit
  .mutateAsync({ foo: "bar" })
  .then((data) => console.log(data))

// Router
export default router({
  submit: procedure
    .input(
      z.object({
        foo: z.string(),
      })
    )
    .mutation(({ input }) => {
      console.log(input)
      return "helloooo"
    }),
})

// Component
const submit = trpc.submit.useMutation()

submit
  .mutateAsync({ foo: "bar" })
  .then((data) => console.log(data))

15 Replies

xeon06OP•3y ago

If I look at the request, it's a POST request with a ?batch=1 query param. The body is {"0":{"foo":"bar"}}

Nick•3y ago

This all looks fine Could you show the exact error? And share any more complete code? Stripping out the gist of the code for an example often seems helpful but when it's likely to be a coding mistake it actually hides useful information from us

xeon06OP•3y ago

The above is copy pasted verbatim, except that the mutateAsync call happens in an onClick handler... Full(er) error:

POST http://localhost:3000/trpc/submit?batch=1 400 (Bad Request)

react_devtools_backend.js:4012 TRPCClientError: "input" needs to be an object when doing a batch call
    at TRPCClientError.from (transformResult-6fb67924.mjs:4:20)
    at httpBatchLink.mjs:190:56
    
transformResult-6fb67924.mjs:4 Uncaught (in promise) TRPCClientError: "input" needs to be an object when doing a batch call
    at TRPCClientError.from (transformResult-6fb67924.mjs:4:20)
    at httpBatchLink.mjs:190:56

POST http://localhost:3000/trpc/submit?batch=1 400 (Bad Request)

react_devtools_backend.js:4012 TRPCClientError: "input" needs to be an object when doing a batch call
    at TRPCClientError.from (transformResult-6fb67924.mjs:4:20)
    at httpBatchLink.mjs:190:56
    
transformResult-6fb67924.mjs:4 Uncaught (in promise) TRPCClientError: "input" needs to be an object when doing a batch call
    at TRPCClientError.from (transformResult-6fb67924.mjs:4:20)
    at httpBatchLink.mjs:190:56

Maybe it has to do with the way my server is setup...

Nick•3y ago

Could be, we’re into some weeds that I’m not too familiar with here

xeon06OP•3y ago

All good, I think it might be my server setup. It's a bit unusual. Thanks for the help!

Nick•3y ago

Might be worth trying one of the example/starter projects and bringing over some work to or from it. Would give you a basis for comparison at least! Maybe someone else here recognises the issue though, good luck!

xeon06OP•3y ago

The body that's coming in from my server is of 0 length so looks like that's the problem 🙃 Thanks again!

Ahmed Eid•2w ago

I'm facing this issue with nextjs and have no idea how to resolve it. any ideas ?

Ahmed Eid•2w ago

Ahmed Eid•2w ago

input body is indeed an object. logging the req.body in trpc middleware logs {"0":{"json":{"phone":"123456789"}}}

Ahmed Eid•2w ago

removing "Content-Type": "application/json", from the headers fixed the issue.

Ahmed Eid•2w ago

GitHub

trpc/packages/server/src/adapters/fetch/fetchRequestHandler.ts at e...

🧙‍♀️ Move Fast and Break Nothing. End-to-end typesafe APIs made easy. - trpc/trpc

Nick•2w ago

Probably worth opening an issue with a reproduction if you could?

input needs to be an object when doing a batch call?

Did you find this page helpful?