As I integrate mutations using tRPC and React Query to optimistically update my UI upon adding a new item, I've encountered an issue.
The problem lies in the query I'm updating, which requires specific properties like auto-generated IDs or database-related relationships like tags. Is there a way to maintain type safety while utilizing the data passed into the onMutate callback without creating temporary data just to meet type constraints? This is how my onMutate function currently looks:
onMutate: (data) => {
const previousJobs = utils.jobs.getAll.getData();
if (previousJobs) {
utils.jobs.getAll.setData((() => undefined)(),
[...previousJobs, { ...data, status: JobStatus.OPEN, priority: JobPriority.NO_PRIORITY, id: "temp", created_at: new Date(), updated_at: new Date(), team_id: "temp", user_id: "temp" }]
);
}
},
This is the error message I'm encountering:
Type '{ status: "OPEN"; priority: "NO_PRIORITY"; id: string; created_at: Date; updated_at: Date; team_id: string; user_id: string; salary: number; title: string; office_type: string; description: string; due_date: Date; }' is missing the following properties from type '{ user: User & { view: { state: ViewState; }[]; }; _count: { tags: number; candidates: number; }; tags: { id: string; value: string; color: string; }[]; }'