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:
In the frontend i'm rendering the next creation form component:
But when i click on submit, the following (wrong) mutation is sended to the backend:
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
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:
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:
----------------------<@240270957686554624> kapa.ai is still learning and improving, please let us know how it did by reacting below
wee-brown•11mo ago
the
useMutation
does not exists @kapa.aiLet 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:
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:
----------------------<@240270957686554624> kapa.ai is still learning and improving, please let us know how it did by reacting below
wee-brown•11mo 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.aiLet 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:
----------------------
<@240270957686554624> kapa.ai is still learning and improving, please let us know how it did by reacting below
wee-brown•11mo ago
the second link that you sent is not working @kapa.ai
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:
----------------------
<@240270957686554624> kapa.ai is still learning and improving, please let us know how it did by reacting below
multiple-amethyst•10mo 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.