how to get the type of variables in data provider

How to get the type of variables in data provider, suppose I call useForm hook

3 Replies

Hi @TerryPan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To get the type of variables in a data provider when using the useForm hook, you can utilize the TVariables type parameter. This type parameter allows you to define the shape of the variables that will be used in your form. Here is an example of how you can define and use the TVariables type parameter with the useForm hook:

import { useForm } from "@refinedev/core";
import { HttpError } from "@refinedev/core/interfaces";

// Define your variables type
interface MyFormVariables {
    title: string;
    description: string;
}

const { formProps } = useForm<
    BaseRecord, // TQueryFnData
    HttpError,  // TError
    MyFormVariables // TVariables
>({
    // Your form configuration here
});

import { useForm } from "@refinedev/core";
import { HttpError } from "@refinedev/core/interfaces";

// Define your variables type
interface MyFormVariables {
    title: string;
    description: string;
}

const { formProps } = useForm<
    BaseRecord, // TQueryFnData
    HttpError,  // TError
    MyFormVariables // TVariables
>({
    // Your form configuration here
});

In this example, MyFormVariables is the type that defines the shape of the variables you expect in your form. By passing it as the third type parameter to useForm, you ensure that the form will use this type for its variables. For more detailed information, you can refer to the useForm API Reference (https://refine.dev/docs/data/hooks/use-form/#type-parameters) in the refine documentation. Additionally, if you are using the @refinedev/hasura package, you can use the GetVariables utility type to extract the type of variables from your queries or mutations. Here is an example:

import { useForm } from "@refinedev/core";
import { GetVariables } from "@refinedev/hasura";
import { PostEditVariables } from "src/graphql/types";
import { POST_EDIT_MUTATION } from "./queries";

const { formProps } = useForm<
    GetFields<PostEditMutation>, // TQueryFnData
    HttpError,  // TError
    GetVariables<PostEditVariables> // TVariables
>({
    meta: { gqlMutation: POST_EDIT_MUTATION },
});

import { useForm } from "@refinedev/core";
import { GetVariables } from "@refinedev/hasura";
import { PostEditVariables } from "src/graphql/types";
import { POST_EDIT_MUTATION } from "./queries";

const { formProps } = useForm<
    GetFields<PostEditMutation>, // TQueryFnData
    HttpError,  // TError
    GetVariables<PostEditVariables> // TVariables
>({
    meta: { gqlMutation: POST_EDIT_MUTATION },
});

In this example, GetVariables<PostEditVariables> is used to extract the type of variables from the PostEditVariables type. For more information on using utility types with Hasura, you can refer to the Usage with graphql-tag (https://refine.dev/docs/data/packages/hasura/#usage-with-graphql-tag) section in the refine documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

ambitious-aquaOP•7mo ago

I want to access the typescript type of variables parameter from one of my data provider method update. However, refine does not seem automatically infer the type defined in useForm hook I want to access the typescript type of variables parameter from one of my data provider method update. However, refine does not seem automatically infer the type defined in useForm hook how do i do it?

how to get the type of variables in data provider

Did you find this page helpful?