Updating multiple supabase tables on form submission to set many to many relationships

Hello, I am pretty new to Plasmic and creating an exercise database. I am trying to figure out how to update multiple tables in one form submission. In Supabase, I have an exercise table, and a tag table which have a many to many relationship in a junction table exercise_tags. For example, bench press could have the tags: “upper body” ,“chest”, and “triceps” assigned to it (so 3 new entries in the exercise_tags table.

I am trying to create a form to not only create a new exercise, but also assign it tags. Then upon submission, I want a new exercise to be added to the exercise table and a new row added for each of the tags in the exercise_tags junction table. Any help is greatly appreciated!

I havent come across a video or docs explaining how this would be setup but perhaps I am just missing something?

Hi @brian_minor, welcome to the Plasmic forum!

You should be able to add multiple steps in a single form submission. Check out Introduction to interactions and state | Learn Plasmic.

1 Like

Thanks, I had figured out how to use multiple steps, but the issue I am running into is trying to create multiple rows in the Exercise_Tags table for each of the tags values that is selected in a multi-select component (so the number of entries will be dynamic depending on user input). I just can’t figure out how to structure the SQL write query to create more than one row based on each ID thats selected. I am essentially trying to create a row for each value in the array for the select element.

Hey @brian_minor,

What method are you using to write to Supabase?

If you are using the HTTP API, you can send Supabase an array of rows for bulk creation. Something like:

curl -X POST 'https://cqyieutggvpyimdmqsam.supabase.co/rest/v1/exercise' \
-H "apikey: SUPABASE_KEY" \
-H "Authorization: Bearer SUPABASE_KEY" \
-H "Content-Type: application/json" \
-H "Prefer: return=minimal" \
-d '{ "name": "bench press" }' //this should return the row added


curl -X POST 'https://cqyieutggvpyimdmqsam.supabase.co/rest/v1/exercise_tags' \
-H "apikey: SUPABASE_KEY" \
-H "Authorization: Bearer SUPABASE_KEY" \
-H "Content-Type: application/json" \
-d '[{ "exercise_id": "from above", "tag_id": "1" }, { "exercise_id": "from above", "tag_id": "2" }, { "exercise_id": "from above", "tag_id": "3" }]'

If you are using the Supabase/Postgres direct database connector built into Plasmic, you should be able to select “Create rows” (as opposed to “create row”) and pass it an array of row objects much the same way. You will likely have to map over you input values to get them in the write format. This would look something like this. You would configure in the editor and maybe have to map (refer below) over your input value depending on your input element config and table schema

with the custom code to generate the array of row objects in the right format by mapping over the input values being something like this depending on your table schema:

$state.form.value.tags.map((tag) => Object.assign({},
    { "name":tag }

Hope that helps! :slight_smile:

1 Like

Thanks a lot, this was extremely helpful!