Error with AppRouter type mismatch in Deno
Hi everyone! I am trying to fix some type issues with a tRPC project. I am using Deno 2.0. The server and client are separate projects (but in a monorepo). The server is using the hono middleware to host the /trpc endpoint. The client is a vite react static site. I am using the react query integration.
Here is the weird part: Everything is actually fully functional. The vite frontend can tRPC query the backend perfectly fine. However the frontend is complaining about type mismatches. Not having working types kinda defeats the purpose of tRPC.
client/src/utils/api.ts...
Typing on trpc.createClient?
Basically I want an asyncQuery I can call later, the way asyncMutate works. I can do this:
```ts
const profileData = await trpcClient.query(
'seer.evolution.getProfile',
'name'...
generate types and publish them in a npm package
hey hey,
i am a trpc beginner.
i was able to get trpc running in a nx monorepo.
now i need to publish my trpc router types as a npm package, so that it can be installed and consumed via npm in another one of our projects....
withTRPC not working in RootLayout
I followed the T3 example to set up TRCP in my project https://create.t3.gg/en/examples. I am using the newer next file strucuture with the app folder, no pages folder, no _app file, but a root app/layout.tsx file. I want to use withTRCP on the export of the root layout. However I get the error:
Error: useState only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component. Do I...Using superjson transformer makes data empty
Hi!
I've been developing using trpc for the past month or so. It's been a smooth sail so far. Suddenly now the
.data property on trpc queries are empty.
Checking the network tab the data is definitely there in the response, it's just undefined when accessing query.data. After some time debugging, I removed the superjson transformer from client & server, and now things are working again....Client unable to send requests on certain internet providers
Summary
Hi, we built a Expo React Native app with over 350k users with tRPC making calls to our backend edge functions hosted on Vercel's Next.js app.
The issue is that we don't receive the requests for a certain subset of our users in our production environment.
...
How to get mutation onError typescript type
I have two mutations on my frontend that should handle the response in the same way. So I extract the onError function so these two mutations can re-use the logic but I have a problem on how to type the error so the in function handling is pleased with typescript and the onError handler is also pleased.
```ts
// What type of the error should be here?
const onApiError = (error: ???) => {...}...
Server component (createHydrationHelpers) setup with external router
Hello!
Just wondering if anyone has followed the server component setup guide but with an external tRPC router? I'm unable to call
createCaller is the router is deployed externally.
https://trpc.io/docs/client/react/server-components...How to use client and react-query simultaneously?
I'm using this with nextjs app router and i want to have access to both
query and useQuery methods.all my inferred typings on the frontend are `any`
I have a backend trpc router like this:
```typescript
import likeRouter from './like';
import postRouter from './post';...
unstable_concat return type is not been propagate to the input
I have a plugin that fetches all my services.
I am not sure this is the best way it works for me. The problem is that the input type is not updated after the transformation.
Thanks 😃...
what will happen if we do not wrap the client component with hydrate client?
https://trpc.io/docs/client/react/server-components#utilizing-your-api
```
import { trpc } from '~/trpc/server';
import { ClientGreeting } from './client-greeting';...
is it possible to use trpc without the app router?
is there a pattern to define mutations/queries as individual routers and then import an individual router for that procedure into my frontend? the AppRouter type is blowing up the compiler
Why not create queryClient and trpcClient outside of React?
From the docs: https://trpc.io/docs/client/react/setup#4-add-trpc-providers
Relevant excerpt:```jsx
export function App() {
const [queryClient] = useState(() => new QueryClient())...
Solution:
I'm so goddamn stupid, i literally asked the same question this June already: <#1253685017931022347>
And also they even explain this in the docs below the code snippet... I AM INCAPABLE OF READING 🤬...
Invalid hook call using useQuery
Hello, I am trying to implement a common component that accepts a function props that will fetch data from the server. For example, see the code below:
```
export const UsersTable = () => {
return (...
Is it possible to change the base path?
I have my trpc server on an endpoint:
api.examples.com/trpc - this should be the root, and trpc handles anything subsequent.
But querying this with a client, I get the error:
```
TRPCError: No procedure found on path "trpc/me.details"...when using utils.x.y.getData, is there a way to get when the query was fetch / last updated ?
when using utils.x.y.getData, is there a way to get when the query was fetch / last updated ?
"Failed to load response data: No data found for resource with given identifier" in the network tab
I started a new project, but I can't read the results from my queries in the network tab on my browser. This makes the developer experience (DX) poor since I can't see my query calls.
Sometimes (around 20% of the time) it works on Safari, but the JSON formatting looks off (see screenshot). It never works on Chrome.
What's strange is that the queries are fetched properly and when I log the query results in my console in my Next.js app, I can clearly see them....
throw custom error
I use @trpc/client as the backbone of a backend. This backend throws custom exceptions based on httpexception. How can I customize exceptions throw in the client?
```
const client = createTRPCClient<RegistrationAppRouter>({
links: [...
Automatically decode custom errors on client
Hi! We're using tRPC v10.45.2 with React Query in a Next.js app. I'm looking for a nice way to pass custom error payloads to the browser. What I've done so far is have something like this:
```
export type MyAppErrorDetails = { $type: 'ILL_FORMED_BANANA'; shape: BananaShape; } | { $type: 'NOT_HUNGRY' };
export class MyAppError extends TRPCError {...