Create form onSubmit update two database tables
Hi i'm using supabase for my backend. I'm trying to update two tables at the same time. One is menuitems and the other is a many-to-many table called menuitemallergens with menu_item_id and allergen_id. How do I setup my form so I can first submit the menu items and then update the menuitemallergens table with the according allergens?
8 Replies
Hi @GooglyEyes. 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. However, based on the information provided, you might need to create a custom form handler to handle the submission of data to two different tables.
In the Discord support thread (https://discord.com/channels/837692625737613362/1186343138751676526), a community member was trying to do something similar with a multi-step form. They were using the
useStepsForm hook from Refine and trying to fire a custom form handler.
You might need to do something similar, but instead of using useStepsForm, you might need to use useForm or useMutation depending on your needs.
Unfortunately, the information provided does not include a specific example of updating two tables at once. I would recommend checking out the Refine documentation (https://refine.dev/docs/data/packages/supabase#adding-crud-pages) for more information on how to handle form submissions with Refine and Supabase.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@378506268911861760> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orange•6mo ago
@kapa.ai for some reason data comes back as null.
const { mutate, isLoading } = useCreate();
const onSubmit = async (formData) => {
mutate(
{
resource: "menuitems",
values: {
name: formData.name,
description: formData.description,
price: formData.price,
category_id: formData.category_id,
},
},
{
onSuccess: (data) => {
console.log("Menu item created successfully:", data);
},
onError: (error) => {
console.error("Error creating menu item:", error);
},
}
);
};
Let me check the knowledge base for you. One moment! :books:
----------------------
Based on the code you've provided, it seems like you're using the
useCreate hook correctly to submit form data to the "menuitems" resource. If the data is coming back as null, it could be due to a few reasons:
1. The API endpoint might not be returning any data. Some APIs are configured to return no data or a simple success message upon a successful create operation. You might want to check your API documentation or backend setup to confirm this.
2. There might be an issue with the data you're sending. Ensure that the formData object contains the correct data and that the property names match what your API endpoint is expecting.
3. There might be an issue with your Supabase setup or the way you've configured your data provider in Refine. You can check the Refine documentation (https://refine.dev/docs/data/packages/supabase#register-supabase-data-provider) to ensure you've set up everything correctly.
If you're still having issues, it might be helpful to log the formData object before the mutate function call to ensure it contains the correct data. You could also try to catch any errors during the mutation with a .catch() block to see if there are any issues during the request.
Remember to check the console for any errors or warnings, as they might provide more insight into what's going wrong.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@378506268911861760> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orange•6mo ago
@kapa.ai Yes, @refinedev/supabase setup doesn't seem to return the created object on POST
Let me check the knowledge base for you. One moment! :books:
----------------------
Based on the information provided, it seems like the
@refinedev/supabase package might not be configured to return the created object after a POST request. This behavior might be due to the configuration of the Supabase API or the @refinedev/supabase package itself.
In a Github issue (https://github.com/refinedev/refine/issues/5350) related to the @refinedev/supabase package, a user reported a similar issue where the ID of an uploaded file was not being returned. The issue was resolved by manually changing the @supabase/supabase-js version in the node_modules/@refinedev/supabase/package.json file.
If you're expecting the created object to be returned after a POST request, you might need to adjust your backend configuration or modify the @refinedev/supabase package to suit your needs.
If you're still having issues, I would recommend reaching out to the Refine or Supabase communities for further assistance. They might be able to provide more specific guidance based on your exact setup and requirements.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@378506268911861760> kapa.ai is still learning and improving, please let us know how it did by reacting below