dang
dang13mo ago

Migrating v9 to v10 - - using the client?

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?
3 Replies
Dani;
Dani;13mo ago
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);
Nick
Nick13mo ago
@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
Dani;
Dani;13mo ago
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
}