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
E
extended-salmonโ€ข464d 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;
A
apparent-cyanโ€ข464d 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.
E
extended-salmonโ€ข464d ago
@yildirayunlu alright, I'll create it now
O
Omerโ€ข464d 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...
E
extended-salmonโ€ข464d 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
O
Omerโ€ข464d ago
Unfortunately ๐Ÿ˜ฆ Do you want to create a PR? ๐Ÿ˜…
E
extended-salmonโ€ข464d ago
Idk, maybe when I go to vacation and get bored. For now I'll keep a comment and any. Thanks though
O
Omerโ€ข464d ago
Thank you. Don't worries. We can fix it this week. I will let you know ๐Ÿ”ฅ
E
extended-salmonโ€ข464d ago
wow, that's pretty optimistic, heh) thank you
More Posts
How to use `setFilters` from useTable for custom filter buttons?I I am trying to create a button that can increment or decrement a date value as shown on the screenHow to disable the upload when clicking on the preview button of the Dragger?<Dragger {...props} maxCount={1} style={{ background: "white" }} accDo resource interfaces have to be interfaces?Hi! I've followed the documentation while creating a Refine app and when I sent it for review one ofChange content-type depending on we need to edit or to create a ressourceI implemented the edit and the create possibility in my refine application. My API need the `applicaMulti level menu without nested URLI am using the following document to create nested items in the sidebar, but the URL of the nested ipermanent filter not getting applied idf its nestedthis is useTAble const { tableProps, setFilters } = useTable({ resource: "packages", metaDaI have a form field which is a nested Object how can I use `useDrawerForm` to create entry?I have a form field which would have dynamic fields based on an Object Array something like this [{'export 'App' (reexported as 'App') was not found in 'antd'After I have updated my refine-antd package from ``` "@pankod/refine-antd": "^4.1.0", "@pankod/refuseDrawerForm with additional parametersHi there, I am trying to use `useDrawerForm` . I have cards for different product type/categories. Atype 'FormPropsType'Getting this error message when following the guide - ERROR in src/App.tsx:81:17 TS2322: Type '{ iniuseTable Typing error is unkownGetting full typing expect for `error` : ```js import { useTable } from "@pankod/refine-react-table"BackdndHello there! Iยดm back on working on my project with Refine. The thing is that I chose strapiv4 as baPersistQueryClientHi! I would like to try using https://tanstack.com/query/v4/docs/react/plugins/persistQueryClient wiqueryOptions.enabledI am using Hasura/GraphQL with Ant Design and my hooks appear to still run queries even if `queryOptHey there I m having a hard time workingHey there! I'm having a hard time working around useTable() or useList(), such that the api I'm usinHello I have an api endpoint with parentHello, I have an api endpoint with parent paths, like api/v1/admin/organisations....when using refin404 Page for edit resource screenIs there a way to display a 404 error page if a single resource returns 404 as a status code? /postHi everyone ๐Ÿ‘‹ Is it possible to useHi everyone ๐Ÿ‘‹ Is it possible to use hydra API response directly in refine or we can juste use jsonHow to modify json before sending it to backend APII have a Form.Item that is only for UI purposes. This is getting included in the backend JSON requesMutation ModeHello i am calling a edit url like `http://localhost:3000/financialplans/edit/20` 20 is an invalid