Delete item {0: {json:{id: 12324}}}

DDevThoughts

4/23/2023

When i try to mutate/delete item with id i am geting this payload {0: {json:{id: 12324}}}, without trpc everything working fine, dont understand where the {0: {json:{id: 12324}}} coming from? what is batch 1?

Nnlucas

4/23/2023

Have you enabled batching on the frontend but not the backend? This is a normal tRPC payload

DDevThoughts

4/23/2023

I did nothing with batching i have normal Nextjs app configured with TRPC. pages/api/[trpc].ts

import { createNextApiHandler } from "@trpc/server/adapters/next";

import { env } from "~/env.mjs";
import { createTRPCContext } from "~/server/api/trpc";
import { appRouter } from "~/server/api/root";

// export API handler
export default createNextApiHandler({
  router: appRouter,
  createContext: createTRPCContext,
  onError:
    env.NODE_ENV === "development"
      ? ({ path, error }) => {
          console.error(

❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}


          );
        }
      : undefined,
});

Nnlucas

4/23/2023

What does you client setup look like? If you're using httpBatchLink you have enabled batching on the frontend

DDevThoughts

4/23/2023

It look like this:


iimport { httpBatchLink, loggerLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
import superjson from "superjson";

import { type AppRouter } from "~/server/api/root";

const getBaseUrl = () => {
  if (typeof window !== "undefined") return ""; // browser should use relative url
  if (process.env.VERCEL_URL) return

https://${process.env.VERCEL_URL}`; // SSR should use vercel url return http://localhost:${process.env.PORT ?? 3000}; // dev SSR should use localhost }; export const api = createTRPCNext<AppRouter>({ config() { return { transformer: superjson, links: [ loggerLink({ enabled: (opts) => process.env.NODE_ENV === "development" || (opts.direction === "down" && opts.result instanceof Error), }), httpBatchLink({ url: ${getBaseUrl()}/api/trpc, }), ], }; }, ssr: false, }); export type RouterInputs = inferRouterInputs<AppRouter>; export type RouterOutputs = inferRouterOutputs<AppRouter>; ` yes, then i can not understand when i am not able to delete item by it id.

Nnlucas

4/23/2023

Nnlucas

4/23/2023

You should enable batching on the backend I think it's actually on by default though What's your error exactly?

DDevThoughts

4/23/2023

I was getting undefind but not error, for some reason it is working now, but unclear why it didn't work. thank you! Btw, what is the best to send server error to the client, if i want to show toast or notification?

Nnlucas

4/23/2023

https://trpc.io/docs/server/error-formatting

DDevThoughts

4/23/2023

Is it a bad to create createTRPCRouter function for every route, like GetAllPost, create, delete, update ? or all the route should be in same file in createTRPCRouter ?

Looking for more? Join the community!

tRPC

Delete item {0: {json:{id: 12324}}}

Join Server

tRPC

Delete item {0: {json:{id: 12324}}}

Join Server

Recommended Posts

Query function depends on a variableIn tRPC v10 accessing a specific path is really easy, but because of that I don't control the query 'useInfiniteQuery' hook disappeared after moving to TurborepoI am using Turborepo with Next.js with the following layout, originally a T3 app - `/apps/app` - `/p convert the result to date objectsI am not sure if this is even trpcs responsibility but I would like to get my date objects as date o ECONNREFUSED with TRPC call on VercelAnyone run into this before? I just deployed my app to Vercel and I run into this error when I trigg Invalid ValDoes TRPC string input have a limit? https://prnt.sc/KlXlyoGrzP8P Edit: It was actually from strip is possible to combine next-minimal-starter with react-router-dom ?Hi, I'm trying to combine https://github.com/trpc/trpc/tree/main/examples/next-minimal-starter and r using same query for entries appHow to use same query for many components? I don't want to request api for many times ;-; I can't p How can I make a direct fetch on a router endpoint from TRPC in NextJS on client?In the documentation you can use the vanilla TRPC client like this: ``` const bilbo = await client How to get unwrapped errors out of proxy clientI'm using sveltekit and in order to redirect from SSR you need to throw an error: https://kit.svelt Can you get the queryClient without using a hook?Can you get the queryClient without using a hook?How can I reset the cursor when using useInfiniteQuery?I have various filters that I can set for the query, but when setting those filters I need to reset How does routing work in tRPC especially when using merged routers?I am having trouble understanding how tRPC lays out routes. Let's say I have the below ```typescrip where is useQuery [key]?Learning trpc, i use to tanstack with queryKey, can not find how that works with trpc, if i want t useInfinieQuery with initialData, Refetch only after second change of inputsHi everyone, I have the problem as stated in the title. My code looks like the following: ```ts Adding tRPC HOC breaks zustandIt seems that adding the trpc hoc breaks my zustand stores initial values and generates bad data. Af Next.js + tRPC, multitenancy, access Next.js Router when setting tRPC headersHey all! I'm writing a multi-tenant solution. Most Next.js pages lie under the `/pages/[tenantKey]/`getInfiniteData returns undefinedI am using the t3-stack. Whenever I am calling getInfiniteData it returns undefined. ``` console.lo Enable both `useQuery` and a raw `query` from the frontend (for use in async validation)Hello everyone, some context: ``` . I'm building a project with a variant of the t3 stack (key point Nextjs http endpoint (no prisma)I have simple pages/api/todoEndpint how do i call this endpoint with trcp? I don't want to use prism Adding clerk auth object to createServerSideHelpersSo I followed clerk's docs for TRPC (https://clerk.com/docs/nextjs/trpc) and I added `auth` to the `