T
tRPC
Join the tRPC server to ask questions!
Join ServerChannels
onSuccess invalidate
I'm trying to follow along with Theo's T3 tutorial using the latest Next version and the app router. The "setInput("")" and the invalidation don't seem to be working inside of onSuccess, the console.log is being called, what am I missing? Is this supposed to work?
```ts
"use client";
...
React Query client and caller client under one object
Would love to know if it is possible to have caller and react query clients under one object?
I feel like it would be great to go api.cart.getCartItems() in server components that would utilise caller and api.card.getCartItems.useQuery() in client components....
I want to refetch and set the inital data of an useState
Hello guys,
currently i am retrieving the data i use in useState with
How can i set it so initialData in my useState works. this is my current useState line: ```tsx...
SSR, but i want to use somethinng that makes it possible to update the useState on interactions from the user. Im guessing I should use useQuery?How can i set it so initialData in my useState works. this is my current useState line: ```tsx...
Vanilla Client Error Handling
What is the right way to handle errors when using the vanilla client?
If I setup a client like so:
```
import type { Router } from '../../../server/src/routers'...
sidebar search
Please how will I implement a search on the left sidebar to let the items on the search bar be searchable
WS with TRPC
```ts
│ Type '({ req, res, }: { req: Request; res: Response; }) => CreateInnerContextOpts' is not assignable to type 'NodeHTTPCreateContextFn<CreateRouterInner<RootConfig<{ ctx: CreateInnerContextOpts; meta: object; errorShape: { data: { zodError: typeToFlattenedError<any, string> | null; code: "PARSE_ERROR" | ... 13 more ... | "CLIENT_CLOSED_REQUEST"; httpStatus: number; path?: string | undefined; stack?: string | undefined; }; me...'. typescript (2322) [12, 3]
│ Types of parameters '__0' and 'opts' are incompatible.
│ Type 'NodeHTTPCreateContextFnOptions<IncomingMessage, WebSocket>' is not assignable to type '{ req: Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>; res: Response<any, Record<string, any>>; }'.
│ Types of property 'req' are incompatible. ...
tRPC is butchering object types in return types
So if I have a mutation that returns this type
the type that tRPC infers for the mutation is...
{ name?: string }
{ name?: string }
Why my Authorization does not update ?
i have this in
_app.tsx ```export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Head>
<title lang="en">Holistic Drop</title>...TypeError: queryClient.getMutationDefaults is not a function (it is undefined)
Hi!
There's not much code to show here, as I'm really not sure where the error actually occurs.
In my React component I have:...
useQuery never returning or hitting API
I have something off in my configuration, i copied most of the files from the ...
❯ npm create t3-app@latest example app to add to an exisitng app. I am trying to call the simple post.hello and i tis working on the server. but when I call it on the client side like:
const postResult = api.post.hello.useQuery({text:'Hello'});
const postResult = api.post.hello.useQuery({text:'Hello'});
Type 'QueryClient' is missing the following properties from type 'QueryClient': queryCache, mutation
I am trying to setup a new project and doing my first client side query and getting this error:
...
Type 'QueryClient' is missing the following properties from type 'QueryClient': queryCache, mutationCache, logger, defaultOptions, and 4 more.
Type 'QueryClient' is missing the following properties from type 'QueryClient': queryCache, mutationCache, logger, defaultOptions, and 4 more.
Solution:
This was due to a mismatch in the react-query version on my project.
trpc mutation call stuck
I have an issue with a simple mutation procedure:
`getPublicUser: publicProcedure
.input(z.object({
walletAddress: z.string()...
Create client based on OpenAPI
Hi! I am running a golang server with an openapi spec and would love to use trpc client in my frontend with my golang api. Is it possible to create a trpc client based on open API?
TRPC with react query, getting error twice?
When i am try to show TRPC error in the client side with react-query, i am getting error twice from ...batch=1&....., any idea?
Error building create-t3-app: Page couldn't be rendered statically because it used `cookies`
I get the following error when building create-t3-app:
...
TRPCClientError: Dynamic server usage: Page couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error
TRPCClientError: Dynamic server usage: Page couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error
Compressing parts of query/mutation input
Hi, I'm using trpc with the proxyclient for typesafety but recently hit an obstacle where some strings are so large (I believe that is the error at the very least) that I can't send the payload without getting Unexpected end of JSON input. Has anyone seen this before and if yes, how did you solve it?
I am solving it now by compressing parts of the query on the way in and out but not a fan since it's sort of a hidden implementation detail. Can I centralize this somewhere? https://discord.com/channels/867764511159091230/1172197806233092096 <- is something like this the approach to go?...
`useSuspenseQuery` still runs a fetch on SSR even when setting `ssr: false` in the api config
Beside double-fetching, this causes issues during rendering if you have auth on your routes as the SSR server doesn't seem to pass through the cookies to the tRPC route.
Using Next.js 14.0.3 with the pages directory.
Repro here: https://github.com/relsunkaev/trpc-ssr-suspense-repro...
Solution:
Answered in the issue - not a bug. Use
Suspense.CSROnly from @suspensive/reactUnsubscription callback triggering immediately
Hey!
I am currently using Bun that's queried via a Vue application.
For some reason the unsubscribe callback in my observable's return function always triggers immediately. If I don't clear my event from the event emitter, I can see that data does reach the client....
Multiple optimistic updates and old data from refetches
Hi all, I'm new to tRPC and React Query and I'm just trying to get my head around what exactly I'm doing wrong when trying to implement optimistic updates.
To help illustrate the issue I'm having, I have a list of items that are deletable, and I want to be able to optimistically update the UI when they're deleted, which I have working, except for this one bug... When I delete one item, then delete a second item about 1-2 seconds later (i.e. before the first deletion has a chance to refetch the server data) I notice that the UI updates from the server with the state of only the first deletion, hence the UI optimistically deletes both items, then refetches, which shows one of the deleted items still there, then shortly after it correctly updates again to the correct state after the 2nd refetch.
To solve this issue, I thought that I should be using
.cancel() to prevent out-of-date data being returned by refetches that came before the latter mutation, but for whatever reason, that isn't working. (Likely cause I'm stoopid 🙃)...Pass headers when prefetching using helpers
I dont see a way to pass headers and cookies with either fetch/prefetch methods from the ssr helper.
They accept a context option but it is typed as a
Record<string.., so i'm not sure what it does.
```ts
export const getServerSideProps = async ( ) => { ...