T
tRPC

Migrating v9 to v10 - - using the client?

Migrating v9 to v10 - - using the client?

Ddang6/21/2023
I'm migrating a large project from trpc v9 to v10. There is a section of the code that uses the result of trpc.useContext().client to perform several mutations. For example:
const addMeasurementPromise = client.mutation('measurements.add', { ...data})
const addMeasurementPromise = client.mutation('measurements.add', { ...data})
In v9, the type of the client was TRPCClient<AppRouter>. This is deprecated in v10, but the call stack createTRPCNext -> createFlatProxy -> createReactQueryUtilsProxy -> createTRPCProxyClient appears to still use this type. Is there a replacement type that I should be using instead? Is this pattern fully deprecated within trpc v10, or is there a supported path to creating a mutation that isn't encapsulated in a hook?
DDani;6/21/2023
Do you actually need the type? this would be the v10 way of writing your code
const { client } = trpc.useContext();
const addMeasurementPromise = client.measurements.add.mutate(data);
const { client } = trpc.useContext();
const addMeasurementPromise = client.measurements.add.mutate(data);
GgwaiLoFi6/21/2023
@s.daniel What if that client is being passed as an argument to a component, how would it be typed? previously you could use the TRPCClient type
DDani;6/21/2023
I'd just retrieve the client from the trpc.useContext() in that component personally Unsure what your use case is, you could extract the type using this
// utils/trpc.ts
// keep in mind to only import the type
import type { AppRouter } from '@server/routers/main';
import { CreateTRPCProxyClient } from '@trpc/client';
export type TRPCClient = CreateTRPCProxyClient<AppRouter>;


// Component.tsx
import { TRPCClient } from 'utils/trpc';

type Props = {
client: TRPCCLient
}
// utils/trpc.ts
// keep in mind to only import the type
import type { AppRouter } from '@server/routers/main';
import { CreateTRPCProxyClient } from '@trpc/client';
export type TRPCClient = CreateTRPCProxyClient<AppRouter>;


// Component.tsx
import { TRPCClient } from 'utils/trpc';

type Props = {
client: TRPCCLient
}

Looking for more? Join the community!

T
tRPC

Migrating v9 to v10 - - using the client?

Join Server
Recommended Posts
Using tRPC and something else too? For building a mobile app / public API.A bit noobish, but I'm starting a new project w/ the t3 stack and I'm looking to build a mobile app whats the difference between context and middlewareand which 1 should I use for express session cookiesAxios, ExpressMiddleware and TRPCErrorsWe have an express based TRPC server and our procedures are calling our endpoints using axios. So whbase pathHi, don’t seem to be able to find documentation but is there a way to set the base path of the serveAny Benefit using tRPC for only remote api calls?Hi, does it make sense to use trpc if all I will be doing is calling a remote api? I have set it up Can I connect to a regular node express with socket.io?My idea is that I will host the socketio nodejs server in some server, and then use it with my nextjhow does one actually make trpc/client work with the app routerive been using trpc on the pages router for a while now and ive started putting together a next13 stwhen i deploy frontend trpc fails to compileim trying to deploy my create-react-app with tRPC to Vercel it works perfectly fine on localhosthow to rate limit in trpc express/nodejs server (not nextjs)each prodecure will have different rate limit for IP or sometthing idk maybe whole database will havDisable fetch on load```tsx import React, { useState } from "react"; import { api } from "../utils/api"; const Test = ()is it possible to record the requests on the server side ?I wanted to play them back then on the browser side . I wanted to do server side rendering in reactStreaming responses (eg. for streaming ai chat completion text)Hello! Has anyone used Vercel's `ai` package or any similar libraries which stream their responses wHandling errors on the front-endI'm making a mutation from my front-end and I intentionally throw a new TRPCError on my backend, I cTypeScript Alias Imports don't get resolved ont the ClientI have a Monorepo with a multiple `/packages/*` packages, each has its own `tsconfig.json`. I notic