Mantine useModal with create and edit
I am implementing Mantine's useModalForm to create a document and it works as expected. However, I have a specific need for my data.
I have an
Account
document and a Client
child document using AppWrite's relationships. I want to create a new Client
document and update the Account.client
field with the new Client.$id
.
Is this possible with refine hooks? Am I going about this the wrong way?17 Replies
Hi @theswarm420. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Hmm, I don't know enough to give you a confident answer yet. The information extracts provided do not contain specific details about handling nested or related documents using refine hooks with Mantine's
useModalForm
.
However, refine does provide a variety of hooks for data manipulation, such as useForm
and useUpdate
, which might be useful in your scenario. You might be able to use these hooks to create a new Client
document and then update the Account.client
field with the new Client.$id
.
I recommend checking out the documentation for useForm (https://refine.dev/docs/api-reference/mantine/hooks/form/useForm/) and useUpdate (https://refine.dev/docs/api-reference/core/hooks/data/useUpdate/) for more information.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@1117289843584671775> kapa.ai is still learning and improving, please let us how it did by reacting below
like-gold•17mo ago
@theswarm420 I am having similar problems when it comes to creating documents requiring the id of another document.
I'm trying to use the
onSuccess
callback for the useCrate
hook, but it doesn't seem to be returning the created document.adverse-sapphireOP•17mo ago
I'm looking into swizzling components now, I'll update if it works out
@kapa.ai Can I swizzle the <CreateButton> component to handle 2 resource actions in succession?
Let me check the knowledge base for you. One moment! :books:
----------------------
Yes, you can swizzle the
<CreateButton>
component to customize its behavior. Swizzling allows you to override the default functionality of a component in refine.
In your case, you can swizzle the <CreateButton>
to handle two resource actions in succession. However, the specifics of how you would implement this depend on the exact actions you want to perform and the data involved.
Here's a general idea of how you might swizzle the <CreateButton>
:
In this example, handleClick
is a function that performs two actions when the button is clicked. You would replace the comments with the actual code for your actions.
For more information on swizzling in refine, check out the refine CLI documentation (https://refine.dev/docs/packages/documentation/cli/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@1117289843584671775> kapa.ai is still learning and improving, please let us how it did by reacting below
adverse-sapphireOP•17mo ago
@kapa.ai I want to perform a create action on my
Clients
collection, then return the document and update a document in the Accounts
collectionLet me check the knowledge base for you. One moment! :books:
----------------------
You can achieve this by using the
useCreate
and useUpdate
hooks provided by refine. The useCreate
hook is used to create a new document in a collection, and the useUpdate
hook is used to update an existing document.
Here's a basic example of how you might use these hooks:
In this example, handleClick
is an async function that first creates a new client, then updates an account with the new client's ID. You would replace the comments with the actual data for your client and account.
Please note that this is a simplified example and you might need to handle errors and loading states in your actual implementation.
For more information on these hooks, check out the useCreate (https://refine.dev/docs/api-reference/core/hooks/data/useCreate/) and useUpdate (https://refine.dev/docs/api-reference/core/hooks/data/useUpdate/) documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@1117289843584671775> kapa.ai is still learning and improving, please let us how it did by reacting below
adverse-sapphireOP•17mo ago
@kapa.ai Can I swizzle useModalForm to perform the 2 resource actions instead?
Let me check the knowledge base for you. One moment! :books:
----------------------
Swizzling is typically used to override the behavior of components, not hooks. The
useModalForm
hook is a function that provides certain functionality, and it's not directly swizzlable.
However, you can create a custom hook that wraps useModalForm
and adds the additional functionality you need. Here's a basic example:
In this example, useCustomModalForm
is a custom hook that wraps useModalForm
and adds additional functionality to handle the form submission. When the form is submitted, it first creates a new client, then updates an account with the new client's ID.
Please note that this is a simplified example and you might need to handle errors and loading states in your actual implementation.
For more information on these hooks, check out the useCreate (https://refine.dev/docs/api-reference/core/hooks/data/useCreate/), useUpdate (https://refine.dev/docs/api-reference/core/hooks/data/useUpdate/), and useModalForm (https://refine.dev/docs/api-reference/mantine/hooks/form/useModalForm/) documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@1117289843584671775> kapa.ai is still learning and improving, please let us how it did by reacting below
adverse-sapphireOP•17mo ago
@kapa.ai Let me be more specific. In my current implementation, I utilize
useModalForm
from @refinedev/mantine
. Inside this form, I have a <Select>
component as part of the form that identifies which Account
document to update when a new Client
document is uploaded. I need to create a custom useModalForm
hook to ingest this data and edit the Account.client
field with the ID of the new Client
document.Let me check the knowledge base for you. One moment! :books:
----------------------
You can create a custom hook that wraps
useModalForm
and adds the additional functionality you need. Here's a basic example:
In this example, useCustomModalForm
is a custom hook that wraps useModalForm
and adds additional functionality to handle the form submission. When the form is submitted, it first creates a new client, then updates the selected account with the new client's ID.
Please note that this is a simplified example and you might need to handle errors and loading states in your actual implementation.
For more information on these hooks, check out the useCreate (https://refine.dev/docs/api-reference/core/hooks/data/useCreate/), useUpdate (https://refine.dev/docs/api-reference/core/hooks/data/useUpdate/), and useModalForm (https://refine.dev/docs/api-reference/mantine/hooks/form/useModalForm/) documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@1117289843584671775> kapa.ai is still learning and improving, please let us how it did by reacting below
adverse-sapphireOP•17mo ago
@kapa.ai In the previous code, how do I pass in data from a <Select> component inside a modal that uses the useCustomModalForm hook?
Let me check the knowledge base for you. One moment! :books:
@theswarm420 That's a great question, but unfortunately I am only capable of responding to a maximum of three questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!