onFinish callback values type

foolish-indigo · 2024-06-12T03:39:55.366Z

@kapa.ai how can I statically type the values prop on antd onFinish callback prop?

K

kapa.ai•6/12/24, 3:39 AM

Hi @amvdxc. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•6/12/24, 3:40 AM

----------------------
To statically type the

values

values

prop in the

onFinish

onFinish

callback for an Ant Design form using Refine, you can define a TypeScript interface for the form values and use it in the

onFinish

onFinish

function. Here is an example based on the provided knowledge sources:

Define an interface for your form values.
Use this interface to type the
```
values
```
```
values
```
parameter in the
```
onFinish
```
```
onFinish
```
function.

Here is a complete example:

import { Create, useForm } from "@refinedev/antd";  
import { Form, Input } from "antd";  
import React from "react";  

// Define an interface for the form values
interface UserFormValues {
  name: string;
  surname: string;
}

export const UserCreate: React.FC = () => {  
  const { formProps, saveButtonProps, onFinish } = useForm();  
  
  const handleOnFinish = (values: UserFormValues) => {  
    onFinish({  
      fullName: `${values.name} ${values.surname}`,  
    });  
  };  
  
  return (  
    <Create saveButtonProps={saveButtonProps}>  
      <Form {...formProps} onFinish={handleOnFinish} layout="vertical">  
        <Form.Item label="Name" name="name">  
          <Input />  
        </Form.Item>  
        <Form.Item label="Surname" name="surname">  
          <Input />  
        </Form.Item>  
      </Form>  
    </Create>  
  );  
};

import { Create, useForm } from "@refinedev/antd";  
import { Form, Input } from "antd";  
import React from "react";  

// Define an interface for the form values
interface UserFormValues {
  name: string;
  surname: string;
}

export const UserCreate: React.FC = () => {  
  const { formProps, saveButtonProps, onFinish } = useForm();  
  
  const handleOnFinish = (values: UserFormValues) => {  
    onFinish({  
      fullName: `${values.name} ${values.surname}`,  
    });  
  };  
  
  return (  
    <Create saveButtonProps={saveButtonProps}>  
      <Form {...formProps} onFinish={handleOnFinish} layout="vertical">  
        <Form.Item label="Name" name="name">  
          <Input />  
        </Form.Item>  
        <Form.Item label="Surname" name="surname">  
          <Input />  
        </Form.Item>  
      </Form>  
    </Create>  
  );  
};

import { Create, useForm } from "@refinedev/antd";  
import { Form, Input } from "antd";  
import React from "react";  

// Define an interface for the form values
interface UserFormValues {
  name: string;
  surname: string;
}

export const UserCreate: React.FC = () => {  
  const { formProps, saveButtonProps, onFinish } = useForm();  
  
  const handleOnFinish = (values: UserFormValues) => {  
    onFinish({  
      fullName: `${values.name} ${values.surname}`,  
    });  
  };  
  
  return (  
    <Create saveButtonProps={saveButtonProps}>  
      <Form {...formProps} onFinish={handleOnFinish} layout="vertical">  
        <Form.Item label="Name" name="name">  
          <Input />  
        </Form.Item>  
        <Form.Item label="Surname" name="surname">  
          <Input />  
        </Form.Item>  
      </Form>  
    </Create>  
  );  
};

import { Create, useForm } from "@refinedev/antd";  
import { Form, Input } from "antd";  
import React from "react";  

// Define an interface for the form values
interface UserFormValues {
  name: string;
  surname: string;
}

export const UserCreate: React.FC = () => {  
  const { formProps, saveButtonProps, onFinish } = useForm();  
  
  const handleOnFinish = (values: UserFormValues) => {  
    onFinish({  
      fullName: `${values.name} ${values.surname}`,  
    });  
  };  
  
  return (  
    <Create saveButtonProps={saveButtonProps}>  
      <Form {...formProps} onFinish={handleOnFinish} layout="vertical">  
        <Form.Item label="Name" name="name">  
          <Input />  
        </Form.Item>  
        <Form.Item label="Surname" name="surname">  
          <Input />  
        </Form.Item>  
      </Form>  
    </Create>  
  );  
};

