Theo's Typesafe Cult•2y ago

Experiencing hell while dealing with tRPC procedures and the "input needs to be an object"... help

import { TRPCError } from "@trpc/server";
import { z } from "zod";
import { env } from "~/env.mjs";
import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
import axios from "axios";

export const profileRouter = createTRPCRouter({
  sendProfileInfo: publicProcedure
    .input(
      z.object({
        ig_account: z.string(),
        followers_count: z.number(),
        audience_city: z.record(z.number()),
        audience_country: z.record(z.number()),
        audience_gender_age: z.record(z.number()),
        audience_locale: z.record(z.number()),
      })
    )
    .mutation(async ({ input }) => {
      const axiosConfig = {
        headers: {
          "Accept": "application/json",
          "Content-Type": "application/json",
          "Authorization": `${env.TOKEN}`,
        },
      };
      try {
        const response = await axios.post($env.URL, input, axiosConfig);
        return {response: response.data, inputType: typeof(input)};
      } catch (e) {
        throw new TRPCError({
          message: "Error",
          code: "BAD_REQUEST",
        });
      }
    }),
});

import { TRPCError } from "@trpc/server";
import { z } from "zod";
import { env } from "~/env.mjs";
import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
import axios from "axios";

export const profileRouter = createTRPCRouter({
  sendProfileInfo: publicProcedure
    .input(
      z.object({
        ig_account: z.string(),
        followers_count: z.number(),
        audience_city: z.record(z.number()),
        audience_country: z.record(z.number()),
        audience_gender_age: z.record(z.number()),
        audience_locale: z.record(z.number()),
      })
    )
    .mutation(async ({ input }) => {
      const axiosConfig = {
        headers: {
          "Accept": "application/json",
          "Content-Type": "application/json",
          "Authorization": `${env.TOKEN}`,
        },
      };
      try {
        const response = await axios.post($env.URL, input, axiosConfig);
        return {response: response.data, inputType: typeof(input)};
      } catch (e) {
        throw new TRPCError({
          message: "Error",
          code: "BAD_REQUEST",
        });
      }
    }),
});

This is just a project that uses FB IG Graph API to retrieve information about the user and sends that to an endpoint. I googled and tried different approaches and I still can't see what is wrong. I have also checked that returning typeof(input) results in "object" so I cannot understand why tRPC is not validating it as an object. Also, I don't know why, but if I change the url to another url I get no trouble at all. This just has been driving me crazy the past few days trying to figure it out... Any help extremely appreciated!

Solution:

hey @peterkyle01
In case anyone struggles with this in the future... I figured it out. It all lies on this line of code: const response = await axios.post($env.URL, input, axiosConfig) that needs to be await axios.post($env.URL, input, axiosConfig) without awaiting the response to assign it to a variable. If it is approached that way then it works just fine (idk why, just fixed the bug)....

Jump to solution

10 Replies

peterkyle01•2y ago

you can try passing the input at the axios.post as an object like: axios.post($env.URL, { input }, axiosConfig);

ray1sxOP•2y ago

yep, tried that, even passing it as an array, as an object inside an a array and a destructured object too.. no luck. I just can't udnerstand why is it complaining.

peterkyle01•2y ago

Can you try console logging the input before sending it to axios to see its state ,then try sending a plain object like { foo:"bar"} to axios and see if it works

ray1sxOP•2y ago

after trying I can confirm the bug is within the try catch block. I can see the input as an object logging before making the request. I am debuggin that part to try to achieve the request in some other way

peterkyle01•2y ago

Okay, lemme know if you find it

ray1sxOP•2y ago

narrowed it down up to the request. for some reason that tRPC procedudre is unable to do any requests regardless of the input handling, it just keeps spamming the same error. I am creating a new procedure to test and compare

peterkyle01•2y ago

Okay,also look at how you call the procedure from the client

ray1sxOP•2y ago

After breaking my balls a little bit with it I can confirm the error happens when a tRPC procedure tries to make a axios request either post or get with input parameters. This is something I do not understand because I am doing the same process to send that information to fb API Graph. And then read the response from FB. It just does not make sense

Solution

ray1sx•2y ago

peterkyle01•2y ago

Awsome ,thanks for the info 👌

Gaming

Programming

Experiencing hell while dealing with tRPC procedures and the "input needs to be an object"... help