How to customize a form graphql mutation?

Hi, my app has a graphql backend so i'm using refine's graphql data provider

In the backend, my graphql schema has the createUser mutation wich follows this structure:

mutation($data: CreateUserInput!) {
  createUser(data: $data) {
    id
    firstName
    lastName
    username
    avatar
    roles {
      id
    }
  }
}

mutation($data: CreateUserInput!) {
  createUser(data: $data) {
    id
    firstName
    lastName
    username
    avatar
    roles {
      id
    }
  }
}

mutation($data: CreateUserInput!) {
  createUser(data: $data) {
    id
    firstName
    lastName
    username
    avatar
    roles {
      id
    }
  }
}

mutation($data: CreateUserInput!) {
  createUser(data: $data) {
    id
    firstName
    lastName
    username
    avatar
    roles {
      id
    }
  }
}

In the frontend i'm rendering the next creation form component:

import { IResourceComponentsProps } from "@refinedev/core";
import { Create, useForm } from "@refinedev/mantine";
import { TextInput } from "@mantine/core";

export const UserCreate: React.FC<IResourceComponentsProps> = () => {
    const {
        getInputProps,
        saveButtonProps,
        setFieldValue,
        refineCore: { formLoading },
    } = useForm({
        initialValues: { firstName: "", lastName: "", username: "" },
        refineCoreProps: {
            meta: { fields: ["firstName", "lastName", "username", "avatar"] },
        },
    });

    return (
        <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
            <TextInput
                mt="sm"
                label="First Name"
                {...getInputProps("firstName")}
            />
            <TextInput
                mt="sm"
                label="Last Name"
                {...getInputProps("lastName")}
            />
            <TextInput
                mt="sm"
                label="Username"
                {...getInputProps("username")}
            />
        </Create>
    );
};

import { IResourceComponentsProps } from "@refinedev/core";
import { Create, useForm } from "@refinedev/mantine";
import { TextInput } from "@mantine/core";

export const UserCreate: React.FC<IResourceComponentsProps> = () => {
    const {
        getInputProps,
        saveButtonProps,
        setFieldValue,
        refineCore: { formLoading },
    } = useForm({
        initialValues: { firstName: "", lastName: "", username: "" },
        refineCoreProps: {
            meta: { fields: ["firstName", "lastName", "username", "avatar"] },
        },
    });

    return (
        <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
            <TextInput
                mt="sm"
                label="First Name"
                {...getInputProps("firstName")}
            />
            <TextInput
                mt="sm"
                label="Last Name"
                {...getInputProps("lastName")}
            />
            <TextInput
                mt="sm"
                label="Username"
                {...getInputProps("username")}
            />
        </Create>
    );
};

import { IResourceComponentsProps } from "@refinedev/core";
import { Create, useForm } from "@refinedev/mantine";
import { TextInput } from "@mantine/core";

export const UserCreate: React.FC<IResourceComponentsProps> = () => {
    const {
        getInputProps,
        saveButtonProps,
        setFieldValue,
        refineCore: { formLoading },
    } = useForm({
        initialValues: { firstName: "", lastName: "", username: "" },
        refineCoreProps: {
            meta: { fields: ["firstName", "lastName", "username", "avatar"] },
        },
    });

    return (
        <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
            <TextInput
                mt="sm"
                label="First Name"
                {...getInputProps("firstName")}
            />
            <TextInput
                mt="sm"
                label="Last Name"
                {...getInputProps("lastName")}
            />
            <TextInput
                mt="sm"
                label="Username"
                {...getInputProps("username")}
            />
        </Create>
    );
};

import { IResourceComponentsProps } from "@refinedev/core";
import { Create, useForm } from "@refinedev/mantine";
import { TextInput } from "@mantine/core";

export const UserCreate: React.FC<IResourceComponentsProps> = () => {
    const {
        getInputProps,
        saveButtonProps,
        setFieldValue,
        refineCore: { formLoading },
    } = useForm({
        initialValues: { firstName: "", lastName: "", username: "" },
        refineCoreProps: {
            meta: { fields: ["firstName", "lastName", "username", "avatar"] },
        },
    });

    return (
        <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
            <TextInput
                mt="sm"
                label="First Name"
                {...getInputProps("firstName")}
            />
            <TextInput
                mt="sm"
                label="Last Name"
                {...getInputProps("lastName")}
            />
            <TextInput
                mt="sm"
                label="Username"
                {...getInputProps("username")}
            />
        </Create>
    );
};

But when i click on submit, the following (wrong) mutation is sended to the backend:

  mutation($input: createUserInput) {
  createUser(input: $input) {
    firstName
    lastName
    username
    avatar
  }
}

  mutation($input: createUserInput) {
  createUser(input: $input) {
    firstName
    lastName
    username
    avatar
  }
}

  mutation($input: createUserInput) {
  createUser(input: $input) {
    firstName
    lastName
    username
    avatar
  }
}

  mutation($input: createUserInput) {
  createUser(input: $input) {
    firstName
    lastName
    username
    avatar
  }
}

As you can see, the mutation args typing is wrong, it should be

CreateUserInput!

CreateUserInput!

CreateUserInput!

CreateUserInput! instead of

createUserInput

createUserInput

createUserInput

createUserInput
also the mutation arg name is wrong, it should be

data

data

data

data instead of

input

input

input

input.

How can i define / customize this behaviour?

How to customize a form graphql mutation?

Similar Threads

Similar Threads

Similar Threads