Beginner Client Problems

Node 21, npm 10.2.4, tRPC 10, from a create-t3-app run yesterday. I've got a zod validator create by drizzle-zod, for inserting into a table. There is a .omit() call to remove fields not allowed to be set by my user. I'm using this in a publicProcedure as the argument to .input(TableValidator), and there's a .mutation() that inserts the data into the database. I have also used a z.infer<typeof TableValidator> to get a type for this data, which I'm using on the client to coerce the single data structure I'm using as test data to that type, to use as an argument to the .useMutation() call. My editor thinks that the data structure type does not match the expected input type of the .useMutation(). The error message reads: Type { command: "add" | "remove"; argument: string }' has no properties in common with type 'UseTRPCMutationOptions<{ command: "add" | "remove"; argument string; },TR{CCLientErrorLike<BuildProcedure<"mutation", { _config: RootConfig<{ ctx { db: BetterSQLite3Database<...>; }; meta: object; errorShape { ...; }; transfor...' and the parameter type. How do I go about finding what I have failed to understand?
Solution:
Our docs also will have examples
R
rik59d ago
Further details: schema.ts:
export const workItems = createTable(
"workItems",
{
id: int("id", { mode: "number" }).primaryKey({ autoIncrement: true }).notNull(),
command: text("command", { enum: ["add", "remove"] }).notNull(),
actionTime: int("actionTime", { mode: "timestamp"}).default(sql`CURRENT_TIME`).notNull(),
duration: int("duration", { mode: "number"}),
machineName: text("machineName").notNull(),
actualMachineName: text("actualMachineName"),
exceptionString: text("exceptionString"),
ticket: text("name", { length: 12 }).notNull(),
}
);

export const insertWorkItemSchema = createInsertSchema(workItems)
.omit({ id: true, actualMachineName: true, exceptionString: true});
export type workItemType = z.infer<typeof insertWorkItemSchema>;
export const workItems = createTable(
"workItems",
{
id: int("id", { mode: "number" }).primaryKey({ autoIncrement: true }).notNull(),
command: text("command", { enum: ["add", "remove"] }).notNull(),
actionTime: int("actionTime", { mode: "timestamp"}).default(sql`CURRENT_TIME`).notNull(),
duration: int("duration", { mode: "number"}),
machineName: text("machineName").notNull(),
actualMachineName: text("actualMachineName"),
exceptionString: text("exceptionString"),
ticket: text("name", { length: 12 }).notNull(),
}
);

export const insertWorkItemSchema = createInsertSchema(workItems)
.omit({ id: true, actualMachineName: true, exceptionString: true});
export type workItemType = z.infer<typeof insertWorkItemSchema>;
usbDeviceControl.ts:
export const usbDeviceControlRouter = createTRPCRouter({
addCommand: publicProcedure
.input(insertWorkItemSchema)
.mutation(({ ctx, input }) => {
return ctx.db.insert(workItems).values(input).returning({ insertedId: workItems.id});
}),
});
export const usbDeviceControlRouter = createTRPCRouter({
addCommand: publicProcedure
.input(insertWorkItemSchema)
.mutation(({ ctx, input }) => {
return ctx.db.insert(workItems).values(input).returning({ insertedId: workItems.id});
}),
});
root.ts:
export const appRouter = createTRPCRouter({
usbDeviceControl: usbDeviceControlRouter,
});
export const appRouter = createTRPCRouter({
usbDeviceControl: usbDeviceControlRouter,
});
Client in addWorkItem.ts, to as a standalone client, to add items to test:
import type { workItemType } from "~/server/db/schema";
import { api } from "~/utils/api";

export function addWorkItem(workItem: workItemType){
api.usbDeviceControl.addCommand.useMutation(workItem);
}

const data = {
command: "add",
actionTime: new Date(),
machineName: 'test',
ticket: 'test ticket'
} as workItemType;


addWorkItem(data)
import type { workItemType } from "~/server/db/schema";
import { api } from "~/utils/api";

export function addWorkItem(workItem: workItemType){
api.usbDeviceControl.addCommand.useMutation(workItem);
}

const data = {
command: "add",
actionTime: new Date(),
machineName: 'test',
ticket: 'test ticket'
} as workItemType;


addWorkItem(data)
addWorkItem.ts will be run by tsx, in the dev phase.
No description
N
Nick59d ago
You need to have a read of the react query docs because that’s not how you use useMutation
Solution
N
Nick59d ago
Our docs also will have examples
R
rik59d ago
aha. The createTRPCProxyClient call was my stumbling block. That and having been redirected to the v11 docs without realizing it. Thank you for the help.
More Posts
How to deal with breaking backend version releases during active session?What is the best practice to deal with errors that occur if the backend changes but the frontend bunuseMutation() runs 3 timesHello, I have this weird problem that all my mutations across the app runs 3 times I don't know whyHow to protect against Cross Site Request Forgery (CSRF)How can I protect against CSRF attacks when using tRPC on the client? Usually frameworks would inclutRPC doesn't explicitly check Content-TypeOWASP recommends explicitly checking the Content-Type header to be the expected one, but when I passCreate a typescript type that refers to a useQuery hook dynamicallyI'm trying to create a typescript type that generically refers to a useQuery hook (e.g. I am tryingtRPC Options Method not Allow in Vercel Next.jsI've been getting this error and I have already added CORS in my projects, in initializing the routeBest way to update a TRPC useQuery response without refetchingHey, I currently have a trpc useQuery endpoint which retrieves a series of form submissions for a uWhat is a useSuspenseQuery?Hi, I'm wondering what a useSuspenseQuery is, im looking at the docs but it doesn't explain it anywhNo "mutation"-procedure on pathHello all, I am using the latest version of TRPC on my client and server. I am using React Query onis there a better way to do this?```js let query; let params; switch (getWhat) { case "posts": query = api.user.userPHow to access the query cache data?I want to be able to use a data from already queried data as an initial data of another query. Is thThoughts on how to integrate t3 app, connectkit web3 auth, nextjs middleware, and trpcI am prototyping an application using t3 app with trpc, connectkit web3 auth. I am wanting to use nonError callback typeI want to have a callback onError passed from parent component to the child which has mutation call.Can I perform react query queries without using a trpc procedure, using useQuery standaloneHey, I need to perform a client site request, and I can't implement it with TRPC, so can I use regulTest React component using trpc client and `useSuspenseQuery`Hello ! I'm trying to test my React component that's querying through a tRPC client and `useSuspensHow to extract mutation typeIs it possible to extract mutation type? I would like to pass a mutation trigger to the parent com