Search code examples
postnext.jsbackendtrpc

Error while dealing with tRPC procedures "input needs to be an object when doing a batch call" ... even it is already an object

My code, as a part of a create-t3-app project in NextJs, tRPC and Prisma.

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 on another website I have for that purpose. 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 build to receive POST requests 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!

Other information:

  • Project is deployed on Vercel.
  • My package.json:
{
  "name": "viveapp-ig-api",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "postinstall": "prisma generate",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "@greatsumini/react-facebook-login": "^3.3.3",
    "@prisma/client": "^4.11.0",
    "@t3-oss/env-nextjs": "^0.2.1",
    "@tanstack/react-query": "^4.28.0",
    "@trpc/client": "^10.18.0",
    "@trpc/next": "^10.18.0",
    "@trpc/react-query": "^10.18.0",
    "@trpc/server": "^10.18.0",
    "axios": "^1.4.0",
    "next": "^12.3.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "recharts": "^2.7.2",
    "superjson": "1.12.2",
    "zod": "^3.21.4"
  },
  "devDependencies": {
    "@types/eslint": "^8.21.3",
    "@types/node": "^18.15.5",
    "@types/prettier": "^2.7.2",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.56.0",
    "@typescript-eslint/parser": "^5.56.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.36.0",
    "eslint-config-next": "^13.4.1",
    "postcss": "^8.4.21",
    "prettier": "^2.8.6",
    "prettier-plugin-tailwindcss": "^0.2.6",
    "prisma": "^4.11.0",
    "tailwindcss": "^3.3.0",
    "typescript": "^5.0.2"
  },
  "ct3aMetadata": {
    "initVersion": "7.13.0"
  }
}

Post request should be done without any issues at all. I have other procedures that use axios too to do GET requests and they have no problem at all. Even as said, if I change the URL to another I built to receive POST requests tRPC does not complain at all.

Solution

  • In case anyone struggles with this in the future... I found the bug. It all lies on this line of code:

    const response = await axios.post($env.URL, input, axiosConfig) that needs to become 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).