Migrating v9 to v10 - - using the client?

Ddang

6/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);

GgwaiLoFi

6/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
}