Refine•2y 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

kapa.ai•7/1/24, 4:40 AM

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

kapa.ai•7/1/24, 4:41 AM

----------------------
To access the TypeScript type of the

variables

variables

parameter from a data provider method like

update

update

, you can use the GetVariablesGetVariables 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 GetVariablesGetVariables to infer the type of the

variables

variables

parameter:

**Define your mutation**:```graphql mutation PostCreate($object: posts_insert_input!) { insert_posts_one(object: $object) { id } }```
**Generate the type for variables**:```typescript export type PostCreateVariables = Types.Exact<{ object: Types.Posts_Insert_Input; }>;```
**Use `GetVariables` to convert it**:```typescript 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

variables

parameter. You can then use this type in your

useForm

useForm

hook or any other place where you need to specify the type of

variables

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

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 },
});

kapa.ai•7/1/24, 4:41 AM

This ensures that the

variables

variables

parameter is correctly typed throughout your application.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

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

kapa.ai•7/1/24, 4:41 AM

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

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 }, });