Krishna•12mo ago

empty `input` object when using mutation

When using useQuery I have no issues even with input but when using useMutation. The backend is receiving an empty input. What could be the reason? stack is nodejs + express + reactjs + yarn Frontend code

const devCompanyMutation = trpc.devCompany.create.useMutation();

  const onSubmit = (latestDoc: T_Insert_DevCompany) => {
    console.log({latestDoc});
    devCompanyMutation.mutate(latestDoc);
  };

const devCompanyMutation = trpc.devCompany.create.useMutation();

  const onSubmit = (latestDoc: T_Insert_DevCompany) => {
    console.log({latestDoc});
    devCompanyMutation.mutate(latestDoc);
  };

Backend code

export const devCompanyRouter = router({
  create: publicProcedure
    .input(z.object({
      name: z.string().nullish()
    }).nullish())
    .mutation(({ input }) => {
      console.log({input})
      return input;
    })
})

export const devCompanyRouter = router({
  create: publicProcedure
    .input(z.object({
      name: z.string().nullish()
    }).nullish())
    .mutation(({ input }) => {
      console.log({input})
      return input;
    })
})

2 Replies

Nick•12mo ago

Is your express actually set up properly? People sometimes get middlewares in the wrong order and it causes problems

Krishna•12mo ago

Hi... sorry for late update... but I was able to debug this... In the frontend request I was resetting the content/type in headers.... which was confusing the backend... commenting the below code made it work

httpLink({ 
      url: `${be_url}/trpc`,
      // headers() {
      //   return {
      //     'Content-Type': 'application/json'
      //   };
      // },
    })

httpLink({ 
      url: `${be_url}/trpc`,
      // headers() {
      //   return {
      //     'Content-Type': 'application/json'
      //   };
      // },
    })

Thanks for the reply 🙂