quickest-silver
quickest-silver•2y ago

How to submit different data when using useForm with Typescript?

I have an Edit/Create page for my resource and I use Typescript. I wrote code according to docs, but my submit form has to be different from what I get as fetched resource values. I created a separate type for submit form, but I can't fit it into existing code, I don't understand it. How do I submit a form which has a different type from resource type? I made it as "any" first, but it will be of type FeatureContent. So I need the type FeatureContentEditForm to submit, but I can't. I'll share code of types on comments upd: the error at the bottom says "Argument of type T is not assignable to type B"
No description
9 Replies
quickest-silver
quickest-silver•2y ago
Here are the types that are used
type PlainFilters = {
type: 'PLAIN';
filters: { includedPosts: string[]; hashtags: string[] };
};

type SpecialFilters = {
type: 'SPECIAL';
filters: { postsFeed: 'NEWEST' | 'MOST_LIKES'; excludedPosts: string[] };
};

type FiltersByType = PlainFilters | SpecialFilters;
export type FeatureContent = {
id: string;
data: {
type: string;
speed: number;
thumbnails: string[];
index: number;
thumbnailUrls: string[];
name: string;
disabled: boolean;
} & FiltersByType;
};

export type FeatureContentEditForm = {
type: string;
speed: number;
thumbnails: string[];
name: string;
disabled: boolean;
} & FiltersByType;
type PlainFilters = {
type: 'PLAIN';
filters: { includedPosts: string[]; hashtags: string[] };
};

type SpecialFilters = {
type: 'SPECIAL';
filters: { postsFeed: 'NEWEST' | 'MOST_LIKES'; excludedPosts: string[] };
};

type FiltersByType = PlainFilters | SpecialFilters;
export type FeatureContent = {
id: string;
data: {
type: string;
speed: number;
thumbnails: string[];
index: number;
thumbnailUrls: string[];
name: string;
disabled: boolean;
} & FiltersByType;
};

export type FeatureContentEditForm = {
type: string;
speed: number;
thumbnails: string[];
name: string;
disabled: boolean;
} & FiltersByType;
wise-white
wise-white•2y ago
Hey @metammodern Let's examine this issue. But I think this problem is not related to refine. We would love to help if you send a stackbiltz or codesandbox project where we can reproduce the problem.
quickest-silver
quickest-silver•2y ago
@yildirayunlu alright, I'll create it now
Omer
Omer•2y ago
Hey @metammodern , Does your problem look like this? 👀 https://github.com/refinedev/refine/discussions/2719
GitHub
useForm and derivatives need a clear distinction between props to b...
The Problem: Workarounds around this limitation blur one's programmer intention and make code less clear in terms of type safety and just adding code bloat. Question the use of utility hook...
quickest-silver
quickest-silver•2y ago
@Omer yes, exactly! No solution for that yet? @yildirayunlu the issue already was noticed, but I created an example anyway https://stackblitz.com/edit/github-rop7ql?file=src/pages/posts/edit.tsx
Refine Form React Hook Form Use Form Example - StackBlitz
Run official live example code for Refine Form React Hook Form Use Form, created by Refinedev on StackBlitz
Omer
Omer•2y ago
Unfortunately 😦 Do you want to create a PR? 😅
quickest-silver
quickest-silver•2y ago
Idk, maybe when I go to vacation and get bored. For now I'll keep a comment and any. Thanks though
Omer
Omer•2y ago
Thank you. Don't worries. We can fix it this week. I will let you know 🔥
quickest-silver
quickest-silver•2y ago
wow, that's pretty optimistic, heh) thank you