unwilling-turquoise•9mo ago

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
    }
  }
}

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

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
  }
}

As you can see, the mutation args typing is wrong, it should be CreateUserInput! instead of createUserInput also the mutation arg name is wrong, it should be data instead of input. How can i define / customize this behaviour?

12 Replies

kapa.ai•9mo ago

Hi @kraloz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can customize the mutation used by the useForm hook in refine. This allows you to define your own mutation that matches the structure required by your GraphQL backend. Here's how you can do it: First, you need to use the useMutation hook to create a custom mutation. You can specify the resource, action, and other options in the useMutation hook. Then, you can use the useForm hook and pass the custom mutation to it. The useForm hook provides a mutation option that you can use to override the default mutation. Here's an example:

import { useForm, useMutation } from "@refinedev/core";

const UserCreate: React.FC = () => {
    const { mutate } = useMutation({
        resource: "users",
        action: "create",
    });

    const { formProps, saveButtonProps } = useForm({
        mutation: (values) => mutate({
            endpoint: "/submit",
            data: values,
        }),
    });

    // Rest of your component
};

import { useForm, useMutation } from "@refinedev/core";

const UserCreate: React.FC = () => {
    const { mutate } = useMutation({
        resource: "users",
        action: "create",
    });

    const { formProps, saveButtonProps } = useForm({
        mutation: (values) => mutate({
            endpoint: "/submit",
            data: values,
        }),
    });

    // Rest of your component
};

In this example, the useMutation hook is used to create a custom mutation for the "users" resource. The useForm hook then uses this custom mutation instead of the default one. The endpoint option in the mutate function is used to specify the custom endpoint ("/submit") for the create action. Please note that you might need to adjust the endpoint and data options in the mutate function to match your GraphQL backend's requirements. You can find more information about this in the refine Discord support thread (https://discord.com/channels/837692625737613362/1151350864062185543). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

unwilling-turquoise•9mo ago

the useMutation does not exists @kapa.ai

kapa.ai•9mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. You're correct, there's no useMutation hook in refine. Instead, you can use the useCustomMutation hook to send custom mutation requests. Here's how you can use it:

import { useCustomMutation } from "@pankod/refine";

const { mutate } = useCustomMutation({
    resource: "users",
    action: "create",
});

const handleCustomPost = async () => {
    const { data } = await mutate({
        url: "/custom-url",
        method: "POST",
        payload: { key: "value" },
    });
};

import { useCustomMutation } from "@pankod/refine";

const { mutate } = useCustomMutation({
    resource: "users",
    action: "create",
});

const handleCustomPost = async () => {
    const { data } = await mutate({
        url: "/custom-url",
        method: "POST",
        payload: { key: "value" },
    });
};

In this example, mutate is a function that you can call to make the custom POST request. The url, method, and payload parameters are used to specify the URL, HTTP method, and request body of the POST request. You can find more information about this in the refine Discord support thread (https://discord.com/channels/837692625737613362/1141851568493310072). However, please note that this is a general example and you might need to adjust the url, method, and payload parameters to match your GraphQL backend's requirements. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

unwilling-turquoise•9mo ago

Back to what we were talking in previous messages, how can i fix the typing of the input arg createUserInput ? it should be CreateUserInput! @kapa.ai

kapa.ai•9mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry for the confusion, but based on the information extracts provided, there's no specific example or method mentioned on how to customize the mutation input type in refine. However, refine uses GraphQL's type system, so you might be able to define the input type in your GraphQL schema or in the mutation itself. For more specific guidance, I would recommend checking the refine documentation (https://refine.dev/docs) or asking in the refine Discord community (https://discord.com/channels/837692625737613362/837692625737613365). They might be able to provide more specific guidance based on your exact GraphQL schema and setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

unwilling-turquoise•9mo ago

the second link that you sent is not working @kapa.ai

kapa.ai•9mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the inconvenience. The link provided was extracted from the information sources and it seems to be broken. For more specific guidance, I would recommend checking the refine documentation (https://refine.dev/docs) or reaching out to the refine community through their official communication channels. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

broad-brown•9mo ago

Hello @kraloz, you can swizzle the data provider and modify according to your needs: https://refine.dev/docs/tutorial/understanding-dataprovider/swizzle/ We also use gql-query-builder under the hood, parameters are passed to this library to generate query/mutation. https://github.com/atulmy/gql-query-builder#mutation-with-custom-types You can check their docs to see if there is a workaround without swizzle.

2. Create a data provider with swizzle | refine

What is swizzle?

GitHub

GitHub - atulmy/gql-query-builder: 🔧 Simple GraphQL Query Builder

🔧 Simple GraphQL Query Builder. Contribute to atulmy/gql-query-builder development by creating an account on GitHub.