onFinish callback values type

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

5 Replies

Hi @amvdxc. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To statically type the values prop in the 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 function. Here is an example based on the provided knowledge sources: 1. Define an interface for your form values. 2. Use this interface to type the values parameter in the 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>  
  );  
};

In this example: - The UserFormValues interface defines the shape of the form values. - The handleOnFinish function is typed with UserFormValues to ensure that the 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. For more details, you can refer to the Refine documentation on 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 :speech_balloon: ----------------------

kapa.ai•4mo ago

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

xenial-black•4mo ago

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

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To use a type generated from GraphQL Code Generator in your Refine application, follow these steps: 1. 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. 2. Install GraphQL Code Generator: Install the necessary packages:

    npm i -D @graphql-codegen/cli@5 @graphql-codegen/typescript@4 @graphql-codegen/import-types-preset@3

    npm i -D @graphql-codegen/cli@5 @graphql-codegen/typescript@4 @graphql-codegen/import-types-preset@3

3. Create a Configuration File: Add a graphql.config.ts file to the root of your project. Here is an example configuration:

    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;

    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;

4. Add a Script to package.json: Add the following script to your package.json file:

    {
      "scripts": {
        "codegen": "graphql-codegen --config ./graphql.config.ts"
      }
    }

    {
      "scripts": {
        "codegen": "graphql-codegen --config ./graphql.config.ts"
      }
    }

5. Run the Code Generation: Run the following command to generate your types:

    npm run codegen

    npm run codegen

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

    import { User } from "./graphql/types";

    const handleOnFinish = (values: User) => {
      // Use the values with the User type
      console.log(values);
    };

    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 :speech_balloon: ----------------------

kapa.ai•4mo ago

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