continuing-cyan•6mo ago

Get the inferred type of Variables from data provider

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

2 Replies

kapa.ai•6mo ago

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 access the TypeScript type of the variables parameter from a data provider method like update, you can use the GetVariables utility type provided by refine. This utility type helps extract the type of variables from your queries or mutations. Here's an example of how you can use GetVariables to infer the type of the variables parameter: 1. Define your mutation:

    mutation PostCreate($object: posts_insert_input!) {  
      insert_posts_one(object: $object) {  
        id  
      }  
    }

    mutation PostCreate($object: posts_insert_input!) {  
      insert_posts_one(object: $object) {  
        id  
      }  
    }

2. Generate the type for variables:

    export type PostCreateVariables = Types.Exact<{  
      object: Types.Posts_Insert_Input;  
    }>;

    export type PostCreateVariables = Types.Exact<{  
      object: Types.Posts_Insert_Input;  
    }>;

3. Use GetVariables to convert it:

    import { GetVariables } from "@refinedev/hasura";  
    
    type PostCreateVariables = GetVariables<PostCreateVariables>;  
    
    PostCreateVariables; // { title: string; content: string; }

    import { GetVariables } from "@refinedev/hasura";  
    
    type PostCreateVariables = GetVariables<PostCreateVariables>;  
    
    PostCreateVariables; // { title: string; content: string; }

This will help you get the inferred type of the variables parameter. You can then use this type in your useForm hook or any other place where you need to specify the type of variables. For more information, you can refer to the GetVariables documentation (https://refine.dev/docs/data/packages/hasura/#getvariables). If you need to use this in a useForm hook, you can do something like this:

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

const { formProps } = useForm<
  GetFields<PostCreateMutation>,
  HttpError,
  GetVariables<PostCreateVariables>
>({
  meta: { gqlMutation: POST_CREATE_MUTATION },
});

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

const { formProps } = useForm<
  GetFields<PostCreateMutation>,
  HttpError,
  GetVariables<PostCreateVariables>
>({
  meta: { gqlMutation: POST_CREATE_MUTATION },
});

This ensures that the variables parameter is correctly typed throughout your application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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