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

huangapple
go评论111阅读模式
英文:

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

问题

这只是一个使用FB IG Graph API来获取用户信息并将其发送到我为此目的创建的另一个网站端点的项目。我已经搜索并尝试了不同的方法，但仍然无法看出问题在哪里。

我还检查了返回的typeof(input)，结果是"object"，所以我无法理解为什么tRPC没有将其验证为对象。

此外，我不知道为什么，但如果我将URL更改为我构建的另一个用于接收POST请求的URL，tRPC就完全没有问题。这几天来一直在试图找出问题所在，任何帮助都非常感激！

其他信息：

  • 项目部署在Vercel上。
  • 我的package.json：
  1. {
  2.   "name": "viveapp-ig-api",
  3.   "version": "0.1.0",
  4.   "private": true,
  5.   "scripts": {
  6.     "build": "next build",
  7.     "dev": "next dev",
  8.     "postinstall": "prisma generate",
  9.     "lint": "next lint",
  10.     "start": "next start"
  11.   },
  12.   "dependencies": {
  13.     "@greatsumini/react-facebook-login": "^3.3.3",
  14.     "@prisma/client": "^4.11.0",
  15.     "@t3-oss/env-nextjs": "^0.2.1",
  16.     "@tanstack/react-query": "^4.28.0",
  17.     "@trpc/client": "^10.18.0",
  18.     "@trpc/next": "^10.18.0",
  19.     "@trpc/react-query": "^10.18.0",
  20.     "@trpc/server": "^10.18.0",
  21.     "axios": "^1.4.0",
  22.     "next": "^12.3.0",
  23.     "react": "18.2.0",
  24.     "react-dom": "18.2.0",
  25.     "recharts": "^2.7.2",
  26.     "superjson": "1.12.2",
  27.     "zod": "^3.21.4"
  28.   },
  29.   "devDependencies": {
  30.     "@types/eslint": "^8.21.3",
  31.     "@types/node": "^18.15.5",
  32.     "@types/prettier": "^2.7.2",
  33.     "@types/react": "^18.0.28",
  34.     "@types/react-dom": "^18.0.11",
  35.     "@typescript-eslint/eslint-plugin": "^5.56.0",
  36.     "@typescript-eslint/parser": "^5.56.0",
  37.     "autoprefixer": "^10.4.14",
  38.     "eslint": "^8.36.0",
  39.     "eslint-config-next": "^13.4.1",
  40.     "postcss": "^8.4.21",
  41.     "prettier": "^2.8.6",
  42.     "prettier-plugin-tailwindcss": "^0.2.6",
  43.     "prisma": "^4.11.0",
  44.     "tailwindcss": "^3.3.0",
  45.     "typescript": "^5.0.2"
  46.   },
  47.   "ct3aMetadata": {
  48.     "initVersion": "7.13.0"
  49.   }
  50. }

POST请求应该完全没有问题。我还有其他使用axios执行GET请求的过程，它们没有任何问题。正如我所说，如果将URL更改为我构建的另一个用于接收POST请求的URL，tRPC根本不会抱怨。

英文:

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

  1. import { TRPCError } from "@trpc/server";
  2. import { z } from "zod";
  3. import { env } from "~/env.mjs";
  4. import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
  5. import axios from "axios";
  7. export const profileRouter = createTRPCRouter({
  8.   sendProfileInfo: publicProcedure
  9.     .input(
  10.       z.object({
  11.         ig_account: z.string(),
  12.         followers_count: z.number(),
  13.         audience_city: z.record(z.number()),
  14.         audience_country: z.record(z.number()),
  15.         audience_gender_age: z.record(z.number()),
  16.         audience_locale: z.record(z.number()),
  17.       })
  18.     )
  19.     .mutation(async ({ input }) => {
  20.       const axiosConfig = {
  21.         headers: {
  22.           "Accept": "application/json",
  23.           "Content-Type": "application/json",
  24.           "Authorization": `${env.TOKEN}`,
  25.         },
  26.       };
  27.       try {
  28.         const response = await axios.post($env.URL, input, axiosConfig);
  29.         return {response: response.data, inputType: typeof(input)};
  30.       } catch (e) {
  31.         throw new TRPCError({
  32.           message: "Error",
  33.           code: "BAD_REQUEST",
  34.         });
  35.       }
  36.     }),
  37. });

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:
  1. {
  2.   "name": "viveapp-ig-api",
  3.   "version": "0.1.0",
  4.   "private": true,
  5.   "scripts": {
  6.     "build": "next build",
  7.     "dev": "next dev",
  8.     "postinstall": "prisma generate",
  9.     "lint": "next lint",
  10.     "start": "next start"
  11.   },
  12.   "dependencies": {
  13.     "@greatsumini/react-facebook-login": "^3.3.3",
  14.     "@prisma/client": "^4.11.0",
  15.     "@t3-oss/env-nextjs": "^0.2.1",
  16.     "@tanstack/react-query": "^4.28.0",
  17.     "@trpc/client": "^10.18.0",
  18.     "@trpc/next": "^10.18.0",
  19.     "@trpc/react-query": "^10.18.0",
  20.     "@trpc/server": "^10.18.0",
  21.     "axios": "^1.4.0",
  22.     "next": "^12.3.0",
  23.     "react": "18.2.0",
  24.     "react-dom": "18.2.0",
  25.     "recharts": "^2.7.2",
  26.     "superjson": "1.12.2",
  27.     "zod": "^3.21.4"
  28.   },
  29.   "devDependencies": {
  30.     "@types/eslint": "^8.21.3",
  31.     "@types/node": "^18.15.5",
  32.     "@types/prettier": "^2.7.2",
  33.     "@types/react": "^18.0.28",
  34.     "@types/react-dom": "^18.0.11",
  35.     "@typescript-eslint/eslint-plugin": "^5.56.0",
  36.     "@typescript-eslint/parser": "^5.56.0",
  37.     "autoprefixer": "^10.4.14",
  38.     "eslint": "^8.36.0",
  39.     "eslint-config-next": "^13.4.1",
  40.     "postcss": "^8.4.21",
  41.     "prettier": "^2.8.6",
  42.     "prettier-plugin-tailwindcss": "^0.2.6",
  43.     "prisma": "^4.11.0",
  44.     "tailwindcss": "^3.3.0",
  45.     "typescript": "^5.0.2"
  46.   },
  47.   "ct3aMetadata": {
  48.     "initVersion": "7.13.0"
  49.   }
  50. }

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.

答案1

得分: 0

如果将代码行：

const response = await axios.post($env.URL, input, axiosConfig)

改成

await axios.post($env.URL, input, axiosConfig)

而不等待响应并将其分配给变量，那么它就可以正常工作（我不知道为什么，但这样修复了bug）。

英文:

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).

huangapple
  • 本文由 发表于 2023年7月7日 02:09:09
  • 转载请务必保留本文链接：https://go.coder-hub.com/76631499.html
  • backend
  • next.js
  • post
  • trpc
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定