Getting this error: Cannot read properties of undefined (reading 'upsert')
I'm using the T3 Stack. And I'm fairly new to tRPC so I am not sure what this error is caused.
I'm getting data from chess.com and monkey type using their APIs, the request is all good, and I'm trying to save the data in a prisma db.
In my tRPC function, I'm using one private procedure with a mutation that has 2 upserts that each change 2 different models in prisma.
...
Stuck trying to utilize useQuery to fetch some data on form submission
I'm trying to call a procedure in trpc through the use of useQuery in react upon form submission. So essentially I want to send the form data to the procedure then have it return some information. I'm not sure where to start on this. Does anyone have some guidance or a very basic example that could point me in the right direction?
Im currently doing something similar with useMutation but in this case im actually changing data in the db. I can just utilize useMutation here to fetch the information I need, however this doesn't seem like its really the right way to approach this. Would love some insight on how to handle this properly. Thanks...
createTRPCNext type error
Hi everyone. So I started creating nextjs app with trpc + prisma set up. and when i use my AppRouter type with createTRPCNext I get "The types returned by createCaller(...) are incompatible between these types." error
```
Type 'CreateRouterInner<RootConfig<{ ctx: { user: User | null; prisma: PrismaClient<PrismaClientOptions, never, RejectOnNotFound | RejectPerOperation | undefined>; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>, { ...; }>' does not satisfy the constraint 'Router<AnyRouterDef<AnyRootConfig, any>>'.
The types returned by 'createCaller(...)' are incompatible between these types.
Type '{ query: inferHandlerFn<{}>; mutation: inferHandlerFn<{}>; subscription: inferHandlerFn<{}>; } & DecoratedProcedureRecord<{ auth: CreateRouterInner<RootConfig<{ ctx: { user: User | null; prisma: PrismaClient<...>; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>, { ...; }>; user: CreateRouter...' is not assignable to type '{ query: inferHandlerFn<any>; mutation: inferHandlerFn<any>; subscription: inferHandlerFn<any>; } & DecoratedProcedureRecord<any>'....
Full cache invalidation and timing problem
I'm really enjoying using the full cache invalidation https://trpc.io/docs/reactjs/usecontext#invalidate-full-cache-on-every-mutation
But I'm debugging some timing issues around the
onSuccess call. And I'm not sure which onSuccess call is meant to be called by the await opts.originalFn() in the following snippet. It says it will call the onSuccess defined in the useQuery call. I naively maybe thought it would call the onSuccess defined in the useMutation. But when I try to do some simple console logging, I can't figure out the timing of these calls. Both the originalFn and invalidateQueries calls get fired before any of my onSuccess calls. So it has left me a little confused 🤔
TL;DR; Where do I define the opts.originalFn() getting called here?...Using Next.JS + Fastify
My node environment is Node 18, powered by PNPM.
What's wrong: I have a few requirements for my application. I don't want to use Next's API routes due to me wanting to provide a detailed open api definition to consumers automatically. Not to mention, I prefer building with Fastify. I have considered putting trpc's server on Fastify, but, I have no idea how I would drag this into my Next.JS application. Before I stumbled upon TRPC, I was planning to have an internal API for the frontend that was considered private, but, with TRPC I see there's more possiblities. I'm also planning to host the frontend and backend in different environments. For example, Frontend would be on Vercel, backend on Railway, connected via Environment Variables to point to each other. I'd love some guidance as TRPC is a lot to swallow and process what it's doing....
Error Handling vs Error Formatting
I'm a bit confused from the docs about how I should be handling errors on the server. The Error Handling section refers to handling errors client side right?
More specifically, the ORM I'm using suggests delegating error handling to the server implementation. Where the ORM is throwing an instance of its internal
NotFoundError class, I need to update the response http code to 404 and also hide the data associated with that error in production. Should I be doing this within the errorFormatter?
Thanks!...Cannot find module '@trpc/react-query/server' or its corresponding type declarations
import { createServerSideHelpers } from '@trpc/react-query/server'
import { createServerSideHelpers } from '@trpc/react-query/server'
Procedure with generic input?
Is there a way to define a procedure so that it takes input with type parameters, and returns output depending on the type parameters?
Solution:
Never mind, should have read https://discord.com/channels/867764511159091230/1076696387107967017
Delete item {0: {json:{id: 12324}}}
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?
Query function depends on a variable
In tRPC v10 accessing a specific path is really easy, but because of that I don't control the query key.
I'm using tRPC to fetch data based on user input in a search bar. Tanstack Query docs has a specific bit in the detailing that the variable should be included in the query key. What is the tRPC way of handeling this?
https://tanstack.com/query/latest/docs/react/guides/query-keys#if-your-query-function-depends-on-a-variable-include-it-in-your-query-key
...
'useInfiniteQuery' hook disappeared after moving to Turborepo
I am using Turborepo with Next.js with the following layout, originally a T3 app
-
/apps/app
- /packages/api
The useInfiniteQuery hook seems to have dissapeared after migrating, and I can't get it back....convert the result to date objects
I am not sure if this is even trpcs responsibility but I would like to get my date objects as date objects not strings, the main reason is actually because when I type it on the frontend I am using the prisma client amd it doesn't match up
ECONNREFUSED with TRPC call on Vercel
Anyone run into this before? I just deployed my app to Vercel and I run into this error when I trigger a procedure. Everything works in dev but I'm sure I could be missing some change that's needed for a remote server.
Invalid Val
Does TRPC string input have a limit?
https://prnt.sc/KlXlyoGrzP8P
Edit: It was actually from stripe metadata...
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 react-router for a spa like is described in https://colinhacks.com/essays/building-a-spa-with-nextjs and I'm getting xt-dev.js:20 TRPCClientError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
at TRPCClientError.from (transformResult-6fb67924.mjs:13:1)
at eval (httpBatchLink.mjs:211:48)
. I tried with create-t3-app too which I got the same result. Do you think what I'm doing is feasible ? react-router 6.10 and next with trpc ?...
Solution:
This means your backend is returning a HTML document, most likely the index.html page. It's very common with incorrectly set up web servers
using same query for entries app
How to use same query for many components?
I don't want to request api for many times ;-;
I can't passing by props because I have
Header component that wrapper in Layout component
...Solution:
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.getUser.query('id_bilbo');
const bilbo = await client.getUser.query('id_bilbo');
How to get unwrapped errors out of proxy client
I'm using sveltekit and in order to redirect from SSR you need to throw an error: https://kit.svelte.dev/docs/load#redirects
TRPC wraps all errors in their custom type, so it's not easy to unpack this for svelte without a lot of boilerplate. I tried using custom fetch wrappers or links but it seems this happens further up and I can't easily catch the global error out of trpc (once again without wrapping). Is there an easy way to do this? Thanks!...