exotic-emerald•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"

9 Replies

exotic-emerald•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;

relaxed-coral•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.

exotic-emerald•2y ago

@yildirayunlu alright, I'll create it now

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...

exotic-emerald•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•2y ago

Unfortunately 😦 Do you want to create a PR? 😅

exotic-emerald•2y ago

Idk, maybe when I go to vacation and get bored. For now I'll keep a comment and any. Thanks though

Omer•2y ago

Thank you. Don't worries. We can fix it this week. I will let you know 🔥

exotic-emerald•2y ago

wow, that's pretty optimistic, heh) thank you