Creating multiple entries with AntD's Create and useForm with Supabase
I have 2 tables: brokerage_accounts and brokerage_reports. When creating a brokerage_reports entry, I reference a brokerage_accounts entry. What I'd like to do is have a switch where the user submitting the form can select to create a single entry, or multiple entries for all brokerage_accounts entries. I know it needs to be done with a handleOnFinish function, but am unsure how to tweak my code to do what's needed.
23 Replies
Hi @James. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the extracts, you can modify the
handleOnFinish
function to handle both single and multiple entries. However, the extracts do not provide specific information on how to create multiple entries for all brokerage_accounts
entries in Supabase.
The handleOnFinish
function can be modified to check if the massReport
state is true or false. If it's true, you can loop through all brokerage_accounts
and create a brokerage_reports
entry for each one. If it's false, you can create a single brokerage_reports
entry.
However, the extracts do not provide information on how to retrieve all brokerage_accounts
entries or how to create multiple brokerage_reports
entries in Supabase. You might need to use the useQuery
hook to retrieve all brokerage_accounts
and the useMutation
hook to create brokerage_reports
entries, but the exact implementation would depend on your Supabase setup and is not covered in the extracts.
Here is a general idea of how you can modify the handleOnFinish
function:
Please refer to the Refine documentation (https://refine.dev/docs/guides-concepts/forms#basic-usage) and the Supabase documentation (https://supabase.io/docs/guide) for more information on how to use the useQuery
and useMutation
hooks with Supabase.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below
extended-yellow•7mo ago
@kapa.ai I was able to get it running as expected with the following code:
The one catch is that I get multiple success notifications. Can I set it so that I only get 1 that fires, even though I'm looping over onFinish?
Let me check the knowledge base for you. One moment! :books:
----------------------
Yes, you can control the success notifications by using the
successNotification
prop in the useForm
hook. By default, useForm
triggers a success notification for each successful mutation. However, you can disable these default notifications and manually trigger a single notification after all mutations are done.
First, disable the default success notifications by setting successNotification
to false
in the useForm
hook:
Then, manually trigger a success notification after all mutations are done. You can use the useNotification
hook to manually trigger notifications:
In this code, Promise.all
is used to wait for all mutations to finish before triggering the success notification. Please note that error handling is not included in this code. You might want to add error handling to handle any errors that might occur during the mutations.
For more information, please refer to the Refine documentation on useForm (https://refine.dev/docs/data/hooks/use-form#successnotification-) and useNotification (https://refine.dev/docs/notification/use-notification).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below
extended-yellow•7mo ago
@kapa.ai Your useNotification link is out of date, here's the current one: https://refine.dev/docs/notification/hooks/use-notification.
Also, no longer exists, it's .
Let me check the knowledge base for you. One moment! :books:
----------------------
I apologize for the outdated information. You're correct, the
useNotification
hook now returns open
and close
methods. You can use the open
method to manually trigger notifications. Here's how you can modify the code:
In this code, open
is used to manually trigger a success notification after all mutations are done. Please note that error handling is not included in this code. You might want to add error handling to handle any errors that might occur during the mutations.
For more information, please refer to the updated Refine documentation on useNotification (https://refine.dev/docs/notification/hooks/use-notification).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below
extended-yellow•7mo ago
@kapa.ai If using the option when massReport is true, the success message doesn't fire. It does if massReport is false however.
Let me check the knowledge base for you. One moment! :books:
----------------------
The issue might be related to the asynchronous nature of the
Promise.all
function. The open
function might be called before all the promises in Promise.all
are resolved, which could cause the success message not to fire.
To ensure that the open
function is called after all the promises are resolved, you can try moving it inside a .then
block:
In this code, the open
function is called inside a .then
block, which ensures that it's called after all the promises in Promise.all
are resolved.
Please note that error handling is not included in this code. You might want to add error handling to handle any errors that might occur during the mutations.
For more information, please refer to the Refine documentation on useNotification (https://refine.dev/docs/notification/hooks/use-notification) and the MDN documentation on Promise.all (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below
extended-yellow•7mo ago
@kapa.ai Even after putting it in a block, it still doesn't fire as expected.
Let me check the knowledge base for you. One moment! :books:
----------------------
I'm sorry to hear that you're still having trouble. It's difficult to diagnose the issue without more context. However, it's possible that the
onFinish
function might not be returning a promise, which could cause the Promise.all
function to resolve immediately.
You could try to ensure that onFinish
always returns a promise by wrapping it in a Promise.resolve
call:
If this doesn't solve the issue, I would recommend checking if there are any errors in the promises returned by onFinish
. You can do this by adding a .catch
block to the Promise.all
call:
This will log any errors that occur in the promises returned by onFinish
, which might help you diagnose the issue.
For more information, please refer to the Refine documentation on useNotification (https://refine.dev/docs/notification/hooks/use-notification), the MDN documentation on Promise.all (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all), and the MDN documentation on Promise.resolve (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below
extended-yellow•7mo ago
@kapa.ai Another quick question. For my useSelect field, I want to modify the optionLabel. I want it to read "user.full_name- " + "broker_dealer" + "account_number". What's the best way of doing that?