In this example:

The
```
UserFormValues
```
UserFormValues
```
UserFormValues
```
UserFormValues
interface defines the shape of the form values.
The
```
handleOnFinish
```
handleOnFinish
```
handleOnFinish
```
handleOnFinish
function is typed with
```
UserFormValues
```
UserFormValues
```
UserFormValues
```
UserFormValues
to ensure that the
```
values
```
```
values
```
parameter conforms to this shape.

This approach ensures that TypeScript will enforce the correct types for the form values, providing better type safety and autocompletion in your code editor.

K

kapa.ai•6/12/24, 3:40 AM

For more details, you can refer to the Refine documentation on
useForm
useForm
(https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#how-can-i-change-the-form-data-before-submitting-it-to-the-api).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•6/12/24, 3:40 AM

@705425032960016475 kapa.ai is still learning and improving, please let us know how it did by reacting below

F

foolish-indigoOP•6/12/24, 3:41 AM

@kapa.ai how can I use a type generated from graphql codegen?

K

kapa.ai•6/12/24, 3:41 AM

Let me check the knowledge base for you. One moment!

K

kapa.ai•6/12/24, 3:41 AM

----------------------
To use a type generated from GraphQL Code Generator in your Refine application, follow these steps:

Generate the Types: First, ensure you have set up GraphQL Code Generator to generate TypeScript types from your GraphQL schema. You can follow the instructions provided in the knowledge sources to set up the code generation.
**Install GraphQL Code Generator**: Install the necessary packages:```bash npm i -D @graphql-codegen/cli@5 @graphql-codegen/typescript@4 @graphql-codegen/import-types-preset@3```
**Create a Configuration File**: Add a `graphql.config.ts` file to the root of your project. Here is an example configuration:```typescript import type { IGraphQLConfig } from "graphql-config"; const config: IGraphQLConfig = { schema: "<https://flowing-mammal-24.hasura.app/v1/graphql",> extensions: { codegen: { hooks: { afterOneFileWrite: ["eslint --fix", "prettier --write"], }, generates: { "src/graphql/schema.types.ts": { plugins: ["typescript"], config: { skipTypename: true, enumsAsTypes: true, }, }, "src/graphql/types.ts": { preset: "import-types", documents: ["src/**/*.{ts,tsx}"], plugins: ["typescript-operations"], config: { skipTypename: true, enumsAsTypes: true, preResolveTypes: false, useTypeImports: true, }, presetConfig: { typesPath: "./schema.types", }, }, }, }, }, }; export default config;```

K

kapa.ai•6/12/24, 3:41 AM

**Add a Script to `package.json`**: Add the following script to your `package.json` file:```json { "scripts": { "codegen": "graphql-codegen --config ./graphql.config.ts" } }```
**Run the Code Generation**: Run the following command to generate your types:```bash npm run codegen```
**Use the Generated Types**: Once the types are generated, you can import and use them in your Refine application. For example, if you have a generated type `User`, you can use it as follows:```typescript import { User } from "./graphql/types"; const handleOnFinish = (values: User) => { // Use the values with the User type console.log(values); };```

By following these steps, you can integrate the types generated by GraphQL Code Generator into your Refine application, ensuring type safety and better developer experience.

For more details, you can refer to the Refine documentation on using GraphQL Code Generator (https://refine.dev/docs/data/packages/hasura/#developer-experience) and the GraphQL Code Generator Documentation (https://the-guild.dev/graphql/codegen/docs/getting-started).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•6/12/24, 3:41 AM

@705425032960016475 kapa.ai is still learning and improving, please let us know how it did by reacting below