genetic-orange
genetic-orange7mo 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
kapa.ai7mo 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
kapa.ai7mo ago
<@240270957686554624> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orange
genetic-orange7mo ago
the useMutation does not exists @kapa.ai
kapa.ai
kapa.ai7mo 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
kapa.ai7mo ago
<@240270957686554624> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orange
genetic-orange7mo 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
kapa.ai7mo 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
kapa.ai7mo ago
<@240270957686554624> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orange
genetic-orange7mo ago
the second link that you sent is not working @kapa.ai
kapa.ai
kapa.ai7mo 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
kapa.ai7mo ago
<@240270957686554624> kapa.ai is still learning and improving, please let us know how it did by reacting below
fair-rose
fair-rose7mo 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.
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